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

Joe Medley

Chrome 73 wprowadza metodę String.prototype.matchAll(). Działa podobnie do match(), ale zwraca iterator ze wszystkimi dopasowaniami wyrażeń regularnych w globalnym lub przyklejonym wyrażeniu regularnym. Zapewnia to prosty sposób powtarzania dopasowań, zwłaszcza gdy potrzebujesz dostępu do grup przechwytywania.

Co jest nie tak z dopasowaniem funkcji match()?

Krótka odpowiedź to nic, chyba że próbujesz zwrócić globalne dopasowania przy użyciu grup przechwytujących. Oto łamigłówka dla Ciebie. Weźmy 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 go w konsoli i zauważ, że zwraca tablicę zawierającą ciągi znaków 'test1' i 'test2'. Jeśli usunę flagę g z wyrażenia regularnego, otrzymam wszystkie grupy przechwytywania, ale otrzymam tylko pierwsze dopasowanie. Wygląda on następująco:

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

Ten ciąg zawiera drugie możliwe dopasowanie rozpoczynające się od 'test2', ale go nie mam. A teraz czas na łamigłówkę: jak zebrać wszystkie grupy w każdym meczu? W objaśnieniu oferty pakietowej String.prototype.matchAll() podane są 2 możliwe rozwiązania. Nie będę ich opisywać, bo mam nadzieję, że nie będą one potrzebne długo.

String.prototype.matchAll()

Jak będą wyglądać wyjaśnienia w przypadku parametru 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 pamiętać o kilku kwestiach. W odróżnieniu od metody match(), która zwraca tablicę w przypadku wyszukiwania globalnego, matchAll() zwraca iterator, który działa dobrze z pętlami for...of. iterator tworzy tablicę dla każdego dopasowania, w tym grupy przechwytywania z kilkoma dodatkami. Jeśli wydrukujesz te informacje w konsoli, będą one 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 jest tablicą w dokładnie takim samym formacie, jaki zwraca funkcja match() w przypadku nieglobalnych wyrażeń regularnych.

Materiały dodatkowe

Przeznaczone są głównie dla osób, które dopiero zaczynają korzystać z wyrażeń regularnych lub nie mają doświadczenia w tej dziedzinie. Zauważyliśmy, że zarówno funkcje match(), jak i matchAll() (dla każdej iteracji) są tablicami z dodatkowymi właściwościami nazwanymi. Podczas przygotowywania tego artykułu zauważyliśmy, że w przypadku tych usług występują pewne błędy w dokumentacji w MDN (które zostały już naprawione). Oto krótki opis.

index

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

input

Pełny ciąg znaków, wobec którego został uruchomiony element matchAll(). W moim przykładzie jest to 'test1test2'.

groups

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

Podsumowanie

Jeśli coś umknęło Twojej uwadze, daj mi znać w komentarzach poniżej. Więcej informacji o najnowszych zmianach w języku JavaScript znajdziesz w poprzednich aktualizacjach lub w witrynie V8.