Ein Leitfaden zu Regular expressions (Regex) in JavaScript

Eine Kurzanleitung zur effektiven Nutzung regulärer Ausdrücke (Regex) in JavaScript mit praktischen Beispielen.

Wenn Sie zum ersten Mal auf regular expressions stoßen, erscheinen sie Ihnen vielleicht wie eine zufällige Zeichenfolge aus Kauderwelsch. Sie sehen vielleicht seltsam aus und haben eine etwas verwirrende Syntax, aber sie sind auch äußerst nützlich. 

Die Wahrheit ist: Wenn Sie regular expressions richtig verstehen, werden Sie ein viel effektiverer Programmierer. Um die Welt der regulären Ausdrücke vollständig zu verstehen, müssen Sie zunächst die grundlegenden Konzepte lernen, auf denen Sie später aufbauen können. Lassen Sie uns anfangen.

Was sind regular expressions?

Regular expressions sind eine Möglichkeit, Muster in einer Datenzeichenfolge zu beschreiben . Sie bilden eine eigene kleine Sprache, die Bestandteil vieler Programmiersprachen wie JavaScript , Perl, Python , PHP und Java ist .

Mithilfe regulärer Ausdrücke können Sie eine Zeichenfolge wie eine E-Mail-Adresse oder ein Kennwort auf Muster überprüfen, um zu sehen, ob sie mit dem durch den jeweiligen regulären Ausdruck definierten Muster übereinstimmen und um verwertbare Informationen zu erzeugen.

So erstellen Sie einen regulären Ausdruck in JavaScript

Es gibt zwei Möglichkeiten, einen regulären Ausdruck in JavaScript zu erstellen. Er kann entweder mit einem RegExp-Konstruktor erstellt werden oder durch die Verwendung von Schrägstrichen ( /), um das Muster einzuschließen.

Konstruktor für regular expressions

Syntax: new RegExp(pattern[, flags])

Beispiel 

Regulärer Ausdruck (Regex) Literal

Syntax:/pattern/flags

Beispiel für Regex-Literal 

Hier sind die Flags optional. Ich werde diese später in diesem Artikel erklären.

Es kann auch Fälle geben, in denen Sie regular expressions dynamisch erstellen möchten. In diesem Fall funktioniert der Regex-Literal nicht. Sie müssen also einen Konstruktor für regular expressions verwenden.

Egal, welche Methode Sie wählen, das Ergebnis ist ein Regex-Objekt. Beiden Regex-Objekten werden dieselben Methoden und Eigenschaften zugeordnet.

Da im obigen Beispiel Schrägstriche zum Einschließen von Mustern verwendet werden, müssen Sie den Schrägstrich ( / )mit einem umgekehrten Schrägstrich maskieren ( \ ), wenn Sie ihn als Teil des regulären Ausdrucks verwenden möchten.

Methoden für regular expressions (Regex) in JavaScript

Es gibt zwei Hauptmethoden zum Testen regulärer Ausdrücke.

RegExp.prototype.test()

Mit dieser Methode wird getestet, ob eine Übereinstimmung gefunden wurde oder nicht. Sie akzeptiert eine Zeichenfolge, die wir anhand eines regulären Ausdrucks testen müssen, und gibt entweder zurück true oder , falseje nachdem, ob die Übereinstimmung gefunden wurde oder nicht.

Zum Beispiel:

RegExp.prototype.exec()

Diese Methode gibt ein Array zurück , das alle übereinstimmenden Gruppen enthält. Sie akzeptiert einen String, den wir anhand eines regulären Ausdrucks testen müssen.

Zum Beispiel:

Wir werden die test()Methode in diesem Artikel verwenden.

Einfache JavaScript-Regex-Muster

Dies ist das einfachste Muster, das einfach den wörtlichen Text mit der Testzeichenfolge abgleicht. Beispiel:

Zu kennende Sonderzeichen für regular expressions (Regex) in JavaScript

Bisher haben wir einfache Muster für regular expressions erstellt. Jetzt wollen wir die volle Leistungsfähigkeit regulärer Ausdrücke für komplexere Fälle nutzen.

Angenommen, wir möchten statt einer bestimmten E-Mail-Adresse eine Reihe von E-Mail-Adressen abgleichen. Hier kommen Sonderzeichen ins Spiel. Es gibt spezielle Symbole und Zeichen, die Sie sich merken müssen, um die regulären Ausdrücke vollständig zu verstehen.

Flaggen

regular expressions haben fünf optionale Flags oder Modifikatoren. Lassen Sie uns die beiden wichtigsten Flags besprechen:

