Javascript String replace() – Suchen und Ersetzen

replace() sucht und ersetzt einen Teil oder Teile von Strings anhand eines Suchmusters (pattern). Der Original-String wird nicht verändert, sondern die Methode replace() gibt das Ergebnis der Ersetzung zurück. Der Suchstring kann ein einfacher String, ein regulärer Ausdruck oder eine Funktion sein.

Javascript String Replace

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

Freitags findet kein Nähkurs statt, aber Samstags gibt es gleich zwei Nähkurse.

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.

Freitags findet kein Nähkurs statt, aber Samstags gibt es gleich zwei nähkurse.

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,"***");
<text id="text4293" y="340.26246" x="9182.7002">Hinweis</text>

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.

<text id="text4293" y="340.26246" x="9182.7002">Hinweis</text>
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:

Heute und an allen [anderen und folgenden] Tagen
(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

Nähkurse finden immer Donnerstags, Wordpress-Kurse immer Montags statt.

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

Suchen auf mediaevent.de