W3Docs

Darstellung

Deutsch

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. Dieser umfassende Leitfaden vertieft Ihr Verständnis von Regex-Mustern und Flags und erweitert Ihre JavaScript-Kenntnisse.

Liste gängiger 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, Tabs, Zeilenumbrüche).
  • \S: Entspricht jedem Nicht-Leerraumzeichen. Entspricht [^\s].
  • .: Entspricht jedem Zeichen außer dem Zeilenumbruch (\n).
  • ^: Prüft die Position am Zeilenanfang.
  • $: Prüft die Position am Zeilenende.
  • \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 einem einzelnen Zeichen innerhalb der Klammern.
  • [^abc]: Entspricht einem einzelnen Zeichen, das nicht innerhalb der Klammern liegt.
  • a|b: Entspricht entweder a oder b.
  • (abc): Entspricht der exakten Zeichenfolge abc.
  • a?: Entspricht null- oder einmal.
  • a*: Entspricht null- oder mehrmals.
  • a+: Entspricht einmal 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.
  • (?=...): Positive Lookahead-Prüfung.
  • (?!...): Negative Lookahead-Prüfung.
  • (?<=...): Positive Lookbehind-Prüfung.
  • (?<!...): Negative Lookbehind-Prüfung.

Muster verstehen ​

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

Beispiel: /H.llo/g

  • Muster: H.llo entspricht jeder Zeichenfolge, die mit 'H' beginnt, auf ein beliebiges einzelnes Zeichen (.) folgt und mit 'llo' endet.
  • Flag: g steht für globale Suche.
  • Quantifizierer: . entspricht genau einem Zeichen.

Muster in regulären Ausdrücken werden verwendet, um die Zeichenfolge zu definieren, nach der Sie suchen. Diese Muster können verschiedene Zeichen, Zeichenklassen und Sonderzeichen enthalten.

Sehen wir uns nun einige Beispiele an:

Beispiel 1: ​

Output appears here after Run.
  1. Muster: \d+ entspricht einem oder mehreren Ziffernzeichen (\d+).
  2. Flag: g steht für eine globale Suche.
  3. Quantifizierer: + entspricht einem oder mehreren Vorkommen des vorhergehenden Elements (\d).

Beispiel 2: ​

Output appears here after Run.
  1. Muster: \D+ entspricht einem oder mehreren Nicht-Ziffernzeichen (\D+).
  2. Flag: g steht für eine globale Suche.
  3. Quantifizierer: + entspricht einem oder mehreren Vorkommen des vorhergehenden Elements (\D).

Quantifizierer ​

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

  • + - Entspricht einem oder mehreren Vorkommen des vorhergehenden Elements.
Output appears here after Run.

Dieses Muster entspricht Sequenzen aus einem oder mehreren Ziffern.

  • * - Entspricht null oder mehr Vorkommen des vorhergehenden Elements.
Output appears here after Run.

Dieses Muster entspricht Sequenzen aus null oder mehr Wortzeichen.

  • ? - Entspricht null oder einem Vorkommen des vorhergehenden Elements.
Output appears here after Run.

Dieses Muster entspricht 'color' oder 'colour'.

  • {n} - Entspricht genau n Vorkommen des vorhergehenden Elements.
Output appears here after Run.

Dieses Muster entspricht genau drei Ziffern.

  • {n,} - Entspricht n oder mehr Vorkommen des vorhergehenden Elements.
Output appears here after Run.

Dieses Muster entspricht Sequenzen aus zwei oder mehr Ziffern.

  • {n,m} - Entspricht zwischen n und m Vorkommen des vorhergehenden Elements.
Output appears here after Run.

Dieses Muster entspricht Sequenzen aus zwei bis drei Ziffern.

Flags ​

Flags sind optionale Parameter, die globale Suche, Suche ohne Beachtung der Groß-/Kleinschreibung und mehr ermöglichen. Hier sind einige häufig verwendete Flags mit Beispielen:

  • g - Globale Suche.
Output appears here after Run.

Dieses Flag ermöglicht das Finden aller Übereinstimmungen in der Zeichenfolge.

  • i - Suche ohne Beachtung der Groß-/Kleinschreibung.
Output appears here after Run.

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

  • m - Mehrzeilige Suche.
Output appears here after Run.

Dieses Flag ermöglicht es ^ und $, den Anfang und das Ende jeder Zeile in der Zeichenfolge zu erkennen.

  • s - Ermöglicht, dass . auch Zeilenumbrüche erkennt (auch als dotAll-Flag bekannt).
Output appears here after Run.

Dieses Flag ermöglicht es dem Punkt . ebenfalls, Zeilenumbrüche zu erkennen.

  • u - "Unicode"; behandelt das Muster als eine Folge von Unicode-Codepunkten.
