Javascript Suchen und Ersetzen mit regulären Ausdrücken – Regex

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

// Mehrere Leerzeichen durch ein Leerzeichen ersetzen
text = text.replace(/\s+/g, " ");

Hier wird \s+ direkt als Whitespace interpretiert. Wird Regex allerdings als Javascript-Objekt aufgerufen, sitzt der reguläre Ausdruck in Hochkommas:

new RegExp("\\s+", "g")

Hier wäre "\s" ungültig, erst "\\s" ergibt \s im regulären Ausdruck.

Beispiel: HTML-Tags vereinheitlichen und <b> durch <strong> ersetzen:

html = html.replace(/<b>(.*?)<\/b>/g, "<strong>$1</strong>");

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«.

Ganz kurz: Was zählt als Buchstabe?

Aber keine Zahlen, keine Emojis, keine Satzzeichen, keine Leerzeichen.

Groß- oder Kleinschreibung, alles durchsuchen: Modifier g und i, Unicode

Die optionalen Modifier stehen direkt und ohne Leerzeichen nach dem schließenden Schrägstrich. Modifier sind der intuitivste Teil von regulären Ausdrücken. Sie legen globale Änderungen über den gesamten regulären Ausdruck.

In Javascript gibt es gut ein halbes Dutzend Modifier:

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.

const el = document.querySelector("#text");
el.textContent.replace(/Word[Pp]ress/g, "Joomla");

ersetzt alle Zeichenketten WordPress oder Wordpress durch "Joomla".

const el = document.querySelector("#text");

document.querySelector("#replace").addEventListener("click", () => {
	el.textContent = el.textContent.replace(/Word[Pp]ress/gi, "Joomla");
}, { once: true });

Obwohl der Modifier /i (ignore case) sagt, dass Groß- und Kleinschreibung keine Rolle spielt, sollte hier die [Pp]-Variante bevorzugt werden – sie ist kontrollierter.

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.

el.textContent = el.textContent.replaceAll(/Word[Pp]ress/g, "Joomla");

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]);