6

Historicamente, o JavaScript conta com o método String.prototype.match para realizar, por exemplo, buscas em strings através de um padrão via expressão regular.

No entanto, a partir do ECMAScript 2020, strings também possuem o método String.prototype.matchAll.

  • O que motivou a introdução do matchAll?
  • Quais são as diferenças e, de modo geral, como devo escolher um em relação ao outro?

1 Resposta 1

7

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

String.prototype.match

Quando a regex não tem a flag g, o método String.prototype.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('---sem flag "g"---');
// 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('---com flag "g"---');
// 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).


String.prototype.matchAll

Antes de existir o método String.prototype.matchAll, a única forma de obter as informações adicionais para todas as ocorrências era usando o método RegExp.prototype.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 RegExp.prototype.exec retorna um array contendo o match e as informações adicionais.

Mas com String.prototype.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 String.prototype.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 String.prototype.matchAll, a regex deve obrigatoriamente ter a flag g, caso contrário dará erro (e uma curiosidade é que se você usar RegExp.prototype.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: RegExp.prototype.exec atualiza o lastIndex da regex, então cada chamada passa a procurar a partir desta posição. Mas String.prototype.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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .