JavaScript String.Replace () Exemplo com RegEx

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 numberconst 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}/gconst 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/iconst str = "Jav5ascript"const newStr1 = str.replace(reg1, "--");const newStr2 = str.replace(reg2, "--");console.log(newStr1) // Jav5ascriptconsole.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 😅