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.