"Dê-me um padrão e encontrarei uma agulha no palheiro. Dê-me um regex e encontrarei todas as agulhas, em ordem, com seus números de série."
Uma expressão regular descreve padrões em strings — validar email, extrair telefones, substituir texto. Em JavaScript, regex são objetos usados com métodos de string.
const phone = /\d{3}-\d{4}/;phone.test('Ligue 555-1234 hoje'); // true'555-1234'.match(phone); // ["555-1234"]Neste guia da série 33 Conceitos JS — projeto open source criado por Leonardo Maldonado — você aprende sintaxe, métodos, flags, grupos e padrões do mundo real.
Pré-requisitos: Primitive Types (strings) e Map, Reduce & Filter — processar arrays de matches com HOFs.
// metadados do artigo
{
"tag": "advanced topics",
"readTime": "20 min",
"author": "Vanderlei José Alamino",
"source": "33jsconcepts.com",
"series": "33 Conceitos JS",
"part": {
"current": 32,
"total": 38
}
}Fonte de referência
Conteúdo adaptado a partir do guia original em inglês.
seção
Padrão /\d{3}-\d{4}/ em "Ligue 555-1234 hoje" → \d{3} = "555" ✓ → "-" ✓ → \d{4} = "1234" ✓ Match: "555-1234"| Detetive | Regex | Exemplo |
|---|---|---|
| Nome exato | Literal abc | /hello/ |
| Tipo de pessoa | Classe [aeiou] | vogais |
| Repetição | Quantificador a+ | um ou mais a |
| Posição na fila | Âncora ^ $ | início/fim |
seção
// Literal — padrão estático (compilado no load)const pattern1 = /hello/; // Construtor — padrão dinâmico (runtime)const pattern2 = new RegExp('hello'); function findWord(text, word) { return text.match(new RegExp(word, 'gi'));}Use literal quando o padrão é fixo. Use new RegExp() com input de usuário — lembre de escapar backslashes: new RegExp('\\d+').
Padrões inválidos lançam SyntaxError — veja Error Handling.
seção
| Padrão | Combina |
|---|---|
. | Qualquer char exceto newline |
\d / \D | Dígito / não-dígito |
\w / \W | Palavra / não-palavra |
\s / \S | Whitespace / não-whitespace |
[abc] / [^abc] | Qualquer de / nenhum de |
[a-z] | Range |
/\d{3}-\d{4}/.test('555-1234'); // true'hello_world 123!'.match(/\w+/g); // ["hello_world", "123"]seção
| Quantificador | Significado |
|---|---|
* | 0 ou mais |
+ | 1 ou mais |
? | 0 ou 1 (opcional) |
{n} | Exatamente n |
{n,} | n ou mais |
{n,m} | Entre n e m |
/apple(s)?/.test('apples'); // true'I have 42 and 7'.match(/\d+/g); // ["42", "7"]seção
| Âncora | Posição |
|---|---|
^ | Início (ou linha com m) |
$ | Fim (ou linha com m) |
\b | Borda de palavra |
\B | Não-borda |
/^Hello/.test('Hello World'); // true/\d$/.test('Room 42'); // true/\bcat\b/.test('category'); // false — match parcial\b combina posição, não caractere — evita casar cat dentro de category.
seção
| Método | Retorna | Uso |
|---|---|---|
regex.test(str) | boolean | Validação |
str.match(regex) | array ou null | Encontrar |
str.matchAll(regex) | iterator | Todos + detalhes (g obrigatório) |
str.search(regex) | índice ou -1 | Posição |
str.replace(regex, rep) | string | Substituir |
str.split(regex) | array | Dividir |
regex.exec(str) | match ou null | Detalhes (stateful com g) |
'My numbers: 123, 456'.match(/\d+/g); // ["123", "456"]'hello world'.replace(/o/g, '0'); // "hell0 w0rld"'a, b,c'.split(/\s*,\s*/); // ["a", "b", "c"]match() sem g: primeiro match com índice e grupos. Com g: só strings, todos os matches.
seção
| Flag | Efeito |
|---|---|
g | Global — todos os matches |
i | Case-insensitive |
m | Multiline — ^/$ por linha |
s | DotAll — . inclui newline |
/hello/i.test('HELLO'); // true'abcabc'.match(/a/g); // ["a", "a"]'line1\nline2'.match(/^line\d/gm); // ["line1", "line2"]seção
Parênteses () capturam partes do match:
const m = '(555) 123-4567'.match(/\((\d{3})\) (\d{3}-\d{4})/);m[1]; // "555"m[2]; // "123-4567"Grupos nomeados (ES2018):
const d = '12-25-2024'.match(/(?<month>\d{2})-(?<day>\d{2})-(?<year>\d{4})/);d.groups.year; // "2024"Replace com grupos: 'John Smith'.replace(/(\w+) (\w+)/, '$2, $1') → "Smith, John".
seção
Quantificadores são greedy por padrão — casam o máximo possível. Adicione ? para lazy:
const html = '<div>Hello</div><div>World</div>'; html.match(/<div>.*<\/div>/)[0];// "<div>Hello</div><div>World</div>" — greedy html.match(/<div>.*?<\/div>/)[0];// "<div>Hello</div>" — lazyEntre delimitadores (tags, aspas, brackets), prefira *?, +?.
seção
const email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;const url = /^https?:\/\/[^\s]+$/;const phone = /^(\(\d{3}\)|\d{3})[-.\s]?\d{3}[-.\s]?\d{4}$/;const username = /^[a-zA-Z0-9_]{3,16}$/;Regex é ótimo para pattern matching simples. Validação complexa (email RFC completo) → biblioteca dedicada.
Escape de input dinâmico:
function escapeRegex(s) { return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');}seção
seção
seção
Você avançou na trilha Advanced Topics — terceiro de nove conceitos avançados.
Combine regex com Map, Reduce & Filter para processar listas de matches.
→ Modern JS Syntax — o JavaScript que você realmente usa
Fonte de referência: 33jsconcepts.com/concepts/regular-expressions ⬀
*? entre delimitadores