Expressões regulares (também chamadas de RegEx ou RegExp) são uma maneira poderosa de analisar texto. Com RegEx, você pode combinar strings em pontos que correspondem a caracteres específicos (por exemplo, JavaScript) ou padrões (por exemplo, NumberStringSymbol – 3a &).
o .replace método é usado em strings em JavaScript para substituir partes de string por caracteres. Muitas vezes é usado assim:
const str="JavaScript";
const newStr = str.replace("ava", "-");
console.log(newStr);
// J-Script
Como você pode ver acima, o método replace aceita dois argumentos: a string a ser substituída e com o que a string seria substituída.
Aqui é onde Regex entra.
O uso de .replace acima é limitado: os caracteres a serem substituídos são conhecidos – “ava”. E se, em vez disso, estivermos preocupados com um padrão? Talvez, um número, duas letras e a palavra “foo” ou três símbolos usados juntos?
o .replace método usado com RegEx pode conseguir isso. RegEx pode ser usado com eficácia para recriar padrões. Então, combinando isso com .replace significa que podemos substituir padrões e não apenas caracteres exatos.
Como usar RegEx com .replace em JavaScript
Para usar RegEx, o primeiro argumento de replace será substituído pela sintaxe regex, por exemplo /regex/. Essa sintaxe serve como um padrão em que quaisquer partes da string que correspondam a ela serão substituídas pela nova substring.
Aqui está um exemplo:
// matches a number, some characters and another number
const reg = /d.*d/
const str = "Java3foobar4Script"
const newStr = str.replace(reg, "-");
console.log(newStr);
// "Java-Script"
A corda 3foobar4 corresponde ao regex /d.*d/, por isso é substituído.
E se quiséssemos realizar substituições em vários lugares?
Regex já oferece isso com o g (global), e o mesmo pode ser usado com replace. Veja como:
const reg = /d{3}/g
const str = "Java323Scr995ip4894545t";
const newStr = str.replace(reg, "");
console.log(newStr);
// JavaScrip5t
// 5 didn't pass the test :(
A regex corresponde a partes da string que são exatamente 3 números consecutivos. 323 corresponde, 995 corresponde, 489 corresponde, e 454 corresponde. Mas o último 5 não corresponde ao padrão.
O resultado é que JavaScrip5t mostra como os padrões são correspondidos corretamente e os substitui pela nova substring (uma string vazia).
A bandeira do caso – i também pode ser usado. Isso significa que você pode substituir padrões que não diferenciam maiúsculas de minúsculas. É assim que é usado:
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.. não corresponde à primeira sintaxe porque RegEx diferencia maiúsculas de minúsculas por padrão. Mas com o uso do i sinalizador, como visto na segunda sintaxe, a string é conforme o esperado – substituído.
Como usar a divisão com expressões regulares
split também usa RegEx. O que significa que você pode dividir uma string não apenas em substrings que correspondem a caracteres exatos, mas também em padrões.
Aqui está uma olhada rápida:
const regex = /d{2}a/;
const str = "Hello54 How 64aare you";
console.log(str.split(regex))
// ["Hello54 How ", "are you"]
A corda era split em 64a porque essa substring corresponde ao regex especificado.
Observe que a bandeira global – g – dentro split é irrelevante, ao contrário do i bandeira e outras bandeiras. Isto é porque split divide a string nos vários pontos que a regex corresponde.
Empacotando
RegEx faz replacetornar strings em JavaScript mais eficazes, poderosas e divertidas.
Você não está restrito apenas a caracteres exatos, mas a padrões e várias substituições ao mesmo tempo. Neste artigo, vimos como eles funcionam juntos usando alguns exemplos.
Felicidades para RegEx 😅