Artigo original: JavaScript String.Replace() Example with RegEx

Expressões Regulares (também chamadas de RegEx ou RegExp) são uma maneira poderosa de analisar textos. Com RegEx, você pode combinar strings em pontos que correspondem a caracteres específicos (por exemplo, em JavaScript) ou padrões de caracteres (por exemplo, NúmeroLetraSímbolo - 3a&).

O método .replace é utilizado em strings no JavaScript para substituir partes dela por caracteres. É frequentemente usado assim:

const string = 'JavaScript';
const novaString = string.replace("ava", "-");
console.log(novaString);
// J-Script

Como se pode ver acima, o método replace aceita dois argumentos: a string a ser substituída e também o que usaremos para substituir a string.

É aqui que entram as Regex.

O uso do .replace acima é limitado: os caracteres a serem substituídos são conhecidos - "ava". Mas se, ao invés disso, estivermos procurando um padrão (em inglês, pattern) de caracteres? Talvez, um número, duas letras e a palavra "foo", ou ainda três símbolos utilizados em conjunto?

O método .replace usado com RegEx pode conseguir isso. As RegEx podem ser usadas efetivamente para recriar esses padrões. Assim, combinando-as ao  .replace, podemos agora substituir também os padrões, não apenas caracteres exatos.

Como usar as RegEx com .replace em JavaScript

Para utilizar as RegEx, o primeiro argumento do replace será substituído pela sintaxe da regex, por exemplo /regex/. Esta sintaxe serve como um pattern onde qualquer parte da string que corresponda a ele será substituída pela nova substring.

Aqui está um exemplo:

// corresponde a um número, alguns caracteres e outro número
const regex = /\d.*\d/
const string = "Java3foobar4Script"
const novaString = string.replace(regex, "-");
console.log(novaString);
// "Java-Script"

A string 3foobar4 corresponde à regex /\d.*\d/, por isso é substituída.

E se quiséssemos fazer substituições em vários pontos?

As Regex já oferecem isso com a flag g (global), que pode ser usada com replace. Veja como:

const regex = /\d{3}/g
const string = "Java323Scr995ip4894545t";
const novaString = string.replace(regex, "");
console.log(novaString);
// JavaScrip5t
// 5 não passou no teste :(

As regex correspondem às partes da string que são exatamente 3 números consecutivos. O número 323 corresponde ao pattern, assim como os números 995, 489 e 454. O último 5, no entanto, não corresponde ao pattern.

O resultado, JavaScri5t, mostra como os patterns corretamente correspondidos e substituídos pela nova substring (uma string vazia).

Também é possível usar a flag - i, que ignora a diferença entre letras maiúsculas e minúsculas. Isso significa que você pode substituir patterns, independentemente de estarem em maiúsculas ou minúsculas. Veja como é usado:

const regex1 = /\dA/
const regex2 = /\dA/i
const string = "Jav5ascript"
const novaString1 = string.replace(regex1, "--");
const novaString2 = string.replace(regex2, "--");
console.log(novaString1) // Jav5ascript
console.log(novaString2) // Jav--script

..5a.. não corresponde à primeira sintaxe porque RegEx é, por padrão, sensível a maiúsculas e minúsculas. Porém, com o uso da flag i, conforme vemos na segunda sintaxe, a string corresponde ao esperado, sendo, então, substituída.

Como usar o método split com expressões regulares

O método split também usa RegEx, o que significa que você pode dividir uma string não apenas em substrings que correspondam a caracteres exatos, mas também por patterns.

Aqui está um exemplo rápido:

const regex = /\d{2}v/;
const string = "Oi54 Como 64vvai você";
console.log(string.split(regex))
// ["Oi54 Como ", "vai você"]

A string foi dividida (split) em 64v porque essa substring corresponde à regex especificada.

Observe que a flag global - g - no split é irrelevante, ao contrário da flag i e de outras flags. Isso ocorre porque o split divide a string em todos os pontos que correspondem à regex.

Encerrando

As RegEx tornam a substituição (replace) de strings em JavaScript mais eficaz, poderosa e divertida.

Você não está restrito apenas a caracteres exatos, mas a patterns e a várias substituições ao mesmo tempo. Neste artigo, vimos como eles trabalham juntos usando alguns exemplos.

Que tal um brinde às RegEx?