Lepsze wyniki dopasowania za pomocą funkcji String.prototype.matchAll()

Joe Medley

Chrome 73 wprowadza metodę String.prototype.matchAll(). Działa podobnie do funkcji match(), ale zwraca iterator ze wszystkimi dopasowaniami wyrażenia regularnego w wyrażeniu globalnym lub przyklejonym. To prosty sposób na iterowanie po dopasowaniach, zwłaszcza gdy potrzebujesz dostępu do grup przechwytywania.

Co jest nie tak z match()?

Krótko mówiąc, nic, chyba że próbujesz zwrócić dopasowania globalne za pomocą grup przechwytywania. Oto zagadka programistyczna. Weź pod uwagę ten kod:

const regex = /t(e)(st(\d?))/g;
const string = 'test1test2';
const results = string.match(regex);
console.log(results);
// → ['test1', 'test2']

Uruchom to w konsoli i zwróć uwagę, że zwraca tablicę zawierającą ciągi znaków 'test1' i 'test2'. Jeśli usuniesz flagę g z wyrażenia regularnego, otrzymasz wszystkie grupy przechwytywania, ale tylko pierwszy dopasowanie. Wygląda on następująco:

['test1', 'e', 'st1', '2', index: 0, input: 'test1test2', groups: undefined]

Ten ciąg znaków zawiera drugie możliwe dopasowanie zaczynające się od 'test2', ale nie mam go. Oto zagadka: jak uzyskać wszystkie grupy przechwytywania dla każdego dopasowania? W artykule z omówieniem propozycji funkcji String.prototype.matchAll() podano 2 możliwe podejścia. Nie będę ich opisywać, ponieważ mam nadzieję, że już niedługo ich nie będziesz potrzebować.

String.prototype.matchAll()

Jak wyglądają przykłady wyjaśnień w przypadku matchAll()? Zobacz.

const regex = /t(e)(st(\d?))/g;
const string = 'test1test2';
const matches = string.matchAll(regex);
for (const match of matches) {
  console.log(match);
}

Należy jednak pamiętać o kilku kwestiach. W odróżnieniu od funkcji match(), która zwraca tablicę w przypadku wyszukiwania globalnego, funkcja matchAll() zwraca iterator, który doskonale współpracuje z pętlami for...of. Iterator zwraca tablicę dla każdego dopasowania, w tym grup uchwytnych z kilkoma dodatkami. Jeśli wydrukujesz te dane na konsoli, będą wyglądać tak:

['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', groups: undefined]
['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', groups: undefined]

Możesz zauważyć, że wartość każdego dopasowania to tablica w tym samym formacie, co zwracana przez funkcję match() w przypadku nieglobalnych wyrażeń regularnych.

Materiał dodatkowy

Ten artykuł jest przeznaczony głównie dla osób, które dopiero zaczynają korzystać z wyrażeń regularnych lub nie są w tym doświadczone. Zauważysz pewnie, że wyniki funkcji match() i matchAll() (dla każdej iteracji) to tablice z dodatkowymi właściwościami o nazwach. Podczas przygotowywania tego artykułu zauważyłem, że te właściwości mają pewne braki w dokumentacji na stronie MDN (które już naprawiłem). Oto krótki opis.

index

Indeks pierwszego wyniku w pierwotnym ciągu znaków. W powyższym przykładzie element test2 zaczyna się w pozycji 5, więc element index ma wartość 5.

input

Pełny ciąg znaków, na podstawie którego przeprowadzono test matchAll(). W moim przykładzie było to 'test1test2'.

groups

Zawiera wyniki wszystkich nazwanych grup uchwytywania określonych w wyrażeniu regularnym.

Podsumowanie

Jeśli pominęliśmy coś ważnego, daj nam znać w komentarzach poniżej. Więcej informacji o ostatnich zmianach w JavaScript znajdziesz w poprzednich aktualizacjach lub na stronie V8.