Skip to main content
7 de 8
adicionou 704 caracteres ao conteúdo
hkotsubo
  • 66,9mil
  • 25
  • 87
  • 170

Uma diferença é que match retorna um array e matchAll retorna um iterador, mas tem vários outros detalhes a se atentar.

Quando a regex não tem a flag g, match retorna um array contendo somente a primeira ocorrência, e mais algumas informações relacionadas (como por exemplo os grupos de captura). Mas quando tem a flag g, o resultado contém somente os matches, sem informações adicionais:

let s = 'a1 b2 c3 d4';

console.log('---match---');
// sem flag g, pega somente a primeira ocorrência, com informações adicionais
let result = s.match(/[a-z](\d)/);
for (let i in result) console.log(`${i}=${result[i]}`);

console.log('---matchAll---');
// com flag g, pega todas as ocorrências, sem informações adicionais
result = s.match(/[a-z](\d)/g);
for (let i in result) console.log(`${i}=${result[i]}`);

A regex é [a-z](\d) (uma letra seguida de um número, sendo que o número está entre parênteses, o que forma um grupo de captura).

Sem a flag g, o array retornado tem:

  • na primeira posição, a primeira ocorrência (a1)
  • nas demais posições, os grupos de captura (no caso, só temos um grupo, contendo o dígito 1)
  • a propriedade index contendo o índice onde o match foi encontrado (a1 está no índice zero da string)
  • a propriedade input contendo uma cópia da string inteira
  • a propriedade groups, que contém somente os grupos nomeados (por isso o grupo que contém o dígito não está ali).

Mas se usarmos a flag g, o array contém somente os trechos que deram match (somente a1, b2, etc), sem as informações adicionais (nada de grupos, index, etc).


Antes de matchAll, a única forma de obter as informações adicionais para todas as ocorrências era usando exec:

let s = 'a1 b2 c3 d4';
let r = /[a-z](\d)/g;
let match;
while (match = r.exec(s)) {
    console.log('----');
    for (let i in match) console.log(`${i}=${match[i]}`);
}

Repare que agora cada chamada de exec retorna um array contendo o match e as informações adicionais.

Mas com matchAll fica um pouco mais simples fazer a mesma coisa:

let s = 'a1 b2 c3 d4';
for (const match of s.matchAll(/[a-z](\d)/g)) {
    console.log('----');
    for (let i in match) console.log(`${i}=${match[i]}`);
}

E como matchAll retorna um iterador, dá para usá-lo com for..of (como no exemplo acima), com spread para criar um array com os resultados ([...s.matchAll(/[a-z](\d)/g)]), etc.


Um detalhe é que com matchAll, a regex deve obrigatoriamente ter a flag g, caso contrário dará erro (e uma curiosidade é que se você usar exec sem a flag g, ele entra em loop infinito, já que exec faz a busca a partir do lastIndex, mas sem a flag g este valor sempre é zero, então neste caso ela sempre vai encontrar um match).

Aliás, este é outro detalhe: exec atualiza o lastIndex da regex, então cada chamada passa a procurar a partir desta posição. Mas matchAll não mexe no lastIndex:

let s = 'a1 b2 c3 d4';
let r = /[a-z](\d)/g;
let match;
while (match = r.exec(s)) {
    console.log(r.lastIndex); // o índice vai sendo atualizado conforme encontra os matches
}

let r2 = /[a-z](\d)/g;
for (const m of s.matchAll(r2)) {
    console.log(r2.lastIndex); // não muda, é sempre zero
}


Por fim, outra diferença entre eles é o suporte dos browsers: String.prototype.match e RegExp.prototype.exec são compatíveis com versões mais antigas (inclusive o IE 4!), enquanto String.prototype.matchAll só foi introduzido em versões mais novas (e não funciona no IE). Consulte as tabelas de compatibilidade aqui, aqui e aqui.

hkotsubo
  • 66,9mil
  • 25
  • 87
  • 170