Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Regular Expressions

Ein Anfänger-Leitfaden für reguläre Ausdrücke in JavaScript

Read Time: 8 mins

German (Deutsch) translation by Ines Willenbrock (you can also view the original English article)

Jeder, der mit JavaScript arbeitet, muss sich an der einen oder anderen Stelle mit Zeichenfolgen, auch Strings genannt, auseinandersetzen. Manchmal müssen Sie nur eine Zeichenfolge in einer anderen Variablen speichern und dann übergeben. In anderen Zeiten müssen Sie sie überprüfen und sehen, ob sie eine bestimmte Teilzeichenfolge enthält.

Allerdings ist es nicht immer so einfach. Es wird Zeiten geben, in denen Sie nicht nach einer bestimmten Teilzeichenfolge suchen, sondern nach einer Reihe von Teilzeichenfolgen, die einem bestimmten Muster folgen.

Nehmen wir an, Sie müssen alle Vorkommen von "Apples" in einer Zeichenfolge durch "apples" ersetzen. Sie können einfach .theMainString.replace("Apples", "apples") verwenden. Schön und einfach.

Angenommen, Sie müssen "appLes" auch durch "apples" ersetzen. Ebenso sollte "appLES" auch zu "apples" werden. Grundsätzlich müssen alle Gehäusevarianten von "Apple" in "apple" geändert werden. Das Übergeben einfacher Zeichenfolgen als Argument ist in solchen Fällen nicht mehr praktikabel oder effizient.

Hier kommen reguläre Ausdrücke ins Spiel – Sie können einfach die Groß-/Kleinschreibung durch die Verwendung des Flags i ignorieren und damit fertig werden. Wenn das Flag gesetzt ist, spielt es keine Rolle, ob die ursprüngliche Zeichenfolge "Apples", "APPles", "ApPlEs" oder "Apples" enthielt. Jede Instanz des Wortes wird durch "apples" ersetzt.

Genau wie das Flag zum Ignorieren der Groß-/Kleinschreibung, bieten reguläre Ausdrücke eine Menge anderer Funktionen, die in diesem Tutorial behandelt werden.

Verwenden regulärer Ausdrücke in JavaScript

Sie müssen eine etwas andere Syntax verwenden, um einen regulären Ausdruck innerhalb verschiedener String-Methoden anzugeben. Im Gegensatz zu einer einfachen Zeichenfolge, die in Anführungszeichen eingeschlossen ist, besteht ein regulärer Ausdruck aus einem Muster, das zwischen Schrägstrichen eingeschlossen ist. Alle Flags, die Sie in einem regulären Ausdruck verwenden, werden nach dem zweiten Schrägstrich angehängt.

Zurück zum vorherigen Beispiel, hier ist, wie die replace()-Methode mit einem regulären Ausdruck und einer einfachen Zeichenfolge aussehen würde.

Wie Sie sehen können, funktionierte der reguläre Ausdruck in beiden Fällen. Wir erfahren nun mehr über Flags und Sonderzeichen, die das Muster in einem regulären Ausdruck bilden.

Umgekehrter Schrägstrich in regulären Ausdrücken

Sie können normale Zeichen in Sonderzeichen umwandeln, indem Sie vor ihnen einen umgekehrten Schrägstrich hinzufügen. Ebenso können Sie Sonderzeichen in normale Zeichen umwandeln, indem Sie einen umgekehrten Schrägstrich vor ihnen hinzufügen.

Beispielsweise ist d kein Sonderzeichen. Allerdings wird \d verwendet, um ein Ziffernzeichen in einer Zeichenfolge abzugleichen. In ähnlicher Weise ist D auch kein Sonderzeichen, aber \D wird verwendet, um nicht-ziffrige Zeichen in einer Zeichenfolge abzugleichen.

Ziffernzeichen sind 0, 1, 2, 3, 4, 5, 6, 7, 8 und 9. Wenn Sie in einem regulären Ausdruck \d verwenden, wird jedes dieser zehn Zeichen gefunden. Wenn Sie in einem regulären Ausdruck \D verwenden, stimmt er mit allen nicht-ziffrigen Zeichen überein.

