Una operación muy frecuente y habitual en Javascript, es la de comprobar la existencia de un texto, buscar o incluso reemplazar por otro texto. Dependiendo del caso, hará falta uno u otro, por lo que lo primero que debes tener claro es saber cuál necesitas. Piensa que, aunque la sintaxis o el uso de uno de ellos te resulte más sencillo que otro, hay tareas que puede que no necesites realizar gratuitamente:
🔍 **Comprobación **(🔍): La más ligera de las tres. Sólo comprueba si existe el fragmento de texto.
🕵️♀️ **Búsqueda **(🔍+🕵️♀️): Busca un fragmento de texto, devolviendo información del texto encontrado (posición, texto…).
🔁 **Reemplazo **(🔍+🕵️♀️+🔁): Realiza una búsqueda de un texto y además un reemplazo. Suele ser más costoso.
Observa que en cada método tienes un segundo parámetro opcional, donde se puede indicar desde donde quieres empezar a comprobar (en el caso de from), o hasta donde quieres comprobar (en el caso de to).
El método .startsWith() devolverá truesi el comienza por text. De lo contrario, false.
El método .endsWith() devolverá truesi el acaba en text. De lo contrario, false.
El método .includes() devolverá true si el contiene text. De lo contrario, false.
Veamos algunos ejemplos:
const text = "Manz";
text.startsWith("M"); //true ('Manz' empieza por 'M')
text.startsWith("a", 1); //true ('anz' empieza por 'a')
text.endsWith("o"); //false ('Manz'no acaba en 'o')
text.endsWith("n", 3); //true ('Man' acaba en 'n')
text.includes("an"); //true ('Manz' incluye 'an')
text.includes("M", 1); //false ('anz'no incluye 'M')
Ten en cuenta que los del segundo parámetro, lo que hacen es acortar el (por el inicio o por el final) antes de realizar la comprobación.
Si necesitamos realizar una búsqueda de un texto (que muchas veces no tenemos claro como es) y queremos obtener información como la posición o las búsquedas encontradas, y los métodos del tema anterior de posiciones y substrings no nos sirven (o se nos quedan cortos), podemos utilizar alguno de los siguientes:
Estas búsquedas toman por parámetro expresiones regulares, por lo que suelen ser más potentes y flexibles que buscar sólo por texto. La diferencia fundamental entre ellas es la siguiente:
El método .search() devuelve la posición de la primera ocurrencia. -1 si no se encuentra.
El método .match() devuelve un con las coincidencias encontradas. nullsi no se encuentran.
El método .matchAll() devuelve un iterador para poder recorrer las coincidencias encontradas.
Veamos algunos ejemplos:
consttext = "El gato, el perro y el pato.";
const regexp = /.a.o/g;
text.search(regexp); // 3, porque la primera coincidencia ocurre en la posición 3 (gato)text.match(regexp); // ["gato", "pato"], las dos coincidencias encontradasPor otro lado, el método .matchAll()es un poco más avanzado, y permite realizar la misma acción que .match() pero devolviendo un iterador, lo que nos permite recorrerlo en un bucle:
const text = "El gato, el perro y el pato.";
const regexp = /.a.o/g;
constiterator = text.matchAll(regexp);
for (let ocurrence ofiterator) {
console.log(ocurrence);
}
// ['gato', index: 3, input: 'El gato, el perro y el pato.', groups: undefined]
// ['pato', index: 23, input: 'El gato, el perro y el pato.', groups: undefined]
También es posible utilizar .matchAll() desestructurando su resultado, lo que nos permitirá acceder a la información de una forma más directa:
consttext = "El gato, el perro y el pato.";
const regexp = /.a.o/g;
const results = [...text.matchAll(regexp)]; // ["gato", "pato"]
results.length // 2
results[0].index // 3
results[1].index // 23Si lo que necesitamos es reemplazar un texto, tenemos a nuestra disposición una serie de métodos, tanto en versión donde buscas mediante un string, como en versión donde buscas mediante una REGEXP:
Observa que dichos métodos se pueden resumir en lo siguiente:
El método replace() reemplaza solo la primera aparición de un texto (salvo que se use una regexp global)
El método replaceAll() reemplaza todas las apariciones de un texto.
Veamos algunos ejemplos para ilustrarlo mejor.
const text = "Hola gato, ¿eres un perro o eres un pato?";
// Reemplazar la primera ocurrencia
text.replace("g", "p"); // "Hola pato, ¿eres un perro o eres un pato?"
text.replace("g", "p").replace("o", "a"); // "Hala pato, ¿eres un perro o eres un pato?"// Reemplazar todas las ocurrencias
text.replaceAll("e", "i"); // "Hola gato, ¿iris un pirro o iris un pato?"
text.replace(/e/g, "i"); // "Hola gato, ¿iris un pirro o iris un pato?"Ten en cuenta que textno cambia (no muta), es decir, el método .replace()devuelve un nuevo Stringcon el texto original reemplazado. En los ejemplos anteriores, cada linea está actuando sobre la constante textde la primera línea.
El primer grupo, reemplaza sólo la primera ocurrencia encontrada. Observa que el segundo ejemplo del primer grupo, encadenamos varios .replace() consecutivos, por lo que se reemplaza la primera ocurrencia de g por p y del resultado, se reemplaza la primera ocurrencia de o por a.
El segundo grupo, por su parte, se utiliza .replaceAll()o .replace() con una expresión regular global, por lo que se reemplazan todas las ocurrencias.
