JavaScript Regex-Muster und Flags

Einführung in JavaScript-Muster und Flags

Reguläre Ausdrücke (Regex) sind unverzichtbare Werkzeuge in JavaScript für die Mustersuche und Datenvalidierung. Ein Regex besteht aus zwei Teilen: einem Muster (wonach gesucht wird) und optionalen Flags (wie gesucht wird). Dieser Leitfaden erklärt, wie man einen Regex erstellt, welche Muster-Token und Flags es gibt, und welche String- bzw. Regex-Methoden dabei eingesetzt werden. Einen umfassenderen Überblick bietet das Kapitel JavaScript RegExp.

Erstellen eines regulären Ausdrucks

JavaScript bietet zwei Möglichkeiten, einen regulären Ausdruck zu erstellen.

1. Regex-Literal — wird zwischen Schrägstrichen geschrieben, mit Flags nach dem schließenden Schrägstrich. Die Engine kompiliert ihn einmalig beim Laden des Skripts, was diese Form zur schnellsten und gebräuchlichsten macht:

2. new RegExp()-Konstruktor — nimmt das Muster als string und die Flags als zweites string-Argument. Diese Form wird verwendet, wenn das Muster zur Laufzeit erstellt wird (z. B. aus Benutzereingaben), da ein Literal keine Variablen enthalten kann.

Liste häufig verwendeter Muster

Hier sind einige häufig verwendete Muster:

• \w: Entspricht jedem Wortzeichen (alphanumerisches Zeichen plus Unterstrich). Entspricht [a-zA-Z0-9_].
• \W: Entspricht jedem Nicht-Wortzeichen. Entspricht [^a-zA-Z0-9_].
• \d: Entspricht jedem Ziffernzeichen. Entspricht [0-9].
• \D: Entspricht jedem Nicht-Ziffernzeichen. Entspricht [^0-9].
• \s: Entspricht jedem Leerraumzeichen (Leerzeichen, Tabulatoren, Zeilenumbrüche).
• \S: Entspricht jedem Nicht-Leerraumzeichen. Entspricht [^\s].
• .: Entspricht jedem Zeichen außer dem Zeilenumbruch (\n).
• ^: Setzt die Position am Anfang einer Zeile.
• $: Setzt die Position am Ende einer Zeile.
• \b: Entspricht einer Wortgrenze (Position zwischen einem Wortzeichen und einem Nicht-Wortzeichen).
• \B: Entspricht einer Position, die keine Wortgrenze ist.
• \t: Entspricht einem Tabulatorzeichen.
• \n: Entspricht einem Zeilenumbruchzeichen.
• \r: Entspricht einem Wagenrücklaufzeichen.
• \\: Entspricht einem literalen Backslash.
• \f: Entspricht einem Seitenvorschubzeichen.
• \v: Entspricht einem vertikalen Tabulatorzeichen.
• [abc]: Entspricht jedem einzelnen Zeichen innerhalb der eckigen Klammern.
• [^abc]: Entspricht jedem einzelnen Zeichen außerhalb der eckigen Klammern.
• a|b: Entspricht entweder a oder b.
• (abc): Entspricht der genauen Zeichenfolge abc.
• a?: Entspricht a null oder einmal.
• a*: Entspricht a null oder mehrmals.
• a+: Entspricht a ein- oder mehrmals.
• a{3}: Entspricht genau 3 Vorkommen von a.
• a{3,}: Entspricht 3 oder mehr Vorkommen von a.
• a{3,5}: Entspricht 3 bis 5 Vorkommen von a.
• (?i): Wird in JavaScript nicht unterstützt. Verwenden Sie stattdessen das i-Flag.
• (?:...): Nicht-erfassende Gruppe.
• (?=...): Positiver Lookahead-Ausdruck.
• (?!...): Negativer Lookahead-Ausdruck.
• (?<=...): Positiver Lookbehind-Ausdruck.
• (?<!...): Negativer Lookbehind-Ausdruck.

Muster verstehen

Das Regex-Muster wird zwischen Schrägstrichen eingeschlossen (/muster/flags).

Beispiel: /H.llo/g

• Muster: H.llo entspricht jedem string, der mit 'H' beginnt, gefolgt von einem beliebigen einzelnen Zeichen (.), und mit 'llo' endet.
• Flag: g steht für eine globale Suche.
• Quantifier: . entspricht genau einem Zeichen.

Muster in regulären Ausdrücken werden verwendet, um den zu suchenden string zu definieren. Diese Muster können verschiedene Zeichen, Zeichenklassen und Sonderzeichen enthalten.

Sehen wir uns einige Beispiele an:

Beispiel 1:

1. Muster: \d+ entspricht einem oder mehreren Ziffernzeichen (\d+).
2. Flag: g steht für eine globale Suche.
3. Quantifier: + entspricht einem oder mehreren Vorkommen des vorangestellten Elements (\d).