Output appears here after Run.

Dieses Flag aktiviert vollständiges Unicode-Matching.

  • y - "Sticky"; entspricht nur ab dem Index, der durch die lastIndex-Eigenschaft dieses regulären Ausdrucks in der Zielzeichenfolge angegeben wird.
Output appears here after Run.

Dieses Flag ermöglicht es, die Suche an einem bestimmten Index in der Zeichenfolge zu starten.

Muster testen: regexp.test() ​

Die Methode test() prüft, ob ein Muster innerhalb einer Zeichenfolge vorhanden ist, und gibt true oder false zurück.

Output appears here after Run.

Dieser Code prüft, ob "world" in der Zeichenfolge vorhanden ist.

Text ersetzen: str.replace() ​

Die Funktion replace() ermöglicht es Ihnen, Zeichenfolgen zu ändern, indem Sie Teile davon durch neuen Text ersetzen.

Output appears here after Run.

Dieser Code ersetzt "morning" durch "evening".

Alle ersetzen: str.replaceAll() ​

Die Methode replaceAll() ersetzt alle Vorkommen eines Musters durch eine neue Zeichenfolge.

Output appears here after Run.

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

Text aufteilen: str.split() ​

Die Methode split() teilt eine Zeichenfolge anhand eines Musters in ein Array von Teilzeichenfolgen auf.

Output appears here after Run.

Dieser Code teilt die Zeichenfolge an jedem Komma.

Text suchen: str.match() ​

Die Methode match() ruft die Übereinstimmungen eines Musters innerhalb einer Zeichenfolge ab und ist nützlich, um bestimmte Daten herauszufiltern.

Output appears here after Run.

Dieser Code findet alle Zahlen im Text.

Regex-Syntax in JavaScript ​

Reguläre Ausdrücke verwenden Sonderzeichen, um Muster zu definieren. Hier ist ein detailliertes Beispiel mit mehreren Elementen der Regex-Syntax:

Output appears here after Run.

Dieses Regex-Muster zerlegt eine URL in ihre Bestandteile:

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

Weitere Details:

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

  • Einrichten des Musters: Das Muster ist so aufgebaut, dass verschiedene Bestandteile einer Webadresse erfasst werden: das Protokoll (wie "https"), der Domainname (wie "www.w3docs.com"), und der Pfad (alles nach der Domain).
  • Testen der Webadresse: Der Code testet "https://www.w3docs.com/pathname/?search=test" gegen dieses Muster.
  • Anzeige des Ergebnisses: Wenn die Webadresse übereinstimmt, gibt der Code die Teile aus, die dem Muster entsprechen.

Erwartetes Ergebnis: Die Ausgabe ist ein Array mit den 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. Der Pfad und die Query-String: "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 Datenqualität und Sicherheit entscheidend ist.

Output appears here after Run.

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

Informationen extrahieren ​

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

Output appears here after Run.

Dieser JavaScript-Code extrahiert einen bestimmten Informationsausschnitt aus einer Textzeichenfolge.

  • Den Text definieren: Der Code beginnt mit einer Zeichenfolge namens data, die Details zu einer Bestellung enthält, einschließlich einer Bestellnummer und eines Datums.
  • Das Muster einrichten: Es verwendet ein Muster (idPattern), um nach der Phrase "Order ID:" zu suchen, gefolgt von einer Reihe von Ziffern. Dieses Muster ist darauf ausgelegt, den numerischen Teil direkt nach "Order ID:" zu erfassen.
  • Die Bestellnummer extrahieren: Der Code sucht in der Zeichenfolge data nach einer Übereinstimmung mit idPattern. Wenn er eine Übereinstimmung findet, ruft er nur den Ziffernteil ab (und ignoriert den Text "Order ID:"), der die Bestellnummer darstellt.
  • Das Ergebnis anzeigen: Anschließend gibt er diese Bestellnummer in der Konsole aus.

INFO

Testen Sie Ihre Regex-Muster immer mit Tools wie regex101.com, um Genauigkeit und Effizienz sicherzustellen, bevor Sie sie in Ihrem Code implementieren.

Fazit ​

Das Beherrschen von Regex-Mustern und Flags in JavaScript ist entscheidend, um Textmanipulation, Datenvalidierung und Suchoperationen effektiv zu handhaben. Diese Werkzeuge machen Ihre JavaScript-Anwendungen robuster, effizienter und benutzerfreundlicher. Erkunden Sie verschiedene Muster und Flags, um Ihre Programmierkenntnisse und die Leistung Ihrer Anwendungen zu verbessern.

Practice ​

What are the properties of regular expressions in JavaScript as described in the provided URL?

Finden Sie das nützlich?

Dual-run-Vorschau — vergleichen Sie mit den Symfony-Routen live.