Javascript String replace() – Suchen und Ersetzen

Replace String; Zeichenketten, Zeichen ersetzen mit replace

Javascript String replace() sucht und ersetzt einen Teil oder Teile von Zeichenketten 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 oder ein regulärer Ausdruck sein.

Die Ersetzung kann ein einfacher String oder eine Funktion sein.

Javascript replace()

In der einfachsten Variante sucht Javascript replace(a,b) einen Text a in einem String und ersetzt ihn durch Text 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. Wenn alle Vorkommen der Zeichenkette a durch b ersetzt werden sollen oder Groß- und Kleinschreibung eine Rolle spielen, kann Javascript replace() mit einem regulären Ausdruck aufgerufen werden.

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>

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

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.

REPLACE