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

Upload de arquivos com validação em javascript
17/11/2019JAVASCRIPT

Upload de arquivos com validação em javascript

Aprenda a validar a extensão e o tamanho do arquivo antes de fazer upload com JS

Saiba mais...
Sites e aplicativos para praticar o seu inglês
06/11/2022JAVASCRIPT

Sites e aplicativos para praticar o seu inglês

Veja dicas de como melhorar o seu inglês sem colocar a mão no bolso

Saiba mais...

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