Beispiel 2:

1. Muster: \D+ entspricht einem oder mehreren Nicht-Ziffernzeichen (\D+).
2. Flag: g steht für eine globale Suche.
3. Quantifier: + entspricht einem oder mehreren Vorkommen des vorangestellten Elements (\D).

Quantifier

Quantifier legen fest, wie viele Instanzen eines Zeichens, einer Gruppe oder einer Zeichenklasse in der Eingabe vorhanden sein müssen, damit eine Übereinstimmung gefunden wird. Hier sind einige häufig verwendete Quantifier mit Beispielen:

• + - Entspricht einem oder mehreren Vorkommen des vorangestellten Elements.

Dieses Muster entspricht Folgen von einer oder mehreren Ziffern.

• * - Entspricht null oder mehr Vorkommen des vorangestellten Elements.

Dieses Muster entspricht Folgen von null oder mehr Wortzeichen.

• ? - Entspricht null oder einem Vorkommen des vorangestellten Elements.

Dieses Muster entspricht 'color' oder 'colour'.

• {n} - Entspricht genau n Vorkommen des vorangestellten Elements.

Dieses Muster entspricht genau drei Ziffern.

• {n,} - Entspricht n oder mehr Vorkommen des vorangestellten Elements.

Dieses Muster entspricht Folgen von zwei oder mehr Ziffern.

• {n,m} - Entspricht zwischen n und m Vorkommen des vorangestellten Elements.

Dieses Muster entspricht Folgen von zwei bis drei Ziffern.

Flags

Flags sind optionale Parameter, die die Anwendung des Musters verändern. Sie können in beliebiger Reihenfolge kombiniert werden (z. B. /abc/gi). Hier ist die vollständige Liste:

Flag	Name	Wirkung
g	Global	Findet alle Übereinstimmungen, nicht nur die erste.
i	Groß-/Kleinschreibung ignorieren	Sucht unabhängig von Groß- und Kleinschreibung.
m	Mehrzeilig	^ und $ entsprechen dem Anfang/Ende jeder Zeile.
s	DotAll	. entspricht auch Zeilenumbruchzeichen.
u	Unicode	Behandelt das Muster als Unicode-Codepunkte; aktiviert \u{...} und \p{...}.
y	Sticky	Sucht nur an der genauen lastIndex-Position.
d	Indices	Fügt indices (Start-/Endpositionen) zu den Treffern hinzu.

Die folgenden Abschnitte demonstrieren jedes Flag im Einzelnen:

• g - Globale Suche.

Dieses Flag ermöglicht das Finden aller Übereinstimmungen im string.

• i - Suche ohne Unterscheidung der Groß-/Kleinschreibung.

Dieses Flag macht die Suche unabhängig von der Groß-/Kleinschreibung.

• m - Mehrzeilige Suche.

Dieses Flag erlaubt es ^ und $, dem Anfang und Ende jeder Zeile im string zu entsprechen.

• s - Erlaubt ., auch Zeilenumbruchzeichen zu entsprechen (auch als DotAll-Flag bekannt).

Dieses Flag erlaubt dem Punkt ., auch Zeilenumbruchzeichen zu entsprechen.

• u - „Unicode"; behandelt das Muster als Folge von Unicode-Codepunkten.

Dieses Flag aktiviert das vollständige Unicode-Matching.

• y - „Sticky"; sucht nur ab dem Index, der durch die lastIndex-Eigenschaft dieses regulären Ausdrucks im Zielstring angegeben wird.

Dieses Flag ermöglicht es, die Suche an einem bestimmten Index im string zu beginnen. Das Sticky-Flag ist nützlich für Tokenizer und Parser, die einen string Position für Position durchsuchen — eine ausführlichere Erklärung bietet Sticky-Flag „y", Suche an einer Position.

Muster testen: regexp.test()

Die Methode test() prüft, ob ein Muster in einem string vorhanden ist, und gibt true oder false zurück.

Dieser Code prüft das Vorhandensein von „world" im string.

Text ersetzen: str.replace()

Die Funktion replace() ermöglicht das Ändern von Strings, indem Teile davon durch neuen Text ersetzt werden.

Dieser Code ersetzt „morning" durch „evening".

Alles ersetzen: str.replaceAll()

Die Methode replaceAll() ersetzt alle Vorkommen eines Musters durch einen neuen string.

Dieser Code ersetzt jedes „a" durch „o".

Text aufteilen: str.split()

Die Methode split() teilt einen string anhand eines Musters in ein array von Teilstrings auf.

Dieser Code teilt den string an jedem Komma auf.

Text suchen: str.match()

Die Methode match() ruft die Übereinstimmungen eines Musters in einem string ab und eignet sich zum Extrahieren bestimmter Daten.

Dieser Code findet alle Zahlen im Text.

