Reguläre Ausdrücke

Reguläre Ausdrücke sind Muster, die eingesetzt werden, um Text auf bestimmte Zeichenkombinationen zu überprüfen. Auch reguläre Ausdrücke sind Objekte bei JavaScript. Die Muster werden mit den Methoden exec und test von RegExp und den Methoden match, replace, search und split von String verwendet. Dieses Kapitel beschreibt reguläre Ausdrücke in JavaScript.

Erstellen von regulären Ausdrücken

Ein regulärer Ausdruck kann auf zwei verschiedene Arten erstellt werden.

Zum einen kann ein Literal verwendet werden:

var re = /ab+c/;

Hierbei findet die Kompilierung des regulären Ausdrucks während der Auswertung des Skripts statt. Wenn der reguläre Ausdruck konstant bleibt, ist diese Vorgehensweise aufgrund der schnelleren Ausführungsgeschwindigkeit empfehlenswert.

Zum anderen kann wie folgt die Konstruktorfunktion des Objekts RegExp zum Einsatz kommen:

var re = new RegExp("ab+c");

Bei der Benutzung der Konstruktorfunktion wird der reguläre Ausdruck während der Laufzeit kompiliert. Sie sollte verwendet werden, wenn man weiß, dass sich das Muster während der Laufzeit ändert oder man das Muster noch nicht kennt und von einer anderen Quelle, wie z. B. der Benutzereingabe, bezieht.

Schreiben von Mustern für reguläre Ausdrücke

Ein Muster eines regulären Ausdrucks wird aus einfachen Zeichen, wie z. B. /abc/ oder einer Kombination von einfachen und speziellen Zeichen, wie z. B. /ab*c/ oder /Kapitel (\d+)\.\d*/ erstellt. Das letzte Beispiel enthält Klammern, die zur Speicherung verwendet werden. Die Übereinstimmung im Text, welche auf das eingeklammerte Muster passt, wird hierbei für die spätere Verwendung hinterlegt, wie unter Benutzung von geklammerten Mustern beschrieben.

Verwendung von einfachen Mustern

Einfache Muster werden aus Zeichen konstruiert, für die man eine direkte Übereinstimmung finden möchte. Zum Beispiel passt das Muster /abc/ nur dann für eine Zeichenkette, wenn exakt die Zeichen "abc" aufeinanderfolgend in dieser Reihenfolge vorkommen. Solch eine Übereinstimmung kommt z. B. in der Zeichenkette "Hallo, kennst du das abc?" und "Das müssen wir noch abchecken." vor. In beiden Fällen enthält die Zeichenkette die Zeichenfolge "abc". In der Zeichenkette "Stab" gibt es keine Übereinstimmung, weil die Zeichenfolge "abc" darin nich vorkommt.

Verwendung von speziellen Zeichen

Wenn bei der Suche nicht nur nach einer direkten Übereinstimmung, sondern z. B. nach einem oder mehreren aufeinanderfolgenden Vorkommen des Buchstabens "b" oder nach Leerräumen (sowohl Tabulator, Leerzeichen als auch Steuerzeichen) gesucht wird, kommen spezielle Zeichen zum Einsatz. Zum Beispiel stimmt das Muster /ab*c/ mit allen Zeichenkombinationen überein, die ein "a", dann sofort nachfolgend 0 oder mehrere "b" (Das Sternchen bedeutet: 0 oder mehr Vorkommen des vorherigen Zeichens) und anschließend sofort ein "c" enthalten. Demnach wird in der Zeichenfolge "cbbabbbbcdebc" eine Übereinstimmung gefunden, weil das Muster auf die Zeichenfolge "abbbbc" passt.

Die folgende Tabelle zeigt eine komplette Liste der speziellen Zeichen, die in regulären Ausdrücken verwendet werden, mit einer Beschreibung zu deren Bedeutung.

Das  Escapen von Benutzereingaben in einem Stringliteral eines regulären Ausdrucks kan durch folgende Ersetzung  getan werden:

function escapeRegExp (string) {
    return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& meint den komplett erkannten String
}

Benutzung von Klammern

Klammern werden verwendet, um den eingeklammerten Teil des regulären Ausdrucks zu speichern. Einmal gespeichert kann dieser Teil an anderer Stelle wieder eingesetzt werden, wie unter Benutzung von geklammerten Mustern beschrieben.

