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:

const reg1 = /\dA/
const reg2 = /\dA/i
const str = "Jav5ascript"
const newStr1 = str.replace(reg1, "--");
const newStr2 = str.replace(reg2, "--");
console.log(newStr1) // Jav5ascript
console.log(newStr2) // Jav--script
`

..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?