Artículo original escrito por: Dillion Megida
Artículo original: JavaScript String.Replace() Example with RegEx
Traducido y adaptado por: Rafael D. Hernandez
Las expresiones regulares (también llamadas RegEx o RegExp) son una forma poderosa de analizar texto. Con expresiones regulares, puedes hacer coincidir cadenas en puntos que coincidan con caracteres específicos (por ejemplo, JavaScript) o patrones (por ejemplo, NumberStringSymbol - 3a&).
El método .replace
reemplazar se usa en cadenas en JavaScript para reemplazar partes de cadenas con caracteres. A menudo se usa así:
const str = 'JavaScript';
const newStr = str.replace("ava", "-");
console.log(newStr);
// J-Script
Como puedes ver anteriormente, el método reemplazar acepta dos argumentos: la cadena a reemplazar y con qué cadena se reemplazaría.
Aquí es donde entra la expresión regular.
El uso de .replace
anteriormente es limitado: los caracteres que se reemplazarán son conocidos: "ava". ¿Y si nos preocupamos en un patrón en su lugar? ¿Tal vez, un número, dos letras y la palabra "foo" o tres símbolos usados juntos?
El método .replace
utilizado con RegEx
puede lograr esto. La expresión regular se puede usar de manera efectiva para recrear patrones. Así que combinar esto con .replace
significa que podemos reemplazar patrones y no solo caracteres exactos.
Cómo usar RegEx
con .replace
en JavaScript
Para usar expresiones regulares, el primer argumento de replace
se reemplazará con la sintaxis de expresiones regulares, por ejemplo /regex/
. Esta sintaxis sirve como un patrón donde cualquier parte de la cadena que coincida con ella será reemplazada por la nueva subcadena.
Este es un ejemplo:
// coincide con un número, algunos caracteres y otro número
const reg = /\d.*\d/
const str = "Java3foobar4Script"
const newStr = str.replace(reg, "-");
console.log(newStr);
// "Java-Script"
La cadena 3foobar4
coincide con la expresión regular / \d. * \d/
, por lo que se reemplaza.
¿Y si quisiéramos realizar reemplazos en varios lugares?
Regex
ya ofrece eso con la bandera g
(global), y lo mismo se puede usar con replace
. He aquí cómo:
const reg = /\d{3}/g
const str = "Java323Scr995ip4894545t";
const newStr = str.replace(reg, "");
console.log(newStr);
// JavaScrip5t
// 5 no pasó la prueba :(
La expresión regular coincide con partes de la cadena que son exactamente 3 números consecutivos. 323
coincide, 995
coincide, 489
coincide y 454
coincide. Pero el último 5
no coinciden con el patrón.
El resultado es que JavaScrip5t
muestra cómo los patrones coinciden correctamente y los reemplaza con la nueva subcadena (una cadena vacía).
La bandera -i
también se puede usar. Esto significa que puedes reemplazar patrones que no distinguen mayúsculas de minúsculas.
Así es como se usa:
..5a..
no coincide con la primera sintaxis porque la expresión regular distingue entre mayúsculas y minúsculas por defecto. Pero con el uso de la bandera i
, como se ve en la segunda sintaxis, la cadena es la esperada, reemplazada.
Cómo usar Split con expresiones regulares
split
también usa expresiones regulares. Lo que significa que puedes dividir una cadena no solo en subcadenas que coincidan con caracteres exactos, sino también en patrones.
Aquí tienes un vistazo rápido:
const regex = /\d{2}a/;
const str = "Hola54 Como 64eestas tu";
console.log(str.split(regex))
// ["Hola54 Como ", "estas tu"]
La cadena se dividió (split
) a 64a
porque esa subcadena coincide con la expresión regular especificada.
Ten en cuenta que la bandera global - g
- en split
es irrelevante, a diferencia de la bandera i
y otras banderas. Esto se debe a que split
divide la cadena en los varios puntos que coinciden con la expresión regular.
Para concluir
RegEx
hace que reemplazar (replace
) cadenas en JavaScript sea más efectivo, potente y divertido.
No solo estás restringido a caracteres exactos, sino también a patrones y reemplazos múltiples a la vez. En este artículo, hemos visto cómo trabajan juntos usando algunos ejemplos.
¿Saludos a RegEx?