JavaScript String replace() Methode erklärt: Grundlagen, Regex und praktische Beispiele

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Einführung

JavaScript ist eine der am weitesten verbreiteten Programmiersprachen in der Webentwicklung. Insbesondere die Zeichenkettenmanipulation ist ein häufig genutztes Feature beim Umgang mit Benutzereingaben und Datenverarbeitung. Unter diesen Features ist die replace()‑Methode als leistungsstarkes Werkzeug bekannt, das das einfache Durchführen von Ersetzungsoperationen auf Zeichenketten ermöglicht.

In diesem Artikel erklären wir die JavaScript‑Methode replace() ausführlich – von den Grundlagen bis zu fortgeschrittener Nutzung. Neben grundlegenden Beispielen behandeln wir auch fortgeschrittene Ersetzungen mit regulären Ausdrücken und praxisnahe Anwendungsfälle. Dieser Inhalt ist für Anfänger bis hin zu fortgeschrittenen Entwicklern gedacht.

2. Grundlagen der replace()‑Methode

Was ist die replace()‑Methode?

Die replace()‑Methode ist eine eingebaute JavaScript‑Funktion, die verwendet wird, um bestimmte Teile einer Zeichenkette durch eine andere Zeichenkette zu ersetzen. Mit dieser Methode können Sie Zeichenkettendaten effizient bearbeiten und transformieren.

Syntax

string.replace(pattern, replacement)

• pattern : Die zu suchende Zeichenkette oder der reguläre Ausdruck.
• replacement : Die Ersatzzeichenkette oder eine Callback‑Funktion.

Grundlegende Verwendung

Das folgende Beispiel demonstriert eine einfache Zeichenkettenersetzung.

let text = "Hello, world!";
let result = text.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"

In diesem Code wird die Zeichenkette „world“ durch „JavaScript“ ersetzt.

Wichtige Hinweise

1. replace() ersetzt nur das erste gefundene Vorkommen.
2. Um alle gefundenen Vorkommen zu ersetzen, müssen Sie einen regulären Ausdruck mit dem Flag g verwenden.

3. Fortgeschrittene Ersetzung mit regulären Ausdrücken

Was sind reguläre Ausdrücke?

Reguläre Ausdrücke sind leistungsstarke Werkzeuge zur Beschreibung von Zeichenkettenmustern. In JavaScript ermöglichen reguläre Ausdrücke das einfache Durchführen komplexer Muster‑Matching‑ und Ersetzungsoperationen.

Ersetzungsbeispiele mit regulären Ausdrücken

let text = "apple, banana, apple";
let result = text.replace(/apple/g, "orange");
console.log(result); // "orange, banana, orange"

Arten von Flags

• g : Globale Ersetzung (ersetzt alle Treffer)
• i : Groß‑/Kleinschreibung ignorierende Ersetzung
• m : Mehrzeilen‑Modus

Fortgeschrittenes Beispiel: Groß‑/Kleinschreibung ignorierende Ersetzung

let text = "Hello, hello, HELLO";
let result = text.replace(/hello/gi, "hi");
console.log(result); // "hi, hi, hi"

4. Ersetzen mehrerer Vorkommen

Alle Treffer ersetzen

Um alle passenden Vorkommen in einer Zeichenkette zu ersetzen, verwenden Sie das g‑Flag in einem regulären Ausdruck.

let text = "cat dog cat bird";
let result = text.replace(/cat/g, "fish");
console.log(result); // "fish dog fish bird"

Technik zum gleichzeitigen Ersetzen mehrerer unterschiedlicher Zeichenketten

let text = "red blue green";
let replacements = {red: "pink", blue: "cyan", green: "lime"};

Object.keys(replacements).forEach(key => {
  let regex = new RegExp(key, "g");
  text = text.replace(regex, replacements[key]);
});

console.log(text); // "pink cyan lime"

Dieser Ansatz ermöglicht es, mehrere Muster auf einmal zu ersetzen und gleichzeitig die Lesbarkeit des Codes zu verbessern.

5. Dynamische Ersetzung mit Callback‑Funktionen

Was ist eine Callback‑Funktion?

Eine Callback‑Funktion wird während des Ersetzungsprozesses aufgerufen und erlaubt es Ihnen, die Operation anhand der aktuellen Trefferinformationen anzupassen.

