Diereplace()-Methode vonString-Werten gibt einen neuen String zurück, bei dem ein, einige oder alle Vorkommen einespattern durch einreplacement ersetzt werden. Daspattern kann ein String oder einRegExp sein und dasreplacement kann ein String oder eine Funktion sein, die für jeden Treffer aufgerufen wird. Wennpattern ein String ist, wird nur das erste Vorkommen ersetzt. Der ursprüngliche String bleibt unverändert.

Probieren Sie es aus

const paragraph = "I think Ruth's dog is cuter than your dog!";console.log(paragraph.replace("Ruth's", "my"));// Expected output: "I think my dog is cuter than your dog!"const regex = /dog/i;console.log(paragraph.replace(regex, "ferret"));// Expected output: "I think Ruth's ferret is cuter than your dog!"

Syntax

replace(pattern, replacement)

Parameter

pattern

Kann ein String oder ein Objekt mit einerSymbol.replace-Methode sein — das typische Beispiel ist einregulärer Ausdruck. Jeder Wert, der nicht dieSymbol.replace-Methode hat, wird zu einem String gezwungen.

replacement

Kann ein String oder eine Funktion sein.

• Wenn es ein String ist, ersetzt er den durchpattern übereinstimmenden Teilstring. Eine Reihe von speziellen Ersetzungsmustern wird unterstützt; siehe den AbschnittAngabe eines Strings als Ersetzung unten.
• Wenn es eine Funktion ist, wird diese für jeden Treffer aufgerufen und der Rückgabewert wird als Ersetzungstext verwendet. Die an diese Funktion übergebenen Argumente sind im AbschnittAngabe einer Funktion als Ersetzung unten beschrieben.

Rückgabewert

Ein neuer String, bei dem ein, einige oder alle Vorkommen des Musters durch die angegebene Ersetzung ersetzt werden.

Beschreibung

Diese Methode verändert nicht den Stringwert, auf dem sie aufgerufen wird. Sie gibt einen neuen String zurück.

Ein String-Muster wird nur einmal ersetzt. Um eine globale Suche und Ersetzung durchzuführen, verwenden Sie einen regulären Ausdruck mit demg-Flag oder verwenden Sie stattdessenreplaceAll().

Wennpattern ein Objekt mit einerSymbol.replace-Methode ist (einschließlichRegExp-Objekten), wird diese Methode mit dem Zielstring undreplacement als Argumente aufgerufen. Ihr Rückgabewert wird zum Rückgabewert vonreplace(). In diesem Fall ist das Verhalten vonreplace() vollständig durch die[Symbol.replace]()-Methode kodiert — zum Beispiel ist jede Erwähnung von "Aufnahmegruppen" in der untenstehenden Beschreibung tatsächlich eine Funktionalität, die vonRegExp.prototype[Symbol.replace]() bereitgestellt wird.

Wenn daspattern ein leerer String ist, wird die Ersetzung an den Anfang des Strings angefügt.

"xxx".replace("", "_"); // "_xxx"

Ein regulärer Ausdruck mit demg-Flag ist der einzige Fall, in demreplace() mehr als einmal ersetzt. Weitere Informationen darüber, wie Eigenschaften von regulären Ausdrücken (insbesondere dassticky-Flag) mitreplace() interagieren, finden Sie unterRegExp.prototype[Symbol.replace]().

Angabe eines Strings als Ersetzung

Der Ersetzungsstring kann die folgenden speziellen Ersetzungsmuster enthalten:

$n und$<Name> sind nur verfügbar, wenn daspattern-Argument einRegExp-Objekt ist. Wenn daspattern ein String ist oder die entsprechende Aufnahmegruppe nicht im Regex vorhanden ist, wird das Muster als Literal ersetzt. Wenn die Gruppe vorhanden, aber nicht übereinstimmend ist (weil sie Teil einer Disjunktion ist), wird sie durch einen leeren String ersetzt.

"foo".replace(/(f)/, "$2");// "$2oo"; the regex doesn't have the second group"foo".replace("f", "$1");// "$1oo"; the pattern is a string, so it doesn't have any groups"foo".replace(/(f)|(g)/, "$2");// "oo"; the second group exists but isn't matched

Angabe einer Funktion als Ersetzung

Sie können eine Funktion als zweiten Parameter angeben. In diesem Fall wird die Funktion aufgerufen, nachdem der Treffer gefunden wurde. Das Ergebnis der Funktion (Rückgabewert) wird als Ersetzungsstring verwendet.

Die Funktion hat die folgende Signatur:

