Padrões e Flags de Regex em JavaScript

Introdução a Padrões e Flags em JavaScript

Expressões regulares (regex) são ferramentas essenciais em JavaScript para busca de padrões e validação de dados. Uma regex é composta de duas partes: um padrão (o que procurar) e flags opcionais (como pesquisar). Este guia abrange como criar uma regex, todos os tokens de padrão e flags, além dos métodos de string/regex que os colocam em prática. Para uma visão mais ampla, consulte o capítulo JavaScript RegExp.

Criando uma Expressão Regular

JavaScript oferece duas formas de criar uma expressão regular.

1. Literal de regex — escrito entre barras, com flags após a barra de fechamento. O motor compila uma vez quando o script é carregado, tornando-o a forma mais rápida e comum:

2. Construtor new RegExp() — recebe o padrão como uma string e as flags como segundo argumento string. Use quando o padrão é construído em tempo de execução (por exemplo, a partir de input do usuário), pois um literal não pode conter variáveis.

Lista de Padrões Comuns

Aqui estão alguns padrões de uso frequente:

• \w: Corresponde a qualquer caractere de palavra (alfanumérico mais underscore). Equivalente a [a-zA-Z0-9_].
• \W: Corresponde a qualquer caractere que não seja de palavra. Equivalente a [^a-zA-Z0-9_].
• \d: Corresponde a qualquer dígito. Equivalente a [0-9].
• \D: Corresponde a qualquer caractere que não seja dígito. Equivalente a [^0-9].
• \s: Corresponde a qualquer espaço em branco (espaços, tabulações, quebras de linha).
• \S: Corresponde a qualquer caractere que não seja espaço em branco. Equivalente a [^\s].
• .: Corresponde a qualquer caractere exceto nova linha (\n).
• ^: Indica a posição no início de uma linha.
• $: Indica a posição no final de uma linha.
• \b: Corresponde a um limite de palavra (posição entre um caractere de palavra e um que não é de palavra).
• \B: Corresponde a uma posição que não é um limite de palavra.
• \t: Corresponde a um caractere de tabulação.
• \n: Corresponde a um caractere de nova linha.
• \r: Corresponde a um caractere de retorno de carro.
• \\: Corresponde a uma barra invertida literal.
• \f: Corresponde a um caractere de avanço de formulário.
• \v: Corresponde a uma tabulação vertical.
• [abc]: Corresponde a qualquer caractere único dentro dos colchetes.
• [^abc]: Corresponde a qualquer caractere único que não esteja dentro dos colchetes.
• a|b: Corresponde a a ou b.
• (abc): Corresponde à sequência exata abc.
• a?: Corresponde a a zero ou uma vez.
• a*: Corresponde a a zero ou mais vezes.
• a+: Corresponde a a uma ou mais vezes.
• a{3}: Corresponde exatamente a 3 ocorrências de a.
• a{3,}: Corresponde a 3 ou mais ocorrências de a.
• a{3,5}: Corresponde de 3 a 5 ocorrências de a.
• (?i): Não suportado em JavaScript. Use a flag i em vez disso.
• (?:...): Grupo de não captura.
• (?=...): Asserção lookahead positiva.
• (?!...): Asserção lookahead negativa.
• (?<=...): Asserção lookbehind positiva.
• (?<!...): Asserção lookbehind negativa.

Entendendo Padrões

O padrão da regex é delimitado por barras (/pattern/flags).

Exemplo: /H.llo/g

• Padrão: H.llo corresponde a qualquer string que começa com 'H', seguida de qualquer caractere único (.), e termina com 'llo'.
• Flag: g indica busca global.
• Quantificador: . corresponde a exatamente um caractere.

Padrões em expressões regulares são usados para definir a string que você está buscando. Esses padrões podem incluir vários caracteres, classes de caracteres e símbolos especiais.

Agora vejamos alguns exemplos:

Exemplo 1:

1. Padrão: \d+ corresponde a um ou mais dígitos (\d+).
2. Flag: g indica uma busca global.
3. Quantificador: + corresponde a uma ou mais ocorrências do elemento anterior (\d).