Im folgenden Beispiel sollten die Dinge klargestellt werden.

Beachten Sie, dass im dritten Fall nur das erste übereinstimmende Zeichen ersetzt wird. Sie können auch Flags verwenden, um alle Übereinstimmungen zu ersetzen. Wir werden später von solchen Flags hören.

Genau wie bei den Zeichen \d und \D gibt es auch andere Sonderzeichensequenzen.

  1. Sie können mittels \w jedes "Wort"-Zeichen in einer Zeichenfolge finden. Hier bezieht sich das Wortzeichen auf A-Z, a-z, 0-9 und _. Im Grunde also wird es mit allen Ziffern, allen Klein- und Großbuchstaben und dem Unterstrich übereinstimmen.
  2. Sie können mittels \W ein beliebiges Nicht-Wort-Zeichen in einer Zeichenfolge abgleichen. Es stimmt mit Zeichen wie %, $, #, ₹ usw. überein.
  3. Sie können \s verwenden, um mit einem einzelnen Leerzeichen übereinzustimmen, das Leerzeichen, Tabulator, Seitenvorschub und Zeilenvorschub umfasst. Ebenso können Sie \S verwenden, um alle anderen Zeichen außer Leerzeichen abzugleichen.
  4. Sie können auch nach einem bestimmten Leerraumzeichen suchen, indem Sie  \f, \n, \r, \t und \v verwenden, die für Formularvorschub, Linienvorschub, Wagenrückgabe, horizontale Registerkarte und vertikale Registerkarte stehen.

Manchmal werden Sie mit Situationen konfrontiert, in denen Sie ein Wort durch seinen Ersatz ersetzen müssen, aber nur, wenn es nicht Teil eines größeren Wortes ist. Betrachten Sie z. B. den folgenden Satz:

"A lot of pineapple images were posted on the app".

In diesem Fall möchten wir das Wort "app" durch "board" ersetzen. Die Verwendung eines einfachen regulären Ausdrucksmuster verwandelt "apple" jedoch in "boardle", und der letzte Satz würde:

"A lot of pineboardle images were posted on the app".

In solchen Fällen können Sie eine andere spezielle Zeichensequenz verwenden: \b. Dadurch werden Wortgrenzen überprüft. Eine Wortgrenze wird durch die Verwendung von Nicht-Wort-Zeichen wie Leerzeichen, "$", "%", "#", usw. gebildet. Aber aufgepasst – sie enthält auch akzentuierte Charaktere wie "ü".

In ähnlicher Weise können Sie \B verwenden, um eine Nicht-Wort-Grenze zu finden. Zum Beispiel könnten Sie \B verwenden, um "app" nur dann zu finden, wenn es innerhalb eines anderen Wortes steht, wie "pineapple".

"n"-maliges finden eines Musters

Sie können JavaScript mit Hilfe von ^ anweisen, nur am Anfang der Zeichenfolge nach einer Übereinstimmung zu suchen. In ähnlicher Weise können Sie mit $ nur am Ende der Zeichenfolge für eine Übereinstimmung zu suchen.

Sie können * verwenden, um den vorhergehenden Ausdruck 0 oder mehr Mal abzugleichen. Beispielsweise entspricht /Ap*/ A, Ap, App, Appp usw.

Auf ähnliche Weise können Sie + verwenden, um den vorhergehenden Ausdruck 1 oder mehr Mal abzugleichen. Beispielsweise entspricht /Ap+/ Ap, App, Appp usw. Der Ausdruck stimmt dieses Mal nicht mit dem einzelnen A überein.

Manchmal möchten Sie nur eine bestimmte Anzahl von Vorkommen eines bestimmten Musters abgleichen. In solchen Fällen sollten Sie die Zeichensequenz {n} verwenden, wobei n eine Zahl ist. Zum Beispiel, /Ap{2}/ wird App, aber nicht Ap übereinstimmen. Es wird auch die ersten beiden 'p's in Appp treffen und das dritte unberührt lassen.

Sie können mit dem Befehl {n,} um mindestens 'n'-Vorkommen eines bestimmten Ausdrucks abzugleichen. Dies bedeutet, dass /Ap{2,}/ mit App, aber nicht mit Ap übereinstimmt. Es wird auch alle 'p's in Apppp treffen und ersetzen sie mit Ihrem Ersatz-String.