• g:  Globale Suche, nicht nach dem ersten Treffer zurückkehren.
• i:  Suche ohne Berücksichtigung der Groß-/Kleinschreibung

Sie können die Flags auch in einem einzigen regulären Ausdruck kombinieren. Die Reihenfolge hat dabei keinen Einfluss auf das Ergebnis.

Schauen wir uns einige Codebeispiele an:

Regulärer Ausdrucksliteral

Syntax: /pattern/flags

Konstruktor für regular expressions 

Syntax: new RegExp(‘pattern’, ‘flags’)

Zeichengruppen

Nachfolgend sind einige allgemeine Zeichengruppen für regular expressions aufgeführt, die Sie kennen sollten.

Zeichensatz [xyz] 

Ein Zeichensatz ist eine Möglichkeit, verschiedene Zeichen an einer einzigen Position abzugleichen. Er gleicht jedes einzelne Zeichen in der Zeichenfolge aus den in den Klammern stehenden Zeichen ab. Beispiel:

Alle Sonderzeichen außer dem Caretzeichen (^), das innerhalb des Zeichensatzes eine völlig andere Bedeutung hat, verlieren innerhalb des Zeichensatzes ihre besondere Bedeutung.

Negierter Zeichensatz [^xyz] 

Dies entspricht allem, was nicht in Klammern steht. Beispiel:

Bereiche [az]

Wenn wir alle Buchstaben eines Alphabets an einer einzigen Position abgleichen möchten, könnten wir alle Buchstaben in die Klammern schreiben. Es gibt aber einen einfacheren Weg, und das sind Bereiche. Beispielsweise entspricht [ah] allen Buchstaben von a bis h. Bereiche können auch Ziffern wie [0-9] oder Großbuchstaben wie [AZ] sein.

Meta-Charaktere 

Metazeichen sind Zeichen mit einer besonderen Bedeutung. Es gibt viele Metazeichen, aber ich werde hier die wichtigsten behandeln.

• \d: Passt zu jedem beliebigen Ziffernzeichen (dasselbe wie [0-9]).
• \w: Findet Übereinstimmung mit jedem Wortzeichen. Ein Wortzeichen ist jeder Buchstabe, jede Ziffer und jeder Unterstrich. Dies ist dasselbe wie [a-zA-Z0–9_], also alphanumerische Zeichen.
• \s: Passt zu einem Leerzeichen (Leerzeichen, Tabulatoren usw.).
• \t: Passt nur auf ein Tabulatorzeichen.
• \b: Suchen Sie nach einer Übereinstimmung am Anfang oder Ende eines Wortes. Wird auch als Wortgrenze bezeichnet.
• . (Punkt) : Stimmt mit jedem Zeichen außer dem Zeilenumbruch überein.
• \D: Übereinstimmung mit jedem Zeichen, das keine Ziffer ist. Dies ist dasselbe wie [^0–9].
• \W: Übereinstimmung mit jedem Nicht-Wortzeichen. Dies ist dasselbe wie [^a-zA-Z0–9_].
• \S:  Übereinstimmung mit einem Zeichen, das kein Leerzeichen ist.

Quantifizierer

Quantifizierer sind Symbole, die in einem regulären Ausdruck eine besondere Bedeutung haben.

• +: Stimmt ein- oder mehrmals mit dem vorhergehenden Ausdruck überein.
• *:  Stimmt null oder mehrmals mit dem vorhergehenden Ausdruck überein.
• ?: Stimmt null- oder einmal mit dem vorhergehenden Ausdruck überein, das vorhergehende Muster ist also optional.
• ^: Stimmt mit dem Anfang der Zeichenfolge überein. Der darauf folgende reguläre Ausdruck sollte am Anfang der Testzeichenfolge stehen, d. h. das Caret-Zeichen (^)stimmt mit dem Anfang der Zeichenfolge überein.
• $: Entspricht dem Ende der Zeichenfolge. Das heißt, der davor stehende reguläre Ausdruck sollte am Ende der Testzeichenfolge stehen. Das Dollarzeichen ($)entspricht dem Ende der Zeichenfolge.
• {N}: Stimmt mit genau N Vorkommen des vorhergehenden regulären Ausdrucks überein.
• {N,}: Stimmt mit mindestens N Vorkommen des vorhergehenden regulären Ausdrucks überein.
• {N,M}: Stimmt mit mindestens N und höchstens M Vorkommen des vorhergehenden regulären Ausdrucks überein, wobei M > N.
• Alternative X|Y: Stimmt entweder mit X oder Y überein. Beispiel:

Wenn Sie Sonderzeichen als Teil des Ausdrucks verwenden möchten, beispielsweise wenn Sie wörtliche +oder abgleichen möchten ., müssen Sie diese mit dem Backslash maskieren ( \ ).

Zum Beispiel:

Fortgeschrittene Charaktere

(X): Stimmt mit x überein und merkt sich die Übereinstimmung. Diese werden als Erfassungsgruppen bezeichnet. Dies wird auch verwendet, um Unterausdrücke innerhalb eines regulären Ausdrucks zu erstellen. Beispiel:

\1merkt sich die Übereinstimmung aus dem ersten Unterausdruck in den Klammern und verwendet sie.

(?:x): Stimmt mit x überein und merkt sich die Übereinstimmung nicht. Diese werden als nicht erfassende Gruppen bezeichnet. \1Funktioniert hier nicht, es stimmt mit dem Literal überein \1.

x(?=y):  Stimmt nur mit x überein, wenn auf x y folgt. Wird auch als positiver Look-Ahead bezeichnet. Beispiel:

Im obigen Beispiel wird nur dann eine Übereinstimmung gefunden, wenn Redauf folgt Apple:

Üben mit regular expressions (Regex) in JavaScript

Lassen Sie uns einige der Konzepte üben, die wir oben gelernt haben decision tree.

Lassen Sie uns für das erste Problem eine Übereinstimmung mit einer beliebigen 10-stelligen Zahl finden:

Lassen Sie uns das aufschlüsseln und sehen, was los ist.

1. Wenn wir erzwingen möchten, dass die Übereinstimmung die gesamte Zeichenfolge umfassen muss, können wir die Quantifizierer ^und hinzufügen $. Das Zirkumflexzeichen ^ entspricht dem Anfang der Eingabezeichenfolge, während das Dollarzeichen $dem Ende entspricht. Es würde also keine Übereinstimmung geben, wenn die Zeichenfolge mehr als 10 Ziffern enthalten würde.
2. \dpasst zu jedem Ziffernzeichen.
3. {10}stimmt mit dem vorherigen Ausdruck überein. In diesem Fall \dgenau 10 Mal. Wenn die Testzeichenfolge also weniger oder mehr als 10 Ziffern enthält, ist das Ergebnis falsch.

Jetzt wollen wir ein Datum mit folgendem Format vergleichen DD-MM-YYYYoderDD-MM-YY

Lassen Sie uns das aufschlüsseln und sehen, was los ist.

1. Auch hier haben wir den gesamten regulären Ausdruck in ^und eingeschlossen $, sodass die Übereinstimmung den gesamten String umfasst.
2. (Beginn des ersten Unterausdrucks.
3. \d{1,2}stimmt mit mindestens einer und höchstens zwei Ziffern überein.
4. -entspricht dem wörtlichen Bindestrichzeichen.
5. )Ende des ersten Unterausdrucks.
6. {2}stimmt genau zwei Mal mit dem ersten Unterausdruck überein.
7. \d{2}stimmt mit genau zwei Ziffern überein.
8. (\d{2})?stimmt mit genau zwei Ziffern überein. Aber es ist optional, also enthält das Jahr entweder zwei oder vier Ziffern.

Für unsere dritte Herausforderung wollen wir alles außer einer neuen Zeile zuordnen.

Der Ausdruck sollte mit jeder Zeichenfolge im Format wie übereinstimmen abc.def.ghi.jkl, wobei jede Variable a, b, c, d, e, f, g, h, i, j, k, lein beliebiges Zeichen außer einem neuen Zeilenzeichen sein kann.

Lassen Sie uns das aufschlüsseln und sehen, was da oben los ist.

1. ^Wir haben den gesamten regulären Ausdruck in und zusammengefasst $, sodass die Übereinstimmung die gesamte Zeichenfolge umfasst.
2. (Beginn des ersten Unterausdrucks.
3. .{3}stimmt genau dreimal mit jedem Zeichen außer der neuen Zeile überein.
4. \.entspricht dem wörtlichen . Punkt.
5. )Ende des ersten Unterausdrucks.
6. {3}stimmt genau dreimal mit dem ersten Unterausdruck überein.
7. .{3}stimmt genau dreimal mit jedem Zeichen außer der neuen Zeile überein.

Grundlegendes zu regular expressions (Regex) in JavaScript

regular expressions können manchmal ziemlich komplex sein. Wenn Sie die oben genannten Konzepte jedoch gut verstehen, können Sie auch komplexere Regex-Muster leichter verstehen.

Häufig gestellte Fragen