Localizando e substituindo dados com expressões regulares com JavaScript

Localizando e substituindo dados com expressões regulares com JavaScript

Vamos ver alguns exemplos de como trabalhar com a localização e substituição de dados, utilizando expressões regulares no JavaScript.

Expressões regulares é um recurso que existe em várias linguagens de programação que permitem validar strings de acordo com um determinado padrão.

Neste primeiro exemplo, vamos localizar a palavra "React" dentro de um texto.

var texto = "Tutoriais sobre NodeJS, React e PHP!";

var RegExp = /React/;

if (texto.search(RegExp) != -1) {

console.log("Encontrado na posição: "+ texto.search(RegExp));

} else {

console.log("Não encontrado!");

}

 

Vamos entender o que acabamos de executar. A variável RegExp guarda o padrão que desejamos localizar. Numa expressão regular, os padrões são inseridos entre as barras (/), perceba que elas aparerem no começo e no fim.

 var RegExp = /React/;

Uma string  possui o método "search", que retorna a posição inicial da informação que você pediu para encontrar. Quando a expressão não consegue localizar nenhuma informação compatível, o retorno e igual a -1. Em nosso exemplo, o parâmetro informado foi uma expressão regular.

Que tal um exemplo mais complicado? Vamos localizar um e-mail. Existem várias formas de escrever uma expressão para localizar um e-mail, de forma simplificada, o que vamos fazer é procurar um texto que tenha o seguinte formato

(qualquer quantidade de letras ou números)@(qualquer quantidade de letras ou números).(qualquer quantidade de letras ou números)

var texto = "O meu e-mail é: teste@teste.com.br. Entre em contato comigo!";

var RegExp = /[\w]+@[\w]+.[\w]+/;

if (texto.search(RegExp) != -1) {

console.log("E-mail localizado na posição: " + texto.search(RegExp));

} else {

console.log("E-mail não encontrado!");

}

Se você retirar o ".br" do e-mail, a pesquisa vai continuar funcionando:

var texto = "O meu e-mail é: teste@teste.com. Entre em contato comigo!";

var RegExp = /[\w]+@[\w]+.[\w]+/;

if (texto.search(RegExp) != -1) {

console.log("E-mail localizado na posição: " + texto.search(RegExp));

} else {

console.log("E-mail não encontrado!");

}

Uma forma mais completa de fazer a pesquisa é a utilização do método "match".  No próximo exemplo, vamos localizar uma data.

var texto = "Data de entrega: 01/11/2019";

O formato da expressão regular será localizar uma informação que tenha dois números, uma barra, dois numeros, mais uma barra e quatro números no final.

var texto = "Data de entrega: 01/11/2019";

var RegExp = /[\d]{2}\/[\d]{2}\/[\d]{4}/;

if (texto.match(RegExp) != null) {

console.log("Frase: "+texto.match(RegExp).input);

console.log("Caractere inicial: "+texto.match(RegExp).index);

console.log("Caractere final: "+texto.match(RegExp).lastIndex);

console.log("Resultado: "+texto.match(RegExp)[0]);

} else {

console.log("Não foi localizado!");

}

Perceba que o match possui métodos que retornam a posição inicial e final da expressão localizada. Como eu posso ter mais de uma ocorrência da informação pesquisada, os dados válidos são retornados dentro de um array, então o seguinte cõdigo:

texto.match(RegExp)[0]

Retorna a primeira ocorrência localizada.

Sabendo disso, podemos fazer a substituição. Supondo que a data esteja errada, para fazer a troca de "01/11/2019" para "07/11/2019", utilizaremos o método "replace" da string texto. O código final ficaria da seguinte forma:

 

var texto = "Data de entrega: 01/11/2019";

var RegExp = /[\d]{2}\/[\d]{2}\/[\d]{4}/;

 

if (texto.match(RegExp) != null) {

console.log("Frase: "+texto.match(RegExp).input);

console.log("Caractere inicial: "+texto.match(RegExp).index);

console.log("Caractere final: "+texto.match(RegExp).lastIndex);

console.log("Resultado: "+texto.match(RegExp)[0]);

texto = texto.replace(RegExp,"07/11/2019");

console.log(texto);

} else {

console.log("Não foi localizado!");

}

 

Está começando e deseja saber o que precisa estudar de HTML e JavaScript? Não deixe de conferir os roteiros de estudo de HTML e JavaScript!. São dezenas de conteúdos para você melhorar suas habilidades.

Roteiro de estudos - HTML e CSS

Roteiro de estudos - Javascript

 

Outros conteudos que podem ser de seu interesse

Percorrer as propriedades de um objeto com JavaScript
25/11/2019JAVASCRIPT

Percorrer as propriedades de um objeto com JavaScript

Veja as várias formas de fazer loop nas propriedades de um objeto

Saiba mais...
Métodos para trabalhar com arrays no JavaScript
29/05/2022JAVASCRIPT

Métodos para trabalhar com arrays no JavaScript

Veja como resolver os problemas mais comuns ao utilizar arrays no JavaScript

Saiba mais...

Conteúdo sobre banco de dados sem complicação!