Sie können auch {n,m} verwenden, um die Mindest- und Höchstzahl anzugeben und die Häufigkeit zu begrenzen, mit der der angegebene Ausdruck abgeglichen werden soll. Beispielsweise trifft /Ap{2,4}/  App, Appp und Apppp. Es wird auch die ersten vier 'p's in Apppppp treffen und den Rest von ihnen unberührt lassen.

Verwenden von Klammern zum Merken von Übereinstimmungen

Bisher haben wir Muster nur durch eine konstante Zeichenfolge ersetzt. Im vorherigen Abschnitt war der von uns verwendete Ersatz beispielsweise immer "Add". Manchmal müssen Sie innerhalb der angegebenen Zeichenfolge nach einer Musterübereinstimmung suchen und sie dann durch einen Teil des Musters ersetzen.

Angenommen, Sie müssen ein Wort mit fünf oder mehr Buchstaben in einer Zeichenfolge finden und dann ein "s" am Ende des Wortes hinzufügen. In solchen Fällen können Sie keinen konstanten Zeichenfolgenwert als Ersetzung verwenden, da der endgültige Wert vom übereinstimmenden Muster selbst abhängt.

Dies war ein einfaches Beispiel, aber Sie können die gleiche Technik verwenden, um mehr als ein übereinstimmendes Muster im Arbeitsspeicher zu behalten. Die Anzahl der Untermuster in der vollständigen Übereinstimmung wird durch die Anzahl der verwendeten Klammern bestimmt.

Innerhalb der Ersatzzeichenfolge wird die erste Unterübereinstimmung mit $1 identifiziert, die zweite Unterübereinstimmung wird mit $2 identifiziert usw. Hier ist ein weiteres Beispiel, um die Verwendung von Klammern weiter zu klären.

Verwenden von Flags mit regulären Ausdrücken

Wie ich bereits in der Einleitung erwähnt habe, ist ein weiterer wichtiger Bestandteil regulärer Ausdrücke die Verwendung spezieller Flags, um die Art und Weise zu ändern, wie eine Suche durchgeführt wird. Die Flags sind optional, aber Sie können sie verwenden, um Dinge wie eine globale Suche oder die Groß-/Kleinschreibung zu ignorieren.

Dies sind die vier häufig verwendeten Flags, um zu ändern, wie JavaScript eine Zeichenfolge durchsucht oder ersetzt.

  • g: Dieses Flag führt eine globale Suche durch, anstatt nach der ersten Übereinstimmung zu beenden.
  • i: Dieses Flag führt eine Suche durch, ohne nach einer genauen Schreibweisenübereinstimmung zu suchen. Beispielsweise werden Apple, aPPLe und apPLE bei der Suche nach nicht in Bezug auf ihre Groß-/Kleinschreibung behandelt.
  • m: Dieses Flag führt eine mehrzeilige Suche durch.
  • y: Dieses Flag sucht nach einer Übereinstimmung im Index, der durch die lastIndex-Eigenschaft angegeben wird.

Im Folgenden finden Sie einige Beispiele für reguläre Ausdrücke, die mit Flags verwendet werden:

Letzte Gedanken

Das Ziel dieses Tutorials war es, Sie in reguläre Ausdrücke in JavaScript und deren Bedeutung einzuführen. Wir haben mit den Grundlagen begonnen und dann Backslash und andere Sonderzeichen behandelt. Wir haben auch gelernt, wie man nach einem sich wiederholenden Muster in einer Zeichenfolge sucht und wie teilübereinstimmende Übereinstimmungen in einem Muster verwendet werden, um sie später zu verwenden.

Schließlich lernten wir häufig verwendete Flags kennen, die reguläre Ausdrücke noch mächtiger machen. Weitere Informationen zu regulären Ausdrücken finden Sie in diesem Artikel auf MDN.

Wenn es etwas gibt, das Sie möchten, dass ich in diesem Tutorial klarstellen, zögern Sie nicht, es mich in den Kommentaren wissen zu lassen.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.