Guia básico de Expressões Regulares em JavaScript

Se você utiliza JavaScript e está interessado em conhecer novas ferramentas que o auxiliem durante a utilização desta linguagem, então este artigo é para você!

Ao longo da leitura, você entenderá conceitos fundamentais sobre as Expressões Regulares, que são importantes ferramentas que já vem disponíveis para utilização por padrão na linguagem JavaScript.

O que são as Expressões Regulares?

Basicamente, as expressões regulares são ferramentas que nos auxiliam a capturar textos que seguem determinados padrões.

Com elas, é possível detectar, por exemplo, a presença de emails válidos em um formulário, capturar strings específicas em longos textos, validar longas listas de domínios, CPFs, etc. As aplicações das expressões regulares são incontáveis!

Começando o aprendizado!

Estrutura básica de uma Regex em JavaScript

Em JavaScript, as expressões regulares podem ser definidas por meio da utilização de duas barras “/”.

Tudo o que estiver entre essas duas barras será o padrão que procuramos identificar com a expressão regular.

/.../

Primeiro exemplo

Vamos começar com um exemplo bem simples. Suponha que precisamos encontrar a primeira letra “a” de uma string.

Como esperado, a RegExp que precisaríamos seria algo como:

/a/

Operador “Ou”

Em alguns momentos, você pode desejar capturar mais de um item com uma única Regex.

Para detectar a presença de um item OU outro, utilizamos as barras verticais “|”, também chamadas de pipes.

Tomando como base o primeiro exemplo, você poderia desejar capturar a letra “a” OU a letra “b”. Nesse caso, precisaríamos de algo assim:

/a|b/

Essa expressão regular iria capturar a primeira letra “a” ou a primeira letra “b” que encontrasse em uma determinada string.

Mas e o operador “E”?

O operador “E” está implícito quando você coloca dois itens lado a lado em uma RegExp. Caso você quisesse capturar a letra “a” E a letra “b”, precisaria de algo como:

/ab/

Essa expressão regular iria capturar o primeiro conjunto “ab” que encontrasse.

Início do texto (^) e fim do texto ($)

Imagine que você precisa verificar se determinada string se inicia com a letra “a” e termina com a letra “b”.

Para detectar se ela se inicia com a letra “a”, devemos utilizar o símbolo ^ (que representa o início do texto)

/^a/

E, para representar o fim do texto e detectar se a string termina com a letra “b”, utilizamos o símbolo $ (cifrão)

/^ab$/

Podemos ainda utilizar o símbolo . para representar que pode haver qualquer caractere entre as letras “a” e “b”

/^a.b$/

O símbolo . (ponto) representa qualquer caractere, exceto o caractere de “nova linha”.

Por fim, podemos dizer que esse “caractere” entre as letras “a” e “b” pode aparecer zero ou mais vezes utilizando o símbolo *

/^a.*b$/

O quantificador * (asterisco) é um quantificador que detecta o caractere anterior a ele na expressão regular zero ou mais vezes.

Avançando mais um pouco…

Com certeza você não vai desejar sempre capturar a primeira ocorrência de alguma coisa. Talvez você precise identificar TODAS as letras “a” de um texto em algum momento.

Em outra situação, talvez você não tivesse um grande texto, e sim uma grande lista, e talvez um outro tipo de análise fosse necessário.

Além disso, começam a surgir outras necessidades. Usando a regex /a/ você só consegue identificar a letra “a” minúscula. Como faríamos para ignorar se a letra é maiúscula ou minúscula?

Podemos resolver todos esses problemas com as flags!

Flags

Utilizando as flags, podemos alterar o comportamento de nossas expressões regulares. Basta adicioná-las após a última barra da expressão e veremos a mágica acontecer.

Isso parece muito genérico, não é? Vamos analisar as flags mais comuns separadamente para entender melhor o comportamento delas de forma mais específica.

• Global (g)

Adicionando a flag g (global), podemos fazer com que as expressões regulares capturem mais de uma ocorrência de determinado item.

Retornando ao exemplo anterior, para capturar todas as letras “a” de uma string, você precisaria de algo como:

/a/g

• Multiline (m)

Imagine que você possui uma string cheia de palavras, uma em cada linha:

const stringQualquer = `
abelha
banana
alface
beterraba
alegria
`;

E que, para capturar as palavras que começam e terminam com a letra “a”, você utiliza a seguinte expressão regular:

/^a.*a$/g

Você não conseguiria capturar as palavras que deseja, pois os símbolos ^ e $ consideram o início e fim exatos da string, e não o início e fim de cada linha.

const stringQualquer = `        <- Início exato
abelha
banana
alface
beterraba
alegria
`;                              < - Fim exato

Porém, é possível solucionar isso utilizando a flag m (multiline), que altera o comportamento de ^ e $, fazendo com que os símbolos considerem o início do texto e o fim do texto como o início e fim de cada linha.

/^a.*a$/gm

Logo, a análise passaria a ser algo como:

                      const stringQualquer = `
Início da linha ->    abelha                   <- Fim
Início da linha ->    banana                   <- Fim
Início da linha ->    alface                   <- Fim
Início da linha ->    beterraba                <- Fim
Início da linha ->    alegria                  <- Fim
                      `;

• Insensitive (i)

Por último e não menos importante, temos a flag i (insensitive), que altera o comportamento das expressões regulares para que o case das strings seja ignorado.

