Reguläre Ausdrücke – Regex – mit Javascript

Javascript Regex für Javascript Zeigt einen Comic-Fluch mit Sonderzeichen

Reguläre Ausdrücke prüfen Benutzereingaben, stellen fest, ob eine Zeichenkette eine Emailadresse sein könnte und verhindern, dass Benutzer HTML-Tags in das Eingabefeld eines Formulars schreiben.

Regex sind eine Enklave: eine eigene kleine Programmiersprache, die in andere Programmiersprachen integriert ist und aussieht, als wäre die Tastatur falsch verdrahtet.

Reguläre Ausdrücke stehen in Schrägstrichen /auto/ und nicht in Hochkommas "auto" und 'auto', die ganz normale Strings eingrenzen.

Syntax

Die literale Schreibweise ist

let regex = /ab+c/ig;

Wird Regex als Javascript-Objekt aufgerufen, sitzt der reguläre Ausdruck in Hochkommas:

let regex = new RegExp ("ab+c", "ig");

Regex Pattern – Muster

Das literale Suchmuster mit den Schrägstrichen ist fast immer schneller, also bleiben wir erst mal bei den schrägen Schrägstrichen. Ein einfaches Suchmuster besteht aus drei Teilen:

/Suchmuster/Modifier 

/auto/gi 
  • Zwei Schrägstriche grenzen das Suchmusters ein (so wie Hochkommas einen String begrenzen).
  • Das Suchmuster (auto) selbst bildet den Hauptteil.
  • Nach dem schliessenden Begrenzer folgen optionale »Modifier«.

Modifier

Die optionalen Modifier g, i und m stehen direkt und ohne Leerzeichen nach dem schließenden Schrägstrich.

  • Der Modifier »i« hebt die Unterscheidung von Groß-/Kleinschreibung auf. Hier wird also nach Auto und auto gesucht.
  • Mit dem Modifier »g« wird der String auf alle Vorkommen von Auto und auto und AUTO und AUto … durchsucht.
  • m multiline – seit Javascript 1.5

Regulären Ausdruck testen

Der Aufruf von match, replace, search oder split mit einem regulären Ausdruck ist erst mal nicht komplizierter als der Aufruf mit einem einfachen String. Nur das Zusammenstellen eines Regex-Musters führt zu Stottern und Knoten im Kopf.

Emma: Ich glaube, ich habe ein Problem und brauche einen regulären Ausdruck.
Dirk: Jetzt hast du zwei Probleme.

Die meisten Zeichen sind bereits ein Suchmuster für sich. /auto/ sucht nach dem String auto – das ist so wunderbar banal. Durch die Sonderzeichen für Anfang und Ende des Strings findet /^Matrix$/ »Matrix« in einem String, der genau »Matrix« und nicht mehr und nicht weniger enthält.

Mit weiteren Sonderzeichen wird das Muster enger oder allgemeiner gefasst. Wortgrenzen, Ziffern, Weißraum – für alles, war in einem String stehen kann, gibt es Sonderzeichen.

Reguläre Ausdrücke: Einführung und Liste der Sonderzeichen

Ob ein Muster oder Pattern den gewünschten String finden kann, lässt sich in der Console des Browsers testen.

> /auto/.test("Automobile")
  false
> /auto/i.test("Automobile")
  true

Darüber hinaus: Ob die Syntax des Musters Regular Expressions auf regex101.com in Javascript, PHP, Python korrekt ist.

match(): Strings vergleichen

Javascript match() durchsucht einen String nach allen Vorkommen des Musters und gibt ein Array mit den Treffern zurück oder null, wenn das Pattern nicht gefunden wird.

Findet alle Zahlen mit mehr als 3 Stellen nach dem Punkt:

let regex = /[0-9]+\.\d{4,}/g;

if (simpleString.match(regex)) {
    let treffer = simpleString.match(regex);
    text.innerHTML = treffer.length + " Treffer: " + treffer;
} else {
    text.innerHTML = 'Nicht enthalten';
}

In der Console des Browsers testen:

"11.27586 oder 13.23 + 17.010001 mit 283.0 und 15.1457863".match(/[0-9]+\.\d{4,}/g);

replace: Suchen und Ersetzen

Die String-Methode replace(r, s) ersetzt alle Vorkommen eines Strings oder regulären Ausdrucks r durch den String s im zweiten Parameter und gibt den geänderten String zurück.

let newString = simpleString.replace(/\bTor\w*/gi, "Tür");

ersetzt alle Zeichenketten im String simpleString, die mit Tor oder tor anfangen, durch "Tür".

Javascript stripTags gibt's nicht …

stripTags ist eine nützliche PHP-Funktion, die ausgerechnet in Javascript nicht existiert. stripTags extrahiert alle HTML-Tags aus einem String.

Eigentlich soll man ja keine regulären Ausdrücke verwenden, um HTML zu verarbeiten (denn HTML ist keine reguläre Sprache! und außerdem ist die HTML-Grammatik viel zu komplex) …

String.prototype.stripTags = function() {
   let matchTag = /<(?:.|\s)*?>/g;
   return this.replace(matchTag, "");
};
	
let main = document.getElementById("main");
let strippedText = main.innerHTML.stripTags();

und wenn Javscript alle HTML-Tags außer img entfernen soll

html.replaceAll('(?i)<(?!img|/img).*?>', '');

split: String zu Array

split(r) teilt eine Zeichenkette anhand des Suchmusters r in Substrings und gibt ein Array zurück. Das Suchmuster (pattern) bildet beim Aufruf von split() das Trennzeichen, das bei der Operation aus dem String entfernt wird.

                            /:|,|#/g
                            ^^^^^^^^
                            ||||||||
            Begrenzer ------+|||||||
Suchmuster Doppelpunkt ------+||||||
                   oder ------+|||||
        Suchmuster Komma ------+||||
                     oder ------+|||
  Suchmuster  Hash-Zeichen ------+||
                  Begrenzer ------+|
   global im gesamten String ------+

Hier sollen die Elemente anhand des Doppelpunkts durch ein Komma ersetzt werden.

let treffer = simpleString.split(/:|,|#/g);
console.log(treffer);
	
Ausgabe: Donald Duck,,Micky Mouse,Popey der Seemann,Lucky Luke

Das doppelte Komma nach »Donald Duck« ist ein leeres Array-Element, das durch den doppelten Doppelpunkt nach »Donald Duck« entsteht. split() ist z.B. beim Import CVS-Dateien die Methode der Wahl.

Suchen und Tauschen

Reguläre Ausdrücke sind schon eine Kunst – Regex mit Backreference oder Rückverweis sind Schwarze Kunst. Wenn Zeichenketten getauscht werden, z.B. bei einem Datum im ISO-Format (Jahr-Monat-Tag) zu einem Datum, wie wir es gewohnt sind: Tag Monat Jahr, bilden runde Klammern um einen Ausdruck Gruppen.

regex.exec (str) gibt drei Gruppen zurück.

let match = /^([0-9]{4})-([0-9]{2})-([0-9]{2})$/.exec(str);

console.log('Jahr: '  + match[1]);
console.log('Monat: ' + match[2]);
console.log('Tag: '   + match[3]);    
! * / \ ^ $ + REGEX