Schrittweise durch Treffer: regexp.exec()

Die Methode exec() gibt jeweils einen Treffer zurück. Mit dem g- (oder y-) Flag merkt sich der Regex seine Position in lastIndex, sodass ein exec()-Aufruf in einer Schleife jeden Treffer durchläuft — und im Gegensatz zu match() mit g enthält jedes Ergebnis weiterhin den Trefferindex und die Erfassungsgruppen.

Treffer iterieren: str.matchAll()

matchAll() ist die moderne, sauberere Alternative zu einer exec()-Schleife. Sie gibt einen Iterator vollständiger Trefferobjekte zurück (einschließlich Erfassungsgruppen) und erfordert das g-Flag.

Erfassungsgruppen

Klammern (...) erstellen eine Erfassungsgruppe und machen einen Teil eines Treffers zur Wiederverwendung zugänglich. Gruppen können auch benannt werden mit (?<name>...) und über das .groups-object ausgelesen werden — weitaus lesbarer als numerische Indizes.

Regex-Syntax in JavaScript

Reguläre Ausdrücke verwenden Sonderzeichen zur Definition von Mustern. Hier ist ein ausführliches Beispiel mit mehreren Elementen der Regex-Syntax:

Dieses Regex-Muster zerlegt eine URL in ihre Bestandteile:

• ^(\w+): Entspricht einem beliebigen Wortzeichen (entspricht [a-zA-Z0-9_]) am Anfang und repräsentiert das Protokoll.
• :\/\/: Entspricht dem „://" buchstäblich.
• ([\w.-]+): Entspricht einem oder mehreren Wortzeichen, Punkten oder Bindestrichen und repräsentiert die Domain.
• \/(\S*)$: Entspricht einem Schrägstrich gefolgt von beliebigen Nicht-Leerraumzeichen bis zum Ende und repräsentiert den Pfad.

Weitere Details:

Dieser JavaScript-Code prüft, ob eine Webadresse einem detaillierten Muster entspricht.

• Muster aufstellen: Das Muster ist so strukturiert, dass es verschiedene Komponenten einer Webadresse erfasst: das Protokoll (z. B. „https"), den Domainnamen (z. B. „www.w3docs.com") und den Pfad (alles nach der Domain).
• Webadresse testen: Der Code testet „https://www.w3docs.com/pathname/?search=test" gegen dieses Muster.
• Ergebnis anzeigen: Wenn die Webadresse übereinstimmt, gibt der Code die Teile aus, die dem Muster entsprechen.

Erwartetes Ergebnis: Die Ausgabe ist ein array mit folgenden Elementen:

1. Die gesamte Webadresse: „https://www.w3docs.com/pathname/?search=test".
2. Das verwendete Protokoll: „https".
3. Der Domainname: „www.w3docs.com".
4. Pfad und Abfragestring: „pathname/?search=test".

Praktische Anwendungen von Mustern und Flags

Regex wird in verschiedenen Szenarien eingesetzt, um JavaScript-Anwendungen zu verbessern:

Benutzereingaben validieren

Regex hilft sicherzustellen, dass Benutzereingaben bestimmte Kriterien erfüllen, was für die Datenqualität und Sicherheit entscheidend ist.

Dieser Code prüft, ob der Benutzername aus 3 bis 16 alphanumerischen Zeichen oder Unterstrichen besteht.

Informationen extrahieren

Regex kann spezifische Informationen aus großen Texten oder Datensätzen effizient extrahieren.

Dieser JavaScript-Code extrahiert eine bestimmte Information aus einem Textstring.

• Text definieren: Der Code beginnt mit einem string namens data, der Details zu einer Bestellung enthält, einschließlich einer Bestellnummer und eines Datums.
• Muster aufstellen: Es wird ein Muster (idPattern) verwendet, das nach dem Ausdruck „Order ID:" gefolgt von einer Ziffernfolge sucht. Dieses Muster ist darauf ausgelegt, den numerischen Teil direkt nach „Order ID:" zu erfassen.
• Bestellnummer extrahieren: Der Code durchsucht den data-string nach einer Übereinstimmung mit idPattern. Wenn eine Übereinstimmung gefunden wird, ruft er nur den Ziffernteil ab (ohne den Text „Order ID:"), der die Bestellnummer darstellt.
• Ergebnis ausgeben: Anschließend gibt er diese Bestellnummer in der Konsole aus.

Fazit

Die Beherrschung von Regex-Mustern und Flags in JavaScript ist wesentlich für die effektive Textverarbeitung, Datenvalidierung und Suchoperationen. Diese Werkzeuge machen Ihre JavaScript-Anwendungen robuster, effizienter und benutzerfreundlicher. Um tiefer einzusteigen, lesen Sie weiter über Zeichenklassen, Anker, Quantifier und Erfassungsgruppen.

Übungen