Como aprender Expressões Regulares em JavaScript ?

JavaScript 9 de Jan de 2024

*Texto de Paulo Clemente
Desenvolvedor na Rocketseat

O que são Expressões Regulares?

Expressões regulares, conhecidas como regex, são padrões usados para encontrar correspondências de strings dentro de outra string. Elas oferecem uma maneira flexível de pesquisar, manipular texto e validar dados.

Este artigo explora a aplicação prática dessas expressões, com exemplos detalhados para demonstrar sua utilidade e eficácia em diversos cenários.

Como Funcionam as Expressões Regulares em JavaScript

No JavaScript, as expressões regulares são integradas na linguagem, permitindo uma ampla gama de operações de busca e manipulação de strings.

Sintaxe Básica

A sintaxe básica de uma expressão regular em JavaScript é /padrão/modificadores. Por exemplo, /abc/g procura todas as ocorrências da string "abc".

Caracteres e Sequências Especiais

Caracteres especiais como *, +, ?, . têm significados particulares em regex. Por exemplo, . corresponde a qualquer caractere, enquanto * corresponde a zero ou mais ocorrências do caractere anterior.

Usos Comuns das Expressões Regulares

As expressões regulares são amplamente utilizadas em diversas operações, como validação de formulários, busca e substituição em textos, e processamento de dados.

Exemplos Práticos

Vamos explorar exemplos práticos para ilustrar como as expressões regulares podem ser aplicadas.

Validando Emails

Uma expressão regular (regex) para validar endereços de e-mail é um padrão que busca corresponder à estrutura típica de um e-mail. Uma expressão regular simples, mas relativamente eficaz para validar e-mails poderia ser:

^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$

Vamos quebrá-la em partes:

^[a-zA-Z0-9._%+-]+: Esta parte da regex corresponde ao início do e-mail. Ela valida que o e-mail deve começar (^) com uma ou mais (+) ocorrências de caracteres alfanuméricos (a-zA-Z0-9), pontos (.), sublinhados (_), percentuais (%), sinais de mais (+) ou hifens (``).
@: Este caractere é literal e separa o nome do usuário do domínio do e-mail.
[a-zA-Z0-9.-]+: Após o @, esta parte corresponde ao domínio do e-mail. Ela permite uma ou mais ocorrências de caracteres alfanuméricos, pontos ou hifens.
\\.[a-zA-Z]{2,}$: Finalmente, esta parte corresponde ao TLD (top-level domain) do e-mail. Ela espera um ponto (\\.) seguido por pelo menos dois caracteres alfabéticos ([a-zA-Z]{2,}). O $ no final da regex indica que o TLD deve ser no final do e-mail.

Esta expressão regular abrange a maioria dos endereços de e-mail usuais, mas vale ressaltar que, devido à natureza complexa e variada dos endereços de e-mail, pode haver casos extremamente raros ou específicos que ela não consiga validar.

Extração de Números de Texto

Para extrair números de uma string:

const numRegex = \d{1,3}(?:[.,]\d{3})*(?:[.,]\d+)?

const nums = 'Exemplo 1234'.match(numRegex);.

Dicas e Melhores Práticas

As expressões regulares são poderosas, mas devem ser usadas com cuidado para evitar complexidades desnecessárias e problemas de desempenho.

Evitar Erros Comuns

Teste suas expressões regulares extensivamente para garantir que elas funcionem como esperado em todos os casos de uso.

Otimizando o Desempenho

Considere a complexidade das suas regex. Expressões muito complexas podem ser lentas e difíceis de manter.

Ferramentas e Recursos Úteis

Use ferramentas online como Regex101 ou Regexr para construir e testar suas expressões regulares.

Desafios e Soluções Frequentes

Ao lidar com casos mais complexos, divida o problema e construa a regex passo a passo.

Integração com Outras Funcionalidades do JavaScript

As expressões regulares podem ser combinadas com outras funcionalidades do JavaScript para criar soluções poderosas e eficientes.

Expressões Regulares e Array Methods

Por exemplo, você pode usar regex com .filter() para filtrar elementos de um array com base em um padrão de texto.

// Array de exemplo com strings mistas
const arrayExemplo = ['hello', '123', 'teste123', 'abc', '456def'];

// Expressão regular para identificar strings contendo números
const regex = /\d+/;

// Usando filter com a regex para filtrar elementos que contêm números
const elementosComNumeros = arrayExemplo.filter(elemento => regex.test(elemento));

console.log(elementosComNumeros); // Saída: ['123', 'teste123', '456def']

As expressões regulares estão em constante evolução, com novas funcionalidades sendo adicionadas nas atualizações do ECMAScript.

As expressões regulares em JavaScript são uma ferramenta indispensável para desenvolvedores, oferecendo um método flexível e poderoso para manipulação de texto e validação de dados.

Perguntas que você pode ter:

Como posso aprender expressões regulares em JavaScript?