string.replace() – Zeichen suchen und ersetzen

String einfach ersetzen

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

const target = document.querySelector(".rep1");
target.textContent = target.textContent.replace("Nähkurs", "WordPress-Kurs");

ersetzt das erste Vorkommen von »Nähkurs« im String.

Regulärer Ausdruck: Ersetzen überall im String

Reguläre Ausdrücke stehen nicht in Hochkommas, sondern in Schrägstrichen: /Nähkurs/. 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.

const button = document.querySelector("#repAll");
const target = document.querySelector(".repAll");

button.addEventListener("click", () => {
	target.textContent = target.textContent.replace(/Nähkurs/gi, "WordPress-Kurs");
});

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

const button = document.querySelector("#zif");
const target = document.querySelector(".zif");

button.addEventListener("click", () => {
	const regex = /[0-9]+\.\d{4,}/g;
	target.textContent = target.textContent.replace(regex, "***");
});

replaceAll – Alles ersetzen ohne regulären Ausdruck

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

sting.replace $1 Beispiel

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

"abc123".replace(/([a-z]+)(\d+)/, "$1***")

SVG-Attribute manipulieren: Ersetzt die Nachkommastellen

const svg = `x="9182.7002" y="340.26246"`;

const result = svg.replace(
  /(x|y)="(\d+)\.\d+"/g,
  '$1="$2"'
);

console.log(result);

• (\d+) ist die Zahl vor dem Punkt
• $1 Attributname
• $2 Ganzzahliger Teil

Datum umdrehen mit string.replace() und Backreference

const text = "Heute ist der 23.02.2026.";

const result = text.replace(
  /(\d{2})\.(\d{2})\.(\d{4})/,
  "$3-$2-$1"
);

console.log(result);

Klammern ersetzen

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

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

el.innerHTML = el.innerHTML.replace(
	/\[\[([^\]]+)\]\]/g,
	"<dfn class='foo'>$1</dfn>"
);

Heute und an allen <dfn class='foo'>anderen und folgenden</dfn> 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.

Platzhalter ersetzen

In Templates werden häufig doppelte Klammern als Platzhalter verwendet.

const template = "Hallo {{name}}, willkommen in {{city}}!";
const data = { name: "Sarah", city: "Köln" };

console.log(template.replace(/{{(.*?)}}/g, (_, key) => data[key] || ""));