Beispiele für dynamische Ersetzung

1. Zeichenketten neu anordnen

let text = "Tanaka, Taro";
let result = text.replace(/(\w+), (\w+)/, (match, p1, p2) => {
  return `${p2} ${p1}`;
});
console.log(result); // "Taro Tanaka"

2. Datumsformate konvertieren

let date = "2024-12-25";
let formattedDate = date.replace(/(\d{4})-(\d{2})-(\d{2})/, (match, year, month, day) => {
  return `${month}/${day}/${year}`;
});
console.log(formattedDate); // "12/25/2024"

6. Umgang mit Sonderzeichen und Escape‑Sequenzen

Was sind Sonderzeichen?

In regulären Ausdrücken haben bestimmte Zeichen spezielle Bedeutungen als Metazeichen. Um diese Zeichen wörtlich in Such‑ oder Ersetzungsoperationen zu verwenden, muss man Escape‑Sequenzen benutzen.

Ersetzen von Zeichenketten, die Sonderzeichen enthalten

Beispiel 1: Ersetzen einer Zeichenkette, die einen Punkt enthält

let text = "www.example.com";
let result = text.replace(/\./g, "-");
console.log(result); // "www-example-com"

Beispiel 2: Entfernen eines Dollarzeichens

let price = "$1,000";
let result = price.replace(/\$/g, "");
console.log(result); // "1,000"

Ersetzen von HTML‑Escape‑Zeichen

Beispiel: Escapen von HTML‑Tags

let html = "<div>Hello!</div>";
let result = html.replace(/</g, "&lt;").replace(/>/g, "&gt;");
console.log(result);
// "&lt;div&gt;Hello!&lt;/div&gt;"

7. Praktische Anwendungsfälle und erweiterte Techniken

Zeilenumbrüche in
-Tags umwandeln

let text = "Hello\nWorld\nJavaScript";
let result = text.replace(/\n/g, "<br>");
console.log(result);
// "Hello<br>World<br>JavaScript"

URL-Parameter manipulieren

let url = "https://example.com/?id=123&lang=en";
let result = url.replace(/lang=en/, "lang=ja");
console.log(result);
// "https://example.com/?id=123&lang=ja"

Benutzereingaben bereinigen

function sanitizeInput(input) {
  return input.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

let userInput = "<script>alert('XSS');</script>";
let safeInput = sanitizeInput(userInput);
console.log(safeInput);
// "&lt;script&gt;alert('XSS');&lt;/script&gt;"

8. Wichtige Hinweise und bewährte Verfahren

Beachten Sie, dass nur das erste Vorkommen ersetzt wird

let text = "apple apple orange";
let result = text.replace("apple", "banana");
console.log(result); // "banana apple orange"

Achten Sie auf Groß‑/Kleinschreibung

let text = "JavaScript is powerful. javascript is versatile.";
let result = text.replace(/javascript/gi, "JS");
console.log(result);
// "JS is powerful. JS is versatile."

Vergessen Sie nicht, Sonderzeichen zu escapen

function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

let text = "Price: $100";
let result = text.replace(new RegExp(escapeRegExp("$"), "g"), "USD ");
console.log(result);
// "Price: USD 100"

9. Fazit

Zusammenfassung des Artikels

• Grundlegende Verwendung: Erklärung der Syntax und einfacher Beispiele der replace()‑Methode.
• Anwendungen regulärer Ausdrücke: Erläutert, wie reguläre Ausdrücke und Flags für erweiterte Ersetzungsoperationen verwendet werden.
• Callback‑Funktionen: Demonstrierte dynamische Ersetzungstechniken mit praktischen Beispielen.
• Praktische Beispiele: Einführung nützlicher Techniken wie URL‑Manipulation und Eingabebereinigung.
• Best Practices: Erklärung wichtiger Vorsichtsmaßnahmen und leistungsbezogener Überlegungen.

Abschließende Gedanken

Die JavaScript‑replace()‑Methode ist ein vielseitiges und leistungsstarkes Werkzeug, das von einfachen bis zu fortgeschrittenen Szenarien effektiv eingesetzt werden kann. Wir werden weiterhin nützliche JavaScript‑bezogene Inhalte bereitstellen, also bleiben Sie dran.