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!");
}