Bessere Übereinstimmungen mit String.prototype.matchAll()

Joe Medley

In Chrome 73 wird die Methode String.prototype.matchAll() eingeführt. Sie funktioniert ähnlich wie match(), gibt aber einen Iterator mit allen Übereinstimmungen mit einem globalen oder anhaftenden regulären Ausdruck zurück. Dies bietet eine einfache Möglichkeit, über Übereinstimmungen zu iterieren, insbesondere wenn Sie Zugriff auf Capture-Gruppen benötigen.

Was stimmt mit match() nicht?

Kurz gesagt: nichts, es sei denn, Sie möchten globale Übereinstimmungen mit Erfassungsgruppen zurückgeben. Hier ist ein Programmierrätsel für Sie. Betrachten wir den folgenden Code:

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

Wenn Sie diesen Befehl in einer Konsole ausführen, wird ein Array mit den Strings 'test1' und 'test2' zurückgegeben. Wenn ich das g-Flag aus dem regulären Ausdruck entferne, werden alle Erfassungsgruppen zurückgegeben, aber nur die erste Übereinstimmung. Sie sieht so aus:

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

Dieser String enthält eine zweite mögliche Übereinstimmung, die mit 'test2' beginnt, die ich aber nicht habe. Jetzt kommt das Rätsel: Wie erhalte ich alle Erfassungsgruppen für jede Übereinstimmung? In der Erläuterung zum Vorschlag für String.prototype.matchAll() werden zwei mögliche Ansätze gezeigt. Ich werde sie nicht beschreiben, da Sie sie hoffentlich nicht mehr lange benötigen werden.

String.prototype.matchAll()

Wie würden die Beispielerklärungen mit matchAll() aussehen? Schauen Sie nach.

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

Dabei sind einige Dinge zu beachten. Im Gegensatz zu match(), das bei einer globalen Suche ein Array zurückgibt, gibt matchAll() einen Iterator zurück, der hervorragend mit for...of-Schleifen funktioniert. Der Iterator generiert für jede Übereinstimmung ein Array, einschließlich der Erfassungsgruppen mit einigen Extras. Wenn Sie diese in die Konsole ausgeben, sehen sie so aus:

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

Der Wert für jede Übereinstimmung ist ein Array im genau gleichen Format wie das, das von match() für nicht globale reguläre Ausdrücke zurückgegeben wird.

Bonus material

Dieser Artikel richtet sich vor allem an Nutzer, die noch keine Erfahrung mit regulären Ausdrücken haben oder sich nicht mit ihnen auskennen. Sie haben vielleicht bemerkt, dass die Ergebnisse von match() und matchAll() (für jede Iteration) Arrays mit einigen zusätzlichen benannten Properties sind. Bei der Vorbereitung dieses Artikels habe ich festgestellt, dass die Dokumentation dieser Eigenschaften auf MDN einige Mängel aufweist. Diese habe ich behoben. Hier eine kurze Beschreibung:

index

Der Index des ersten Ergebnisses im ursprünglichen String. Im obigen Beispiel beginnt test2 an Position 5, daher hat index den Wert 5.

input

Der vollständige String, auf den matchAll() angewendet wurde. In meinem Beispiel war das 'test1test2'.

groups

Enthält die Ergebnisse aller benannten Erfassungsgruppen, die in Ihrem regulären Ausdruck angegeben sind.

Fazit

Wenn ich etwas vergessen habe, kannst du es mir gern unten in den Kommentaren mitteilen. Weitere Informationen zu den aktuellen Änderungen an JavaScript finden Sie in früheren Updates oder auf der V8-Website.