Isso significa que a RegExp passará a ignorar se os caracteres são maiúsculos ou minúsculos, tratando todos igualmente.

A seguinte RegExp, por exemplo, captura apenas a palavra “abelha” (nessa forma exata, com todas as letras minúsculas):

/abelha/g

Já esta outra RegExp (com a flag insensitive), pode capturar “Abelha”, “ABELHA”, “aBeLhA”, etc.

/abelha/gi

Ranges

É possível utilizar intervalos de caracteres nas expressões regulares, que podem ser facilmente definidos utilizando os colchetes [ ].

Nos ranges, os caracteres que vem seguidos serão interpretados como condicionais com o operador OU.

[ab] -> captura o caractere "a" OU o caractere "b"

Porém você também pode definir grandes intervalos de caracteres utilizando o travessão.

[a-z] -> captura um dos caracteres de "a" a "z"
[0-9] -> captura um dos números de 0 a 9

Para criar uma expressão regular que capture um caractere de “a” a “k” e um número de 2 a 5, poderíamos utilizar:

/[a-k][2-5]/g

Teste e use suas expressões em JavaScript

Agora que você já sabe utilizar de forma básica as expressões regulares, chegou a hora de utilizá-las no código.

Para isso, veremos a seguir algumas funções JavaScript que permitem a captura e manipulação de trechos de caracteres por meio das RegExps.

Função test()

Por meio da função test é possível identificar correspondências entre expressões regulares e o conteúdo de uma determinada string.

Vamos supor, por exemplo, que você precisa identificar a presença da palavra “javascript” em um grande texto de uma string.

Primeiramente, declaramos uma variável contendo uma expressão regular:

const regExp = /javascript/g

Agora, utilizamos essa variável para chamar a função test, passando a string como parâmetro. A função retornará true caso encontre alguma correspondência entre a expressão e a string.

const exists = regExp.test('Esta é uma grande string que contém a palavra javascript');
console.log(exists); // true

Caso a expressão regular não encontre nada na string que se pareça com sua estrutura, ela retorna false.

const exists = regExp.test('Esta é uma string');
console.log(exists); // false

A função test recebe como parâmetro a string a ser analisada, retornando true caso a string possua determinado trecho que atende à estrutura da expressão regular. Caso contrário, retorna false.

Função exec()

Assim como a função test, a função exec também precisa que você declare uma variável com um objeto de expressão regular para ser utilizada:

const regExp = /javascript/g

A diferença está em seu retorno:

A função exec recebe como parâmetro a string a ser analisada, retornando null caso não encontre nenhuma correspondência entre a RegExp e a string e um array de informações caso a string possua algum trecho que atenda à estrutura da expressão regular.

O array de informações que pode ser retornado contém uma série de dados, dentre eles a string completa de caracteres encontrados e o índice (base 0) do valor encontrado na string. Veja a documentação disponibilizada pelo site MDN Web Docs por meio deste link e obtenha mais detalhes sobre todos os valores que podem ser retornados.

Função match()

Ao contrário das funções anteriores, a função match deve ser invocada a partir da string que será analisada, recebendo como parâmetro a expressão regular.

const str = "String Qualquer";
console.log(str.match(/regexqualquer/);

A função match, invocada a partir da string a ser analisada, recebe como parâmetro a expressão regular que será utilizada para a análise.

Se a flag g for usada na RegExp, ela retorna todas as correspondências encontradas.

Se a flag g não for usada, ela retorna a primeira correspondência encontrada e algumas outras informações, como o índice do resultado, um objeto de grupos de captura e a string analisada.

Caso não encontre nenhuma correspondência, a função retorna null.

Função replace()

A função replace, que é invocada a partir das strings assim como a função match, tem o poder de substituir determinados trechos de uma string.

Ela analisa a string a partir da qual é chamada e pode buscar por um trecho de caracteres específico ou por um grupo de caracteres que atenda uma expressão regular.

O método replace é chamado a partir da string que terá itens substituídos e pode buscar por uma substring ou por trechos que atendam a uma determinada expressão regular.

Ela recebe como primeiro parâmetro a substring ou RegExp a partir da qual a string será analisada e como segundo parâmetro o trecho de caracteres que substituirá os itens encontrados.

Ela retorna a string com os itens substituídos (caso nada tenha sido encontrado durante a análise, retorna a string original).

Veja os exemplos a seguir:

Exemplo com primeiro parâmetro sendo string

const string1 = 'aaa';
const results = string1.replace('a', 'b');
console.log(results); // 'baa'

Exemplo com primeiro parâmetro sendo RegExp

const string2 = 'aaa'
const results = string2.replace(/a/g, 'b');
console.log(results); // 'bbb'

Continue seus estudos!

As expressões regulares são um assunto muito extenso, e você pode aprender mais se aprofundando em alguns outros tópicos, dentre eles:

• Quantificadores
• Classes de caracteres
• Grupos
• Retrovisores
• Comportamento greedy e comportamento lazy das RegExps
• Assertions

Finalizando…

Gostou do artigo? Compartilhe com amigos e pessoas que gostariam de aprender mais sobre a linguagem JavaScript e sobre as expressões regulares!

Encontrou algum erro, tem alguma sugestão ou gostaria de outro artigo sobre o assunto? Deixe um comentário!

Até a próxima!