function replacer(match, p1, p2, /* …, */ pN, offset, string, groups) {  return replacement;}

Die Argumente an die Funktion sind wie folgt:

match

Der übereinstimmende Teilstring. (Entspricht$& oben.)

p1,p2, …,pN

Dernte String, der von einer Aufnahmegruppe (einschließlich benannter Aufnahmegruppen) gefunden wurde, vorausgesetzt, das erste Argument vonreplace() ist einRegExp-Objekt. (Entspricht$1,$2, etc. oben.) Wenn zum Beispiel daspattern/(\a+)(\b+)/ ist, dann istp1 die Übereinstimmung für\a+ undp2 die Übereinstimmung für\b+. Wenn die Gruppe Teil einer Disjunktion ist (z. B."abc".replace(/(a)|(b)/, replacer)), wird die nicht übereinstimmende Alternativeundefined sein.

offset

Der Offset des übereinstimmenden Teilstrings innerhalb des gesamten untersuchten Strings. Zum Beispiel, wenn der gesamte String'abcd' war und der übereinstimmende Teilstring'bc' war, dann ist dieses Argument1.

string

Der gesamte untersuchte String.

groups

Ein Objekt, dessen Schlüssel die verwendeten Gruppennamen sind und dessen Werte die übereinstimmenden Teile sind (undefined, wenn nicht übereinstimmt). Nur vorhanden, wenn daspattern mindestens eine benannte Aufnahmegruppe enthält.

Die genaue Anzahl der Argumente hängt davon ab, ob das erste Argument einRegExp-Objekt ist — und, falls ja, wie viele Aufnahmegruppen es enthält.

Das folgende Beispiel setztnewString auf'abc - 12345 - #$*%':

