JavaScript regex para testar, substituir e extrair strings

JavaScript regex compara texto com padrões para validação, extração e substituição. Sempre que a entrada segue um formato previsível, como datas, IDs e códigos, uma expressão regular pode testar ou extrair as partes que importam. Grupos de captura entre parênteses isolam substrings correspondentes, então um único padrão retorna dados estruturados sem dividir a string manualmente.

Exemplo de JavaScript Regex para extração de padrão

Saída:

Tem data: true
Extraído: 2024/03/15
Substituído: Pedido #A-123 enviado em 2024/03/15

Como este exemplo funciona

1. /(\d{4})-(\d{2})-(\d{2})/ define um literal regex que corresponde a uma data no estilo ISO. \d{4} corresponde a exatamente quatro dígitos; parênteses criam grupos de captura para ano, mês e dia.
2. padraoData.test(texto) retorna true se o padrão corresponder em qualquer ponto da string, sem retornar detalhes da correspondência.
3. texto.match(padraoData) retorna um array: a correspondência completa no índice 0, seguida por cada grupo de captura. Se não houver correspondência, retorna null, então faça uma verificação antes da desestruturação ao analisar entrada de usuário.
4. texto.replace(padraoData, "$1/$2/$3") substitui a substring correspondente. $1, $2 e $3 inserem os grupos de captura (ano, mês, dia).

O que é uma expressão regular em JavaScript?

Uma expressão regular em JavaScript é um objeto RegExp usado para corresponder combinações de caracteres em strings. Crie expressões regulares em JavaScript com um literal (/padrao/flags) ou com o construtor RegExp (new RegExp("padrao", "flags")). O mecanismo analisa da esquerda para a direita e retorna a primeira correspondência, a menos que a flag global (g) esteja definida.

Erros comuns com JavaScript regex

Usar regex global com test ou exec.

const re = /\d+/g;
console.log(re.test("abc 123")); // true
console.log(re.test("abc 123")); // false (lastIndex avançou)
re.lastIndex = 0;
console.log(re.test("abc 123")); // true

Com g ou y, test/exec têm estado por meio de lastIndex. Reinicie esse valor ou evite g em verificações booleanas.

Esquecer o escape duplo em new RegExp().

new RegExp("\d+");  // o padrão é "d+"
new RegExp("\\d+"); // um ou mais dígitos

Em um literal de string, \\ produz uma única barra invertida, então o mecanismo regex recebe \d em vez de d.

Literal regex vs construtor RegExp

Use um literal para padrões estáticos. Use o construtor quando o padrão incluir valores dinâmicos, mas escape a entrada do usuário primeiro para evitar injeção de regex e metacaracteres acidentais.

const escaparRegExp = (valor) => valor.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
const re = new RegExp(escaparRegExp("a+b?"), "i");

Mais exemplos

Substitua todas as ocorrências com replaceAll:

const mascarado = "cartão 4111-1111-1111-1111".replaceAll(/\d{4}/g, "****");
console.log(mascarado); // "cartão ****-****-****-****"

replaceAll exige a flag g quando o argumento de busca é uma regex; omitir g gera um TypeError.

Extraia todas as correspondências com matchAll:

const tags = [...("#js #regex #es2022".matchAll(/#(\w+)/g))];
console.log(tags.map(m => m[1])); // ["js", "regex", "es2022"]

matchAll retorna um iterador de arrays de correspondência, e cada um inclui grupos de captura, então espalhar em um array dá acesso completo a todos os resultados.

FAQ

Como testar uma regex em JavaScript?

Chame regex.test(string) para um resultado booleano, ou string.match(regex) para obter detalhes da correspondência. Para várias correspondências, use string.matchAll(regex) com a flag g, que retorna um iterador com todos os arrays de correspondência, incluindo grupos de captura.

O JavaScript oferece suporte a lookbehind?

Sim. Lookbehind positivo (?<=...) e lookbehind negativo (?<!...) funcionam na maioria dos mecanismos JavaScript modernos, mas navegadores antigos e alguns runtimes embarcados podem gerar erro de sintaxe.

Quando usar new RegExp() em vez de um literal?

Use o construtor RegExp quando o padrão não for conhecido no momento da escrita, como ao corresponder termos de busca fornecidos pelo usuário. Em qualquer outro caso, prefira um literal: ele evita escape duplo, e o mecanismo pode relatar erros de sintaxe no parsing, não em runtime.