JavaScript Regex (OR)
As expressões regulares do JavaScript oferecem recursos poderosos para correspondência de padrões em strings. Um componente-chave é o operador OR.
As expressões regulares do JavaScript (RegEx) oferecem recursos poderosos para correspondência de padrões em strings. Um dos principais componentes do RegEx é o operador OR, representado pela barra vertical (|). Esse operador permite incluir múltiplos padrões em uma única expressão regular, possibilitando buscas e manipulações de strings versáteis e eficientes. Neste guia completo, exploraremos o uso do operador OR no RegEx do JavaScript, com exemplos práticos para aprimorar sua compreensão.
Entendendo o Operador OR (|) no RegEx
O operador OR nas expressões regulares permite especificar múltiplas alternativas para uma correspondência. É especialmente útil quando você precisa combinar um padrão dentre vários possíveis.
Uso Básico do Operador OR
A sintaxe do operador OR é simples. Basta colocar o símbolo | entre os padrões que você deseja corresponder.
Neste exemplo, o padrão /cat|dog/ corresponde tanto a "cat" quanto a "dog" nas strings fornecidas.
Precedência da Alternação: Por que Você Quase Sempre Precisa de Parênteses
Esta é a maior armadilha com |. O operador OR tem precedência muito baixa — menor do que qualquer outro operador de regex. Isso significa que o | divide a expressão inteira em alternativas, até os delimitadores circundantes ou os parênteses de agrupamento mais próximos.
Portanto, /cat|concatenate/ não significa "cat opcionalmente seguido de concatenate". Significa: corresponder ao padrão completo cat, OU corresponder ao padrão completo concatenate. Da mesma forma, /^cat|dog$/ é lido como (^cat)|(dog$) — "começa com cat" OU "termina com dog" — o que raramente é o que as pessoas pretendem.
Para limitar a alternação a apenas parte de um padrão, coloque as alternativas entre parênteses.
Ancorar tudo com ^ e $ é um acompanhamento comum à alternação agrupada — veja Âncoras: início e fim de string.
A Ordem Importa: O Primeiro Correspondente Vence
O motor de regex testa as alternativas da esquerda para a direita e para na primeira que obtiver sucesso na posição atual. Ele não procura a correspondência mais longa — apenas a primeira. Isso significa que a ordem das suas alternativas é significativa.
Regra geral: liste as alternativas mais longas ou mais específicas antes das mais curtas com as quais compartilham um prefixo.
Agrupamento com Parênteses
Os parênteses () agrupam partes de uma expressão regular para que quantificadores e outros operadores se apliquem ao grupo inteiro, e também capturam o texto correspondido para uso posterior (veja Grupos de Captura). Isso é essencial quando você quer que o OR cubra apenas um fragmento de um padrão maior.
Aqui, o quantificador s? se aplica ao grupo inteiro (cat|dog), portanto o padrão corresponde a "cat", "cats", "dog" e "dogs". O quantificador ? e outros são abordados em Quantificadores +, * e {n}.
Exemplos Práticos
Correspondência de Diferentes Extensões de Arquivo
Suponha que você precise validar nomes de arquivo com diferentes extensões, como .jpg, .png ou .gif.
Neste exemplo, o padrão /\.(jpg|png|gif)$/ corresponde a nomes de arquivo terminados em ".jpg", ".png" ou ".gif". O \. inicial corresponde a um ponto literal, o grupo (jpg|png|gif) é a alternação, e $ ancora a correspondência ao final da string.
Validação de Números de Telefone
Considere um cenário em que você precisa validar diferentes formatos de números de telefone.
Lendo o padrão /(\+\d{1,2}\s?)?(\(\d{3}\)|\d{3})[-.\s]?\d{3}[-.\s]?\d{4}/ parte por parte:
(\+\d{1,2}\s?)?— um código de país opcional: um+, um ou dois dígitos e, em seguida, um espaço opcional. O?final torna o grupo inteiro opcional.(\(\d{3}\)|\d{3})— a alternação: três dígitos entre parênteses(123)ou três dígitos sem parênteses123. Note que\(e\)são parênteses literais, enquanto os()externos sem escape fazem o agrupamento.[-.\s]?— um separador opcional: hífen, ponto ou espaço em branco. (Estas são classes de caracteres.)\d{3}— três dígitos.[-.\s]?— outro separador opcional.\d{4}— os quatro dígitos finais.
Alternação Simples vs. Subpadrões Opcionais
Uma confusão comum é tratar color|colour como se o u fosse opcional. Não é — trata-se de alternação simples entre duas palavras completas.
Quando as alternativas diferem por apenas um caractere (ou uma sequência curta), a abordagem idiomática e mais eficiente é um subpadrão opcional quantificado, não a alternação. O quantificador ? torna o u precedente opcional:
Use a alternação (|) quando as escolhas são strings genuinamente distintas (cat|dog); use ? quando uma forma é a outra com um fragmento opcional (colou?r).
Combinando o Operador OR com Outros Metacaracteres
O poder do operador OR é amplificado quando combinado com outros metacaracteres de expressão regular, como * (zero ou mais), + (um ou mais), ? (zero ou um) e {} (exatamente n vezes).
Exemplo com Quantificadores
O padrão /\b(cat|dog)s?\b/ corresponde a "cat", "cats", "dog" e "dogs" como palavras inteiras, usando o metacaractere de limite de palavra \b.
Exemplo Avançado com Múltiplas Condições
Os dois formatos de data abaixo — D-M-AAAA e AAAA-M-D — usam os mesmos separadores e quantidades de dígitos, portanto o regex não consegue distinguir a ordem dia-mês apenas pela forma. O que ele pode distinguir é onde o ano de quatro dígitos está: no final para um formato, no início para o outro.
Este padrão corresponde a datas nos formatos dia-primeiro (12-31-2023, 31-12-2023) e ano-primeiro (2023-12-31). Note que 31-12-2023 sim corresponde — é uma string \d{1,2}-\d{1,2}-\d{4} perfeitamente válida, portanto a primeira alternativa a aceita.
Um detalhe sutil, mas importante: como | tem a menor precedência, o ^ se liga apenas à primeira alternativa e $ apenas à segunda. Para ancorar ambas as alternativas, agrupe-as:
Usando Alternação com match(), matchAll() e replace()
test() informa apenas se um padrão correspondeu. Para extrair ou transformar o texto correspondido, combine a alternação com grupos de captura e os métodos de string match(), matchAll() e replace().
match() (sem o sinalizador g) retorna a primeira correspondência mais cada grupo capturado:
Com o sinalizador g, match() retorna todas as correspondências como um array, e matchAll() fornece um iterador de objetos de correspondência completos:
replace() permite reescrever cada alternativa. Aqui normalizamos grafias britânicas e americanas para uma única forma:
Conclusão
Dominar o operador OR nas expressões regulares do JavaScript abre um amplo leque de possibilidades para correspondência de padrões eficiente e versátil. Ao entender como usar o operador OR em combinação com outros recursos do RegEx, você pode criar padrões poderosos e flexíveis para lidar com buscas e manipulações de strings complexas.
Prática
Antes de responder, raciocine sobre cada opção. Lembre-se de que todas as opções abaixo são sintaxe de regex válida — a questão é o que cada uma realmente corresponde:
/cat|dog/— alternação simples usando|; corresponde a "cat" ou "dog" em qualquer posição da string. Correto./(cat|dog)/— mesma alternação envolta em um grupo de captura; o grupo não muda o que é correspondido, apenas faz com que a correspondência seja capturada. Correto./cat|dogs/— válido, mas a segunda alternativa é "dogs" (coms), portanto nunca corresponde à palavra isolada "dog". Incorreto para esta questão./cat||dog/— a alternativa vazia entre os dois símbolos|corresponde a uma string vazia, portanto isso corresponde a quase qualquer coisa, incluindo strings que não contêm nenhuma das palavras. Incorreto./(cat|dog)s/— osobrigatório após o grupo significa que corresponde a "cats" ou "dogs", não a "cat" ou "dog". Incorreto./cat|do g/— o espaço é um caractere literal, portanto a segunda alternativa é "do g" (com espaço), não "dog". Incorreto.