function replacer(match, p1, p2, p3, offset, string) {  // p1 is non-digits, p2 digits, and p3 non-alphanumerics  return [p1, p2, p3].join(" - ");}const newString = "abc12345#$*%".replace(/(\D*)(\d*)(\W*)/, replacer);console.log(newString); // abc - 12345 - #$*%

Die Funktion wird mehrfach für jede vollständige Übereinstimmung aufgerufen, die ersetzt werden soll, wenn der reguläre Ausdruck im ersten Parameter global ist.

Beispiele

Definieren des regulären Ausdrucks in replace()

Im folgenden Beispiel wird der reguläre Ausdruck inreplace() definiert und enthält das Flag für Groß- und Kleinschreibung.

const str = "Twas the night before Xmas...";const newStr = str.replace(/xmas/i, "Christmas");console.log(newStr); // Twas the night before Christmas...

Dies protokolliert'Twas the night before Christmas...'.

Verwenden der globalen und ignoreCase-Flags mit replace()

Ein globaler Ersatz kann nur mit einem regulären Ausdruck durchgeführt werden. Im folgenden Beispiel enthält der reguläre Ausdruck dieglobalen und ignore case-Flags, die esreplace() ermöglichen, jedes Vorkommen von'apples' im String durch'oranges' zu ersetzen.

const re = /apples/gi;const str = "Apples are round, and apples are juicy.";const newStr = str.replace(re, "oranges");console.log(newStr); // oranges are round, and oranges are juicy.

Dies protokolliert'oranges are round, and oranges are juicy'.

Wörter in einem String vertauschen

Das folgende Skript vertauscht die Wörter im String. Für den Ersetzungstext verwendet das SkriptAufnahmegruppen und die$1 und$2 Ersetzungsmuster.

const re = /(\w+)\s(\w+)/;const str = "Maria Cruz";const newStr = str.replace(re, "$2, $1");console.log(newStr); // Cruz, Maria

Dies protokolliert'Cruz, Maria'.

Verwendung einer Inline-Funktion, die die übereinstimmenden Zeichen modifiziert

In diesem Beispiel werden alle Vorkommen von Großbuchstaben im String in Kleinbuchstaben umgewandelt und ein Bindestrich wird direkt vor dem Übereinstimmungsort eingefügt. Wichtig dabei ist, dass zusätzliche Operationen am übereinstimmenden Element erforderlich sind, bevor es als Ersatz zurückgegeben wird.

Die Ersetzungsfunktion akzeptiert das übereinstimmende Snippet als Parameter und verwendet es, um den Fall zu transformieren und den Bindestrich vor der Rückgabe zu verketten.

function styleHyphenFormat(propertyName) {  function upperToHyphenLower(match, offset, string) {    return (offset > 0 ? "-" : "") + match.toLowerCase();  }  return propertyName.replace(/[A-Z]/g, upperToHyphenLower);}

GegebenstyleHyphenFormat('borderTop'), wird dies‘border-top’ zurückgeben.

Da wir dasErgebnis der Übereinstimmung weiter transformieren möchten, bevor die endgültige Ersetzung erfolgt, müssen wir eine Funktion verwenden. Dies erzwingt die Auswertung der Übereinstimmung vor dertoLowerCase()-Methode. Hätten wir versucht, dies mit der Übereinstimmung ohne die Funktion zu tun, hätte dertoLowerCase()-Aufruf keinen Effekt.

// Won't workconst newString = propertyName.replace(/[A-Z]/g, "-" + "$&".toLowerCase());

Dies liegt daran, dass'$&'.toLowerCase() zuerst als String-Literal ausgewertet würde (was zum selben'$&' führt), bevor die Zeichen als Muster verwendet werden.

Ersetzen eines Fahrenheit-Grads durch sein Celsius-Äquivalent

Das folgende Beispiel ersetzt ein Fahrenheit-Grad durch sein Celsius-Äquivalent. Das Fahrenheit-Grad sollte eine Zahl sein, die mit"F" endet. Die Funktion gibt die Celsius-Zahl zurück, die mit"C" endet. Wenn zum Beispiel die Eingabezahl"212F" ist, gibt die Funktion"100C" zurück. Wenn die Zahl"0F" ist, gibt die Funktion"-17.77777777777778C" zurück.

Der reguläre Ausdrucktest überprüft jede Zahl, die mitF endet. Die Anzahl der Fahrenheit-Grade ist über seinen zweiten Parameter,p1, für die Funktion zugänglich. Die Funktion setzt die Anzahl der Celsius-Grade basierend auf der Anzahl der übertragenen Fahrenheit-Grade in einem String an dief2c()-Funktion.f2c() gibt dann den Celsius-Wert zurück. Diese Funktion ähnelt Perl'ss///e-Flag.

function f2c(x) {  function convert(str, p1, offset, s) {    return `${((p1 - 32) * 5) / 9}C`;  }  const s = String(x);  const test = /(-?\d+(?:\.\d*)?)F\b/g;  return s.replace(test, convert);}

Erstellen eines generischen Ersetzers

Angenommen, wir möchten einen Ersetzer erstellen, der die Offsets zu jedem übereinstimmenden String hinzufügt. Da die Ersetzungsfunktion bereits denoffset-Parameter erhält, wäre es trivial, wenn das Regex statisch bekannt ist.

"abcd".replace(/(bc)/, (match, p1, offset) => `${match} (${offset}) `);// "abc (1) d"

Dieser Ersetzer wäre jedoch schwer zu verallgemeinern, wenn er mit jedem Regex-Muster funktionieren soll. Der Ersetzer istvariadic — die Anzahl der Argumente, die er erhält, hängt von der Anzahl der vorhandenen Aufnahmegruppen ab. Wir könnenRestparameter verwenden, aber es würde auchoffset,string, etc. in das Array aufnehmen. Die Tatsache, dassgroups je nach Identität des Regex möglicherweise oder möglicherweise nicht übergeben wird, würde es auch erschweren, generisch zu wissen, welches Argument demoffset entspricht.

function addOffset(match, ...args) {  const offset = args.at(-2);  return `${match} (${offset}) `;}console.log("abcd".replace(/(bc)/, addOffset)); // "abc (1) d"console.log("abcd".replace(/(?<group>bc)/, addOffset)); // "abc (abcd) d"

Das obenstehendeaddOffset-Beispiel funktioniert nicht, wenn das Regex eine benannte Gruppe enthält, weil in diesem Fallargs.at(-2) derstring statt desoffset wäre.

Stattdessen müssen Sie die letzten Argumente basierend auf dem Typ extrahieren, dagroups ein Objekt ist, währendstring ein String ist.

function addOffset(match, ...args) {  const hasNamedGroups = typeof args.at(-1) === "object";  const offset = hasNamedGroups ? args.at(-3) : args.at(-2);  return `${match} (${offset}) `;}console.log("abcd".replace(/(bc)/, addOffset)); // "abc (1) d"console.log("abcd".replace(/(?<group>bc)/, addOffset)); // "abc (1) d"

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Polyfill vonString.prototype.replace incore-js mit Korrekturen und Implementierung moderner Verhaltensweisen wieSymbol.replace-Unterstützung
• Leitfaden zu regulären Ausdrücken
• String.prototype.replaceAll()
• String.prototype.match()
• RegExp.prototype.exec()
• RegExp.prototype.test()
• Symbol.replace
• RegExp.prototype[Symbol.replace]()