W3docs

JavaScript Regex-Quantoren und Zeilenumbrüche

Fortgeschrittenes Tutorial zu JavaScript-Quantoren in regulären Ausdrücken und dem Sonderzeichen \n für Zeilenumbrüche.

In diesem Leitfaden erkunden wir die leistungsstarken Quantoren, die dabei helfen, festzulegen, wie oft ein Muster in Textsuchen vorkommen soll. Tauchen wir ein und nutzen das Potenzial von Regex-Quantoren, um Ihren Code effizienter und effektiver zu gestalten!

Quantoren in regulären JavaScript-Ausdrücken verstehen

Quantoren in regulären Ausdrücken sind leistungsstarke Werkzeuge, mit denen Sie angeben können, wie oft ein Zeichen, eine Gruppe oder eine Zeichenklasse im Eingabe-string erscheinen muss, um zu matchen. Hier ist ein kurzer Überblick über die am häufigsten verwendeten Quantoren in JavaScript:

  • * (Sternchen): Entspricht 0 oder mehr Wiederholungen des vorherigen Elements.
  • + (Plus): Entspricht 1 oder mehr Wiederholungen des vorherigen Elements.
  • ? (Fragezeichen): Entspricht 0 oder 1 Wiederholung des vorherigen Elements.
  • {n}: Entspricht genau n Vorkommen des vorherigen Elements.
  • {n,}: Entspricht mindestens n Vorkommen des vorherigen Elements.
  • {n,m}: Entspricht zwischen n und m Vorkommen des vorherigen Elements (einschließlich).

Ein Quantor bindet immer an das einzelne Element direkt vor ihm — ein Zeichen, ein Escape wie \d, eine Zeichenklasse wie [a-z] oder eine Gruppe wie (abc). Er gilt nie für das gesamte Muster auf einmal.

Praktisches Beispiel: Verwendung des *-Quantors

javascript— editable

In diesem Beispiel entspricht /A*/i null oder mehr Vorkommen von 'A' (ohne Berücksichtigung der Groß-/Kleinschreibung) und erfasst die Sequenz "Aaaaaa" am Anfang des strings. Das Sternchen ermöglicht einen Match, selbst wenn 'A' nicht vorhanden ist.

Praktisches Beispiel: Verwendung des +-Quantors

javascript— editable

Der Ausdruck \d+ findet eine oder mehrere Ziffern im Text. Das Ergebnis enthält 123 und 456 als separate Matches und zeigt damit den Nutzen von + beim Erfassen vollständiger Zahlen.

Praktisches Beispiel: Verwendung des ?-Quantors

javascript— editable

Das Regex-Muster /colou?r/g entspricht sowohl "color" als auch "colour". Der ?-Quantor macht das vorangehende 'u' optional, sodass das Muster das Wort unabhängig davon matcht, ob 'u' vorhanden ist. Das g-Flag stellt sicher, dass alle Vorkommen im Text gefunden werden.

Praktisches Beispiel: Verwendung des {n}-Quantors

javascript— editable

\b\d{4}\b entspricht einer Sequenz aus genau vier Ziffern und erkennt 2022 und 1999 als Jahreszahlen.

Info

Berücksichtigen Sie stets die Effizienz Ihrer regulären Ausdrücke. Ineffiziente Muster können zu langsamer Performance führen, insbesondere bei großen Datensätzen. Optimieren Sie Ihre Regex, indem Sie unnötige Quantoren vermeiden und nicht-gierige Quantoren verwenden, wo dies angemessen ist.

Praktisches Beispiel: Verwendung des {n,}-Quantors

javascript— editable

Das Muster \b[a-zA-Z]{5,}\b entspricht Wörtern, die aus mindestens fünf Buchstaben bestehen. Dabei werden fantastic und incredible erfasst.

Praktisches Beispiel: Verwendung des {n,m}-Quantors

javascript— editable

Das Regex-Muster \b[a-zA-Z]{3,6}\b ist darauf ausgelegt, Wörter mit 3 bis 6 Buchstaben zu matchen, begrenzt durch Wortgrenzen, um sicherzustellen, dass nur vollständige Wörter erfasst werden. Die Regex erfasst "See", "the", "big", "tiny", "ant", "and", "old" und "tree". "elephant" wird nicht gematcht, da es mehr als 6 Buchstaben hat.

Praktisches Beispiel: Verwendung des \n-Zeichens

javascript— editable

Die Escape-Sequenz \n steht für ein Zeilenumbruchzeichen. In einem regulären Ausdruck entspricht sie dem tatsächlichen Zeilenumbruch im string. Das Muster /line\n/g findet das Wort "line" unmittelbar gefolgt von einem Zeilenumbruch und erfasst beide Vorkommen im Beispiel.

Die Kurzschreib-Quantoren sind nur {n,m}

Die Symbole *, + und ? sind nichts anderes als bequeme Kurzschreibweisen für die {n,m}-Form. Das Kennen der Entsprechungen macht sie leichter zu merken:

  • * entspricht {0,} — null oder mehr.
  • + entspricht {1,} — eins oder mehr.
  • ? entspricht {0,1} — null oder eins.
javascript— editable

Beide Muster in jedem Paar liefern das identische Ergebnis und bestätigen, dass die Symbole und die geschweiften Klammerformen austauschbar sind.

Quantoren sind standardmäßig gierig

Standardmäßig ist ein Quantor gierig: Er nimmt so viel vom string wie möglich, solange das Gesamtmuster noch matcht. Deshalb verschlingt ein Muster wie <.+> alles vom ersten < bis zum letzten >, nicht zum ersten >.

javascript— editable

Um stattdessen beim ersten > zu stoppen, fügt man ein ? nach dem Quantor hinzu, um ihn lazy (nicht-gierig) zu machen: <.+?>. Lazy-Quantoren werden ausführlich in Gierige und Lazy-Quantoren behandelt.

Quantoren auf Gruppen und Zeichenklassen anwenden

Ein Quantor wiederholt nur das einzelne Token vor ihm. Um mehrere Zeichen als Einheit zu wiederholen, fasst man sie in einer Capturing-Gruppe mit (...) zusammen. Um eines aus einer Menge von Zeichen zu wiederholen, setzt man den Quantor nach einer Zeichenklasse [...].

javascript— editable

Das erste Muster wiederholt die gesamte (abc)-Sequenz zweimal; ohne die Gruppe würde abc{2} nur das abschließende c wiederholen. Das Hex-Beispiel wiederholt die Klasse [0-9a-f] sechsmal, und das Telefonbeispiel kombiniert eine wiederholte Gruppe mit {n} auf \d.

Um zu steuern, ob Matches zwischen Groß-/Kleinschreibung unterscheiden oder mehrere Zeilen umspannen, kombiniert man Quantoren mit den entsprechenden Flags, die in Muster und Flags beschrieben werden.

Fazit

Das Verstehen und effektive Einsetzen von Quantoren und dem \n-Zeichen in JavaScript kann Ihre Textmanipulationsmöglichkeiten in der Webentwicklung erheblich erweitern. Diese Werkzeuge ermöglichen leistungsstarkes Muster-Matching und Datenextraktion, wodurch Ihr JavaScript-Code effizienter und Ihre Anwendungen dynamischer und reaktionsschneller werden.

Übungen

Übung
Was bewirkt der '+'-Quantor in JavaScript, wenn er in einem regulären Ausdruck verwendet wird?
Was bewirkt der '+'-Quantor in JavaScript, wenn er in einem regulären Ausdruck verwendet wird?
Was this page helpful?