JavaScript Regex (OR)

JavaScript reguläre Ausdrücke (RegEx) bieten leistungsstarke Möglichkeiten für den Musterabgleich in Zeichenketten. Eine der wichtigsten Komponenten von RegEx ist der OR-Operator, dargestellt durch den senkrechten Strich (|). Dieser Operator ermöglicht die Aufnahme mehrerer Muster in einen einzelnen regulären Ausdruck, was vielseitige und effiziente Zeichenkettensuchen und -manipulationen erlaubt. In diesem umfassenden Leitfaden werden wir die Verwendung des OR-Operators in JavaScript-RegEx erkunden, komplett mit praktischen Beispielen zur Vertiefung Ihres Verständnisses.

Den OR-Operator (|) in RegEx verstehen

Der OR-Operator in regulären Ausdrücken ermöglicht es Ihnen, mehrere Alternativen für eine Übereinstimmung anzugeben. Er ist besonders nützlich, wenn Sie eines von mehreren möglichen Mustern abgleichen müssen.

Grundlegende Verwendung des OR-Operators

Die Syntax für den OR-Operator ist unkompliziert. Sie platzieren das Symbol | zwischen den Mustern, die Sie abgleichen möchten.

In diesem Beispiel stimmt das Muster /cat|dog/ sowohl mit "cat" als auch mit "dog" in den gegebenen Zeichenketten überein.

Alternation-Vorrang: Warum Sie fast immer Klammern benötigen

Dies ist der größte Fallstrick beim |. Der OR-Operator hat eine sehr niedrige Priorität — niedriger als jeder andere Regex-Operator. Das bedeutet, dass | den gesamten Ausdruck in Alternativen aufteilt, bis zu den umgebenden Begrenzern oder den nächsten umschließenden Klammern.

So bedeutet /cat|concatenate/ nicht "cat, optional gefolgt von concatenate". Es bedeutet: das gesamte Muster cat abgleichen ODER das gesamte Muster concatenate abgleichen. Ebenso liest sich /^cat|dog$/ als (^cat)|(dog$) — "beginnt mit cat" ODER "endet mit dog" — was selten der beabsichtigten Bedeutung entspricht.

Um die Alternation auf nur einen Teil eines Musters zu beschränken, schließen Sie die Alternativen in Klammern ein.

Das Verankern des gesamten Ausdrucks mit ^ und $ ist ein häufiger Begleiter zur gruppierten Alternation — siehe Anchors: string start and end.

Die Reihenfolge ist wichtig: Erste Übereinstimmung gewinnt

Die Regex-Engine versucht Alternativen von links nach rechts und hält bei der ersten an, die an der aktuellen Position erfolgreich ist. Sie sucht nicht nach der längsten Übereinstimmung — nur nach der ersten. Das bedeutet, dass die Reihenfolge Ihrer Alternativen bedeutsam ist.

Faustregel: Listen Sie die längeren oder spezifischeren Alternativen vor den kürzeren auf, mit denen sie ein Präfix teilen.

Gruppierung mit Klammern

Klammern () gruppieren Teile eines regulären Ausdrucks, sodass Quantifizierer und andere Operatoren auf die gesamte Gruppe angewendet werden, und sie erfassen auch den übereinstimmenden Text zur späteren Verwendung (siehe Capturing Groups). Dies ist unerlässlich, wenn das OR nur einen Teil eines größeren Musters abdecken soll.

Hier gilt der Quantifizierer s? für die gesamte Gruppe (cat|dog), sodass das Muster "cat", "cats", "dog" und "dogs" abgleicht. Der Quantifizierer ? und verwandte werden in Quantifiers +, * and {n} behandelt.

Praktische Beispiele

Verschiedene Dateiendungen abgleichen

Angenommen, Sie müssen Dateinamen mit verschiedenen Endungen wie .jpg, .png oder .gif validieren.

In diesem Beispiel stimmt das Muster /\.(jpg|png|gif)$/ mit Dateinamen überein, die auf ".jpg", ".png" oder ".gif" enden. Das führende \. gleicht einen wörtlichen Punkt ab, die Gruppe (jpg|png|gif) ist die Alternation, und $ verankert die Übereinstimmung am Ende der Zeichenkette.

Telefonnummern validieren

Stellen Sie sich ein Szenario vor, in dem Sie verschiedene Formate von Telefonnummern validieren müssen.

Das Muster /(\+\d{1,2}\s?)?(\(\d{3}\)|\d{3})[-.\s]?\d{3}[-.\s]?\d{4}/ Stück für Stück gelesen:

• (\+\d{1,2}\s?)? — ein optionaler Ländercode: ein +, ein oder zwei Ziffern, dann ein optionales Leerzeichen. Das abschließende ? macht die gesamte Gruppe optional.
• (\(\d{3}\)|\d{3}) — die Alternation: entweder drei Ziffern in Klammern (123) oder drei bloße Ziffern 123. Beachten Sie, dass \( und \) wörtliche Klammern sind, während die äußeren nicht-maskierten () die Gruppierung vornehmen.
• [-.\s]? — ein optionales Trennzeichen: ein Bindestrich, ein Punkt oder Leerzeichen. (Dies sind Zeichenklassen.)
• \d{3} — drei Ziffern.
• [-.\s]? — ein weiteres optionales Trennzeichen.
• \d{4} — die abschließenden vier Ziffern.