Exemplo 2:

1. Padrão: \D+ corresponde a um ou mais caracteres que não são dígitos (\D+).
2. Flag: g indica uma busca global.
3. Quantificador: + corresponde a uma ou mais ocorrências do elemento anterior (\D).

Quantificadores

Quantificadores definem quantas instâncias de um caractere, grupo ou classe de caracteres devem estar presentes na entrada para que uma correspondência seja encontrada. Aqui estão alguns quantificadores de uso frequente com exemplos:

• + - Corresponde a uma ou mais ocorrências do elemento anterior.

Este padrão corresponde a sequências de um ou mais dígitos.

• * - Corresponde a zero ou mais ocorrências do elemento anterior.

Este padrão corresponde a sequências de zero ou mais caracteres de palavra.

• ? - Corresponde a zero ou uma ocorrência do elemento anterior.

Este padrão corresponde a 'color' ou 'colour'.

• {n} - Corresponde exatamente a n ocorrências do elemento anterior.

Este padrão corresponde exatamente a três dígitos.

• {n,} - Corresponde a n ou mais ocorrências do elemento anterior.

Este padrão corresponde a sequências de dois ou mais dígitos.

• {n,m} - Corresponde entre n e m ocorrências do elemento anterior.

Este padrão corresponde a sequências de dois a três dígitos.

Flags

Flags são parâmetros opcionais que alteram como o padrão é aplicado. Você pode combiná-las em qualquer ordem (por exemplo /abc/gi). Aqui está a lista completa:

Flag	Nome	Efeito
g	Global	Encontra todas as correspondências, não apenas a primeira.
i	Ignorar maiúsculas/minúsculas	Corresponde independentemente de letras maiúsculas ou minúsculas.
m	Multilinha	^ e $ correspondem ao início/fim de cada linha.
s	DotAll	. também corresponde a caracteres de nova linha.
u	Unicode	Trata o padrão como pontos de código Unicode; habilita \u{...} e \p{...}.
y	Sticky	Corresponde apenas na posição exata de lastIndex.
d	Índices	Adiciona indices (posições de início/fim) aos resultados de correspondência.

As seções abaixo demonstram cada flag individualmente:

• g - Busca global.

Esta flag permite encontrar todas as correspondências na string.

• i - Busca sem distinção de maiúsculas/minúsculas.

Esta flag torna a busca insensível a maiúsculas e minúsculas.

• m - Busca multilinha.

Esta flag permite que ^ e $ correspondam ao início e ao fim de cada linha na string.

• s - Permite que . corresponda a caracteres de nova linha (também conhecido como flag dotAll).

Esta flag permite que o ponto . corresponda também a caracteres de nova linha.

• u - "Unicode"; trata o padrão como uma sequência de pontos de código Unicode.

Esta flag habilita a correspondência completa de Unicode.

• y - "Sticky"; corresponde apenas a partir do índice indicado pela propriedade lastIndex desta expressão regular na string alvo.

Esta flag permite que a busca comece em um índice específico na string. A flag sticky é útil para tokenizadores e parsers que varrem uma string posição por posição — veja Flag Sticky "y", buscando em uma posição para uma análise mais aprofundada.

Testando Padrões: regexp.test()

O método test() verifica se um padrão existe dentro de uma string, retornando true ou false.

Este código verifica a presença de "world" na string.

Substituindo Texto: str.replace()

A função replace() permite modificar strings substituindo partes delas por novo texto.

Este código substitui "morning" por "evening".

Substituindo Todas as Ocorrências: str.replaceAll()

O método replaceAll() substitui todas as ocorrências de um padrão por uma nova string.

Este código substitui cada "a" por "o".

Dividindo Texto: str.split()

O método split() divide uma string em um array de substrings com base em um padrão.

Este código divide a string em cada vírgula.

Buscando Texto: str.match()

O método match() recupera as correspondências de um padrão dentro de uma string, útil para extrair dados específicos.

