JavaScript-Syntax für reguläre Ausdrücke
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 wie "auto" oder 'auto', die ganz normale Strings abgrenzen.
Die literale Schreibweise ist
let regex = /ab+c/ig;
Wird Regex allerdings als Javascript-Objekt aufgerufen, sitzt der reguläre Ausdruck in Hochkommas:
let regex = new RegExp ("ab+c", "ig");
Beispiel: Teile eines Strings mit regulärem Ausdruck ersetzen, wobei die beiden Ziffernfolgen variieren können:
Ergebnis:
Weil Schrägstriche in regulären Ausdrücken in JavaScript Delimiter (Begrenzer) sind, müssen sie durch einen Rückwärts-Schrägstrich »escaped« (maskiert) werden, damit sie als normale Zeichen interpretiert werden.
const url = document.querySelector ("#regurl").textContent;
const regex = /\/wp-content\/uploads\/\d+\/\d+\//;
const newurl = url.replace(regex, "");
document.querySelector ("#regexResult").textContent = newurl;
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 (global), i (ignore case) und m (multi) 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
replace: Suchen und Ersetzen
Die String-Methode replace(r, s) ersetzt einen String oder regulären Ausdrucks r durch den String s im zweiten Parameter und gibt den geänderten String zurück. Damit alle Zeichenketten r im String ersetzt werden, muss der Modifier g angehangen werden. Der Modifier i (ignore) ersetzt ohne Rücksicht auf Groß- und Kleinschreibung.
let newString = simpleString.replace(/\bTor\w*/gi, "Tür");
ersetzt alle Zeichenketten im String simpleString, die mit Tor oder tor anfangen, durch "Tür".
Obwohl der Modifier /i (ignore case) sagt, dass Groß- und Kleinschreibung keine Rolle spielt, wird tor in Fußballtor nicht ersetzt, weil \b fordert, dass der Suchbegriff Tor am Anfang des Treffers liegen muss, an der Wortgrenze.
Derartige Eingrenzungen vermeiden False Positives, also falsche Treffer.
ReplaceAll
Einfacher und intuitiver als das Suchen und Ersetzen mit einem regulären Ausdruck ist replaceAll. replaceAll ist mit ES2021 in Javascript aufgenommen worden, ist in allen modernen Browsern implementiert, aber nicht in IE11.
test ()
Eine Reihe von String-Methoden kann mit einem regulären Ausdruck anstelle eines einfachen Strings arbeiten. /regex/.test (stg) ist speziell für die Suche mit einem regulären Ausdruck gedacht und prüft, ob der reguläre Ausdruck /regex/ im Text vorkommt. test() gibt true oder false zurück.
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. regexr testet des regulären Ausdruck und liefert gleich eine Erklärung dazu.
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);
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]);