Einfache Alternation vs. optionale Teilmuster

Eine häufige Verwechslung besteht darin, color|colour so zu behandeln, als ob das u optional wäre. Das ist es nicht — dies ist einfache Alternation zwischen zwei vollständigen Wörtern.

Wenn sich die Alternativen nur durch ein einzelnes Zeichen (oder eine kurze Folge) unterscheiden, ist der idiomatische und effizientere Ansatz ein quantifiziertes optionales Teilmuster, keine Alternation. Der Quantifizierer ? macht das vorangehende u optional:

Greifen Sie zur Alternation (|), wenn die Optionen wirklich verschiedene Zeichenketten sind (cat|dog); greifen Sie zu ?, wenn eine Form die andere plus ein optionales Fragment ist (colou?r).

Den OR-Operator mit anderen Metazeichen kombinieren

Die Stärke des OR-Operators wird erhöht, wenn er mit anderen Metazeichen regulärer Ausdrücke kombiniert wird, wie * (null oder mehr), + (ein oder mehr), ? (null oder ein) und {} (genau n Mal).

Beispiel mit Quantifizierern

Das Muster /\b(cat|dog)s?\b/ gleicht "cat", "cats", "dog" und "dogs" als ganze Wörter ab und verwendet dabei das Wortgrenzmetazeichen \b.

Erweitertes Beispiel mit mehreren Bedingungen

Die beiden Datumsformate unten — D-M-YYYY und YYYY-M-D — verwenden beide dieselben Trennzeichen und Ziffernanzahlen, sodass der reguläre Ausdruck die Tag-Monat-Reihenfolge allein nach der Form nicht unterscheiden kann. Was er unterscheiden kann, ist wo die vierstellige Jahreszahl steht: am Ende für ein Format, am Anfang für das andere.

Dieses Muster gleicht Datumsangaben sowohl im Tag-zuerst- (12-31-2023, 31-12-2023) als auch im Jahr-zuerst-Format (2023-12-31) ab. Beachten Sie, dass 31-12-2023 tatsächlich übereinstimmt — es ist eine vollkommen gültige \d{1,2}-\d{1,2}-\d{4}-Zeichenkette, daher akzeptiert die erste Alternative sie.

Ein subtiles, aber wichtiges Detail: Da | die niedrigste Priorität hat, bindet ^ nur an die erste Alternative und $ nur an die zweite. Um beide Alternativen zu verankern, gruppieren Sie sie:

Alternation mit match(), matchAll() und replace() verwenden

test() teilt Ihnen nur mit, ob ein Muster übereinstimmt. Um den übereinstimmenden Text zu extrahieren oder zu transformieren, kombinieren Sie Alternation mit Capturing Groups und den Zeichenkettenmethoden match(), matchAll() und replace().

match() (ohne das g-Flag) gibt die erste Übereinstimmung plus jede erfasste Gruppe zurück:

Mit dem g-Flag gibt match() jede Übereinstimmung als array zurück, und matchAll() liefert einen Iterator vollständiger Übereinstimmungsobjekte:

replace() ermöglicht es Ihnen, jede Alternative umzuschreiben. Hier normalisieren wir britische und amerikanische Schreibweisen auf eine Form:

Fazit

Die Beherrschung des OR-Operators in JavaScript regulären Ausdrücken eröffnet ein breites Spektrum an Möglichkeiten für effizienten und vielseitigen Musterabgleich. Wenn Sie verstehen, wie der OR-Operator in Kombination mit anderen RegEx-Funktionen verwendet wird, können Sie leistungsstarke und flexible Muster erstellen, um komplexe Zeichenkettensuchen und -manipulationen zu bewältigen.

Übungen

Denken Sie jede Option durch, bevor Sie antworten. Denken Sie daran, dass jede der folgenden Optionen gültige Regex-Syntax ist — die Frage ist, was jede tatsächlich abgleicht:

• /cat|dog/ — einfache Alternation mit |; gleicht "cat" oder "dog" irgendwo in einer Zeichenkette ab. Korrekt.
• /(cat|dog)/ — dieselbe Alternation in einer Capturing Group eingeschlossen; die Gruppe ändert nicht, was abgeglichen wird, nur dass die Übereinstimmung erfasst wird. Korrekt.
• /cat|dogs/ — gültig, aber die zweite Alternative ist "dogs" (mit einem s), daher stimmt es niemals mit dem bloßen Wort "dog" überein. Für diese Frage falsch.
• /cat||dog/ — die leere Alternative zwischen den beiden |-Symbolen gleicht eine leere Zeichenkette ab, daher stimmt dies mit fast allem überein, einschließlich Zeichenketten, die keines der Wörter enthalten. Falsch.
• /(cat|dog)s/ — das erforderliche s nach der Gruppe bedeutet, dass dies "cats" oder "dogs" abgleicht, nicht "cat" oder "dog". Falsch.
• /cat|do g/ — das Leerzeichen ist ein wörtliches Zeichen, daher ist die zweite Alternative "do g" (mit einem Leerzeichen), nicht "dog". Falsch.