Zum Beispiel beinhaltet der Ausdruck /Kapitel (\d+)\.\d*/ einige maskierte und spezielle Zeichen. Mit den Klammern wird bewirkt, dass die Zeichen, welche mit dem eingeklammerten Muster übereinstimmen, gespeicert werden. Der Ausdruck stimmt genau mit der Zeichenkette "Kapitel " gefolgt von einer oder mehreren Ziffern (\d steht für eine Ziffer und das + (Pluszeichen) bedeutet 1 oder mehr Vorkommen), einem Punkt (der Punkt selbst ist standardmäßig ein spezielles Zeichen, weshalb er maskiert werden muss) und nochmal beliebig vielen Ziffern (\d steht für eine Ziffer und der Stern bedeutet 0 oder mehr Vorkommen) überein. Zusätzlich werden die Klammern eingesetzt, um die erste Ziffer zu speichern.

Eine Übereinstimmung wird z. B. in "Offenes Kapitel 4.3, Absatz 6" gefunden und dabei wird "4" gespeichert. Auf die Zeichenkette "Kapitel 3 und 4" passt der Ausdruck nicht, weil hinter der ersten Ziffer "3" kein Punkt steht.

Möchte man einen zusammenhängenden Teil einer Zeichenkette suchen, jedoch nicht speichern, setzt man ?: an den Anfang innerhalb der Klammern. Zum Beispiel stimmt (?:\d+) mit einer oder mehr Ziffern überein, aber diese Ziffern werden nicht gespeichert.

Arbeiten mit regulären Ausdrücken

Reguläre Ausdrücke werden mit den Methoden exec und test von RegExp und den Methoden match, replace, search und split von String verwendet. Diese Methoden sind in der JavaScript Referenz beschrieben.

Wenn man nur wissen möchte, ob ein regulärer Ausdruck auf eine Zeichenkette passt, sollten die Methoden test oder search zum Einsatz kommen. Möchte man mehr erfahren, sollte man auf die Methoden exec oder match zurückgreifen (langsamere Ausführsgeschwindigkeit). Die Methoden exec und match geben ein Array zurück falls Übereinstimmungen gefunden werden und updaten die Eigenschaften des zugehörigen RegExp-Objekts und des vordefinierten RegExp-Objekts. Wenn keine Übereinstimmungen gefunden werden, geben die Methoden null (konvertiert: false) zurück.

Bei fogendem Beispiel kommt die Methode exec zum Einsatz, um eine Übereinstimmung in einer Zeichnkette zu finden.  

var myRe = /d(b+)d/g;
var myArray = myRe.exec("cdbbdbsbz");

Wenn man auf die Eingenschaften des Objekts für den regulären Ausdruck nicht zugreifen möchte, kann man myArray auch direkt wie folgt erzeugen:

var myArray = /d(b+)d/g.exec("cdbbdbsbz");  // äquivalent zu "cdbbdbsbz".matche(/d(b+)d/g);

Möchte man den regulären Ausdruck aus einem String erzeugen, besteht folgende Möglichkeit:

var myRe = new RegExp("d(b+)d", "g");
var myArray = myRe.exec("cdbbdbsbz");

Bei diesen Skripten werden Übereinstimmungen gefunden. Es wird ein Array zurückgegeben und die Eigenschaften geupdatet, welche in der nachstehenden Tabelle aufgelistet sind.

Wie das zweite Beispiel zeigt, kann man einen regulären Ausdruck einsetzen, der über einen Objekt-intializer erstellt wurde, ohne die Zuweisung einer Variablen. Bei dieser Vorgehensweise ist jede Übereinstimmung ein neuer Ausdruck. Aus diesem Grund kann nicht auf die Eigenschaften dieses regulären Ausdrucks zugegriffen werden. Angenommen man hat z. B. dieses Skript:

var myRe = /d(b+)d/g;
var myArray = myRe.exec("cdbbdbsbz");
console.log("Der Wert von lastIndex ist " + myRe.lastIndex);

Dann ist die Ausgabe:

Der Wert von lastIndex ist 5

Hat man nun aber dieses Skript:

var myArray = /d(b+)d/g.exec("cdbbdbsbz");
console.log("Der Wert von lastIndex ist " + /d(b+)d/g.lastIndex);

Dann ist die Ausgabe:

Der Wert von lastIndex ist 0

Die einzelnen Vorkommen der Zeichenfolgen, die mit /d(b+)d/g übereinstimmen sind bei den beiden Anweisungen verschiedene Objekte und haben dementstrechend auch verschiedene Werte bei der jeweiligen Eigenschaft lastIndex. Falls man auf die Eigenschaften eines Objekts eines regulärenAusdrucks zugreifen möchte, sollte man diesen vorher einer Variablen zuweisen.

