Javascript String replace() – Suchen und Ersetzen

Javascript replace()

In der einfachsten Variante sucht replace(a,b) einen Zeichenfolge a in einem String und ersetzt ihn durch die Zeichenfolge b. Der Original-String bleibt erhalten und der Rückgabewert enthält den veränderten String.

let oldstring = "Ersetze a duch b";
let newstring = oldstring.replace("a","b");

let str = document.querySelector(".rep1").innerHTML;
let result = str.replace("Nähkurs","WordPress-Kurs");
document.querySelector(".rep1").innerHTML = result;

ersetzt das erste Vorkommen von Nähkurs im String.

Modifier: Ersetzen im ganzen String, bei Groß- und Kleinschreibung

Reguläre Ausdrücke stehen nicht in Hochkommas, sondern in Schrägstrichen: /Nähkurs/ und sie können durch die Modifier g und i erweitert werden.

• Ein g (für global) hinter dem schließenden Schrägstrich durchsucht und ersetzt alle Vorkommen des Suchmusters.
• Das i (case insensitiv) hinter dem schließenden Schrägstrich hebt den Unterschied zwischen Groß- und Kleinbuchstaben auf.

let str = document.querySelector(".repAll").innerHTML;
let result = str.replace(/Nähkurs/gi,"WordPress-Kurs");
document.querySelector(".repAll").innerHTML = result;

String replace mit regulären Ausdrücken

Wenn der reguläre Ausdruck lang und kompliziert wird, kann er direkt einer Variablen zuwiesen werden.

// Findet alle Zahlen mit mehr als 3 Stellen hinter dem Punkt
let regex = /[0-9]+\.\d{4,}/ig;
let text = document.querySelector(".zif").innerHTML;
let result = text.replace (regex,"***");

replaceAll

Wenn alle Vorkommen der Zeichenkette a durch b ersetzt werden sollen oder Groß- und Kleinschreibung eine Rolle spielen, ist replaceAll die einfachere Lösung.

replaceAll ist mit ES2021 hinzugekommen und erspart uns die Abgründe der regulären Ausdrücke.

const tor = "Ein Torwart namens Torsten steht im Fußballtor";

const torReplaced = tor.replaceAll("Tor", "Tür");
console.log(torReplaced); // Ein Türwart namens Türsten steht im Fußballtor

String replace mit Backreference

Noch wirkungsvoller sind reguläre Ausdrücke beim Suchen und Ersetzen, wenn eine Backreference (Rückverweis) eingesetzt wird. Die Backreference in regulären Ausdrücken ist eine besondere Variable, die automatisch zum Speicher eines Ausdrucks in runden Klammern wird.

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

([0-9]+) findet genauso wie [0-9]+ alle Folgen von Ziffern, aber die runden Klammern erzeugen automatisch eine Variable $1, der in der Ersetzung verwendet werden kann.

let regex = /([0-9]+)\.\d{4,}/g;
let result = text.replace (regex,"$1");

Klammern ersetzen

Klammern rund um ein Wort oder einen Begriff entfernen bzw. ersetzen:

(function () {
   let repit = document.querySelector("#repit").innerHTML;
   let newstring = repit.replace(/\[+([^\][]+)]+/g,"<span class='foo'>$1</span>");
   console.log ("newstring " + newstring);
})();

Heute und an allen <span class='foo'>anderen und folgenden</span> Tagen

Eckige Klammern müssen außerhalb einer Zeichenklasse nicht escaped werden, denn sie gehören nicht zu den Sonderzeichen.

[^\][]+ verbietet die Klammern, am Ende das /g für global nicht vergessen!

Strings tauschen mit replace

                  $1     $2        $3
                  |      |         |
let regex = /(Nähkurse)(.*)(WordPress-Kurse)/i;
let result = swap.replace(regex,"$3 $2 $1");

Der Ersetzungs-String tauscht die Postion der Fundstellen.