Este código encontra todos os números no texto.

Percorrendo Correspondências: regexp.exec()

O método exec() retorna uma correspondência por vez. Com a flag g (ou y), a regex lembra sua posição em lastIndex, então chamar exec() em um loop percorre todas as correspondências — e ao contrário de match() com g, cada resultado ainda inclui o índice da correspondência e grupos de captura.

Iterando Correspondências: str.matchAll()

matchAll() é a alternativa moderna e mais limpa a um loop com exec(). Ele retorna um iterador de objetos de correspondência completos (incluindo grupos de captura) e requer a flag g.

Grupos de Captura

Parênteses (...) criam um grupo de captura, expondo parte de uma correspondência para reutilização. Os grupos também podem ser nomeados com (?<name>...) e lidos a partir do object .groups — muito mais legível do que índices numéricos.

Sintaxe de Regex em JavaScript

Expressões regulares usam caracteres especiais para definir padrões. Aqui está um exemplo detalhado usando múltiplos elementos da sintaxe de regex:

Este padrão de regex decompõe uma URL em seus componentes:

• ^(\w+): Corresponde a qualquer caractere de palavra (equivalente a [a-zA-Z0-9_]) no início, representando o protocolo.
• :\/\/: Corresponde ao "://" literalmente.
• ([\w.-]+): Corresponde a um ou mais caracteres de palavra, pontos ou hífens, representando o domínio.
• \/(\S*)$: Corresponde a uma barra seguida de quaisquer caracteres que não sejam espaço em branco até o final, representando o caminho.

Mais Detalhes:

Este código JavaScript verifica se um endereço web se encaixa em um padrão detalhado.

• Configurando o padrão: O padrão é estruturado para capturar diferentes componentes de um endereço web: o protocolo (como "https"), o nome de domínio (como "www.w3docs.com") e o caminho (tudo após o domínio).
• Testando o endereço web: O código testa "https://www.w3docs.com/pathname/?search=test" contra esse padrão.
• Exibindo o resultado: Se o endereço web corresponder, o código exibe as partes que correspondem ao padrão.

Resultado Esperado: A saída é um array com os seguintes elementos:

1. O endereço web completo: "https://www.w3docs.com/pathname/?search=test".
2. O protocolo utilizado: "https".
3. O nome de domínio: "www.w3docs.com".
4. O caminho e a query string: "pathname/?search=test".

Aplicações Práticas de Padrões e Flags

Regex é usado em vários cenários para aprimorar aplicações JavaScript:

Validando Input do Usuário

Regex ajuda a garantir que os inputs do usuário atendam a certos critérios, o que é crucial para a qualidade dos dados e segurança.

Este código verifica se o nome de usuário consiste em 3 a 16 caracteres alfanuméricos ou underscores.

Extraindo Informações

Regex pode extrair informações específicas de grandes textos ou conjuntos de dados com eficiência.

Este código JavaScript extrai uma informação específica de uma string de texto.

• Definindo o texto: O código começa com uma string chamada data que contém detalhes sobre um pedido, incluindo um ID de pedido e uma data.
• Configurando o padrão: Ele usa um padrão (idPattern) para procurar a frase "Order ID:" seguida de uma série de dígitos. Este padrão é projetado para capturar a parte numérica logo após "Order ID:".
• Extraindo o ID do pedido: O código pesquisa na string data uma correspondência com idPattern. Quando encontra uma correspondência, recupera apenas a parte dos dígitos (ignorando o texto "Order ID:"), que representa o ID do pedido.
• Exibindo o resultado: Em seguida, imprime esse ID do pedido no console.

Conclusão

Dominar padrões e flags de regex em JavaScript é fundamental para lidar com manipulação de texto, validação de dados e operações de busca de forma eficaz. Essas ferramentas tornam suas aplicações JavaScript mais robustas, eficientes e amigáveis ao usuário. Para se aprofundar, continue com classes de caracteres, âncoras, quantificadores e grupos de captura.

Prática