Benutzung von geklammerten Mustern

Klammern werden verwendet, um einen Teil der Zeichen, die mit dem regulären Ausdruck übereinstimmen, zu speichern. Zum Beispiel stimmt /a(b)c/ mit der Zeichenfolge "abc" überein und "b" wird gespeichert. Um die gespiecherten Zeichen wieder abzurufen, verwendet man die Array-Elemente [1], ..., [n].

Die Anzahl der möglichen speicherbaren Teile ist nicht limitiert. Das Array, welches zurückgegeben wird, enthält alle gespeicherten Übereinstimmungen. Die folgenden Beispiele zeigen auf, wie man geklammerte Muster einsetzt.

Beispiel 1

Das folgende Skript benutzt die Methode replace(), um Wörter in einer Zeichenkette auszutauschen. Die beiden Muster für die Wörter (\w+) wurden geklammert, damit die Wörter gespeichert werden. Anschließend werden im Ersetzungstext diese gespeicherten Wörter mit $1 und $2 wieder eingesetzt.

var re = /(\w+)\s(\w+)/;
var str = "Jonas Schmidt";
var newstr = str.replace(re, "$2, $1");
console.log(newstr);

Die Ausgabe ist "Schmidt, Jonas".

Erweiterte Suche mit Optionen (Flags)

Reguläre Ausdrücke kennen vier verschiedene Optionen (Flags), die es z. B. erlauben global nach Übereinstimmungen zu suchen oder die Berücksichtigung der Groß- und Kleinschreibweise zu deaktivieren. Zur Aktivierung der globalen Suche wird das Flag g eingesetzt. Die Berücksichtigung der Groß- und Kleinschreibweise (engl. case-insensitive ) wird mit dem Flag i abgeschaltet. Die mehrzeilige Suche (engl. multiline) wird mit dem Flag m aktiviert und eine "sticky" Suche, wobei die Übereinstimmung an der aktuellen Postion im Eingabe-Zeichenkette zutreffen muss, wird mit dem Flag y aktiviert. Diese Optionen können getrennt oder gemeinsam verwendet und in beliebiger Reihenfolge angegeben werden. Die Buchsaben werden einfach an den regulären Ausdruck angehängt.

Syntax für die Verwendung von Optionen:

var re = /Muster/Optionen;

oder

var re = new RegExp("Muster", "Optionen");

Die Optionen sind ein integraler Bestandteil des regulären Ausdrucks. Sie können nicht im Nachhinein entfernt oder hinzugefügt werden.

Zum Beispiel wird mit re = /\w+\s/g ein regulärer Ausdruck erstellt, der auf ein oder mehr Zeichen, gefolgt von einem Leerraum, passt. Nach diesem Muster wird über die ganze Zeichenkette hinweg gesucht.

var re = /\w+\s/g;
var str = "fee fi fo fum";
var myArray = str.match(re);
console.log(myArray);

Hier ist die Ausgabe: ["fee ", "fi ", "fo "]. Bei diesem Beispiel könnte man die Zeile:

var re = /\w+\s/g;

mit folger austauschen:

var re = new RegExp("\\w+\\s", "g");

und würde dasselbe Ergebnis erhalten.

Die Option m sorgt dafür, dass eine mehrzeilige Eingabe auch als solche interpretiert wird. Wird die Option m angegeben, passen die speziellen Zeichen ^ und $ auf den Anfang oder das Ende jeder Zeile der Eingabe, anstatt nur auf den Anfang und das Ende der gesamten Eingabe.

Beispiele

Das folgende Beispiel zeigt einige Einsatzmöglichkeiten von regulären Ausdrücken.

Ändern der Reihenfolge in einer Zeichenkette

Das folgende Beispiel veranschaulicht die Anordnung von regulären Ausdrücken und die Verwendung der Methoden string.split() und string.replace(). Im Beispiel wird eine schlecht formatierte Eingabe mit Personennamen (Vorname zuerst), die durch Leerzeichen, Tabulatoren und exakt ein Semikolon getrennt sind, bereinigt. Außerdem wird die Reihenfolge des jeweiligen Namens herumgedreht (Nachname zuerst) und die Liste nach Nachnamen sortiert.

// Die Zeichenkette beinhaltet mehrere Leerzeichen und Tabulatoren
// und könnte mehrere Leerzeichen zwischen vor und Nachnamen enthalten.

var names = "Lieschen Müller ;Erika Mustermann; Michel Deutscher ; Otto Normalverbraucher ; ";

var output = ["---------- Original String\n", names + "\n"];

// Erstellen von zwei regulären Ausdrücken und eines Arrays.
// Die Eingabe-Zeichenkette wird in Array-Elemente zerlegt.

// Muster: Möglicherweise ein Leerraum, dann ein Semikolon
// und möglicherweise nochmal ein Leerraum (0 oder mehr).
var pattern = /\s*;\s*/;

// Splitten der Zeichnkette in einzelne Teile anhand des Musters und
// speichern der Teile in einem Array mit Namen nameList.
var nameList = names.split(pattern);

// Neuer regulärer Ausdruck: ein oder mehr alphanumerische Zeichen,
// dann mindestens ein Leerraum und nochmal mindestens ein Wortzeichen.
// Klammern zum Speichern; Rückgriff auf gespeicherte Teile später.
pattern = /(\w+)\s+(\w+)/;

// Neues Array zum Speichern der bearbeiteten Namen.
var bySurnameList = [];

// Anzeigen des Arrays und befüllen des neuen Arrays
// mit durch Komma getrennten Namen (Nachname zuerst).
// Die Methode replace() entfernt alles, was mit dem Muster übereinstimmt
// und ersetzt es durch den an zweiter Stelle angegebenen String,
// bestehend aus den gespeichrten Teilen.
// Zuerst wird der zweite Teil ($2) eingesetzt und anschließend durch Komma
// und Leerzeichen getrennt der erste Teil ($1).

output.push("---------- Nach Teilung durch regulären Ausdruck");

var i, len;
for (i = 0, len = nameList.length; i < len; i++){
  output.push(nameList[i]);
  bySurnameList[i] = nameList[i].replace(pattern, "$2, $1");
}

// Anzeigen des neuen Arrays.
output.push("---------- Namen reserviert");
for (i = 0, len = bySurnameList.length; i < len; i++){
  output.push(bySurnameList[i]);
}

// Sortieren anhand des Nachnamens und anzeigen des neuen Arrays.
bySurnameList.sort();
output.push("---------- Sortiert");
for (i = 0, len = bySurnameList.length; i < len; i++){
  output.push(bySurnameList[i]);
}

output.push("---------- End");

console.log(output.join("\n"));

Benutzung von speziellen Zeichen zur Verifizierung von Eingaben

Beim nachstehenden Beispiel wird der Benutzer aufgefordert, eine Telefonnumer einzugeben. Wenn der Benutzer den "Prüfen"-Button drückt, überprüft das Skript die Validität der Nummer. Sofern dann sichergestellt ist, dass es sich um eine Telefonnummer handelt (die Eingabe stimmt mit dem Muster des regulären Ausdrucks überein), zeigt das Skript eine Nachricht, um dem Benutzer zu danken und die Nummer zu bestätigen. Wenn die Nummer nicht valide ist (nicht mit dem Muster des regulären Ausdrucks übereinstimmt), wird der Benutzer ebenfalls mit einer Nachricht darüber informiert.

Das Muster des reguläre Ausdruck setzt sich folgendermaßen zusammen: Keine oder eine öffnende Klammer, \(?, gefolgt von drei Ziffern \d{3}, gefolgt von keiner oder einer schließenden Klammer \)?, gefolgt von einem Bindestrich, Schrägstrich, oder Punkt (falls vorhanden wird das Zeichen gespeichert) ([-\/\.]), gefolgt von drei Ziffern \d{3}, gefolgt (falls vorhanden) von dem gespeicherten Zeichen (Bindestrich, Schrägstrich oder Punkt) \1, gefolgt von vier Ziffern \d{4}.

Das Event Change wird ausgelöst, wenn der Benutzer die Enter-Taste drückt, um die Eingabe (den Wert für RegExp.input) zu bestätigen.

<!DOCTYPE html>
<html>  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
    <meta http-equiv="Content-Script-Type" content="text/javascript">  
    <script type="text/javascript">  
      var re = /\(?\d{3}\)?([-\/\.])\d{3}\1\d{4}/;  
      function testInfo(phoneInput){  
        var OK = re.exec(phoneInput.value);  
        if (!OK)  
          window.alert(RegExp.input + " ist keine Telefonnummer mit Vorwahl!");  
        else
          window.alert("Danke! Ihre Telefonnummer ist " + OK[0]);  
      }  
    </script>  
  </head>  
  <body>  
    <p>Bitte ihre Telefonnumer (mit Vorwahl) eingeben und den "Prüfen"-Button anklicken.
        <br>Das Format ist z.B. ###-###-####.</p>
    <form action="#">  
      <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Prüfen</button>
    </form>  
  </body>  
</html>