usar regex em javascript
Uma breve introdução do que é e porque saber usar, e vamos logo a entender como montar e como usar as regex em javascript. Dessa vez eu aprendo expressões regulares.
Motivação
A utilização de expressões regulares, na maioria das linguagens de programação, representa um recurso de grande importância para a manipulação de strings.
Em JavaScript, no entanto, devido às características do front-end das aplicações, onde é comum a entrada de dados pelo usuário, as RegEx passam a ter uma função ainda mais relevante, por estarem diretamente relacionadas à consistência das informações.
Uma expressão regular pode ser utilizada em um campo de busca, para a substituição de caracteres em um texto, para verificar a existência de um padrão na entrada de dados, como um campo de CPF, formato de e-mail, formato de senha, entre muitas outras opções.
Entre tantos cenários, um dos mais comuns é o de validação de textos a partir de padrões, pois permite que controlemos os dados inseridos pelos usuários, assegurando assim o formato esperado.
As expressões regulares simples
As RegEx são baseadas em dois elementos: um padrão e modificadores. Esses elementos, em conjunto, formam a chamada expressão regular, cuja sintaxe básica é bastante simples: /padrão/modificadores
A expressão /codigo/i, busca o padrão “codigo” sem levar em consideração se as letras são maiúsculas ou minúsculas no texto, por causa do modificador “i”.
A expressão /[abc]/i, busca pelos caracteres “a”, “b” ou “c” sem levar em consideração se são maiúsculos ou não.
A expressão /[^abc]/i, que busca qualquer caractere que não seja “a”, “b” ou “c”.
As expressões /[a-c]/i e /[^a-c]/i, definem uma busca por caracteres na faixa, intervalo, de “a” a “c”.
Outra possibilidade que as expressões regulares oferecem é a utilização de caracteres entre parênteses, que fazem com que seja encontrada qualquer uma das alternativas especificadas nessa expressão.
/(a|b|c)/i tem o mesmo comportamento da expressão /[abc]/i, utilizando o caractere “|” para representar a operação lógica OU, como é comum na programação.
As expressões regulares com metacharacters
Cada um metacaracter define um padrão comum. A expressão como /[\w]/ para encontrarmos uma palavra, e /[\W]/ para buscar por algo que não seja uma palavra — letras maiúsculas indicam a negação do equivalente em minúsculo.
As expressões regulares com quantificadores
Os quantificadores, por sua vez, indicam o número de vezes que os padrões devem ser encontrados nas strings. O “+”, por exemplo, procura por um texto que contenha pelo menos um caractere especificado.
Assim, uma expressão regular como /[a+]/ retorna qualquer string que tenha uma ou mais letras “a”.
Outros quantificadores que merecem destaque são:
“?”, que procura por 0 ou 1 ocorrência;
“{X}”, que procura por uma sequência de “X” (numeral) caracteres iguais;
“$”, que procura pelos caracteres no fim da palavra;
“^”, que procura no início.
Há outros quantificadores que podem ser encontrados facilmente em uma busca na web, mas são bem menos utilizados do que esses destacados.
Problema 1 — Buscar em um texto por RegEx
Nesse problema, vamos buscar buscar pelo menos menos uma ocorrência da letra “j”. Assim, o valor retornado na variável n é 24, indicando o índice da letra “J” na string.
Estamos declarando uma string com um texto de teste, e realizando a operação “search()”. Lembrando que search() retorna o índice da ocorrência encontrada.
No mesmo problema mas com a estratégia de utilizar o método exec() que retorna o primeiro caractere encontrado que satisfaça a expressão regular, estamos criando uma expressão regular, um objeto RegExp, e comparando-a e com a string criada.
Repare que essa operação é justamente o contrário do que fizemos com o método search(), quando comparamos uma string com a expressão regular.
O valor retornado em n, dessa vez, será a string encontrada através da expressão regular, no caso, a letra J, e não a posição em que ela se encontra no texto.
Qual das estratégias utilizar depende do que queremos atingir em nossa aplicação.
Problema 2 — Substituir um texto por RegEx
As strings, em JavaScript, possuem o método replace(), que pode ser utilizado com expressões regulares para substituição de determinadas ocorrências no texto por algum outro texto qualquer.
A ideia básica é que a expressão regular seja empregada para encontrar as ocorrências e, a partir daí, o método se encarrega de substituir os dados de acordo com o que foi definido.
O problema é o uso do método replace() para trocar todas as ocorrências do caractere “j” ou “J” por “I”.
A utilização dos modificadores “i” e “g”, para garantir que não se leve em consideração a diferença entre letras maiúsculas e minúsculas na expressão regular (devido ao “i”), e para fazer com que todas as ocorrências encontradas sejam substituídas, sem parar na primeira delas (modificador “g”).
Problema 3 — Usar Split e Test com RegEx
O método split() é utilizado para separar um texto em várias outras strings, em um array, a partir de um separador. E o método test() da RegExp, verifica a ocorrência de uma expressão regular em uma string, retornando “verdadeiro”, caso encontrada, ou “falso”, caso não o seja.
O método split() se baseia em um separador, o qual define em quais lugares a string será separada e, consequentemente, em quantas partes isso ocorrerá. Esse separador pode ser especificado através de uma expressão regular.
O problema a seguir está separando a string através de uma expressão regular que procura por espaços (\s), tabs (\t) e quebras de linha (\n).
É importante observarmos que a variável n é um array de seis posições, contendo as substrings separadas pelos espaços em branco em str. Quando realizamos a operação alert(n), todas essas substrings são mostradas, separadas por vírgula.
Outra possibilidade é a verificação de ocorrências de uma expressão regular em um determinado texto, o que pode ser feito através do método test(). A variável n conterá o valor true, uma vez que a ocorrência será encontrada no começo da palavra “JavaScript”.
Caso tivéssemos uma expressão regular como /[f]/i, por exemplo, a mesma variável conteria false, uma vez que não há letra “f” na string de exemplo.
Trechos de códigos
Uma script usa o método exec para encontrar uma instância dentro de uma string
let myRe = /d(b+)d/g;
let myArray = myRe.exec('cdbbdbsbz');
console.log(myArray);Retornar todas as ocorrências das letras “a” a “h”, independente de serem maiúsculas ou minúsculas
let str = "Cara, cadê o meu carro?";
let patt1 = /[a-h]/gi;
console.log(patt1);Procurar por ocorrências da letra “o” na string
let str = "Hellooo World! Hello Mundoooooo!";
let patt1 = /o+/g;
let result = str.match(patt1);
console.log(result);Para escrever esse resumo, consultei alguns textos muito interessantes e com mais detalhes sobre expressão regular.
Para conhecer cenários onde utilizar expressões regulares são usados e solucionam problemas de forma elegante, seria interessante a leitura e até mesmo, reproduzir os códigos no repositório
E para ganhar confiança com a formação de expressões regulares tem três ferramentas online que executam e orientam como criar expressões regulares.
Durante os estudos e testes de expressões regulares as consultas dos métodos e outros detalhes eu fiz na documentação oficial do javascript.
Acredito ter conseguido destravar alguns ponto sobre o tema. Agora é consultar essas referências sempre que precisar esclarecer e criar algo com expressões regulares.
Esse artigo ficou mais longo, pois trata-se de um assunto mais complexo que precisamos de mais detalhes e exemplos para compreendermos o que estamos fazendo. Tomara que tenha gostado, aplauda o artigo! Até o próximo artigo e ótimos códigos.
