Abschnitt 8 · Lektion 2
Suchen und ersetzen
Suchen und Ersetzen ist die Arbeit, die man an Text am häufigsten macht. Für feste Zeichenfolgen reichen die Methoden aus dieser Lektion. Für alles Unregelmäßige braucht es ein Muster, und das ist Abschnitt 9.
Kommt es vor?
<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p> const nummer = "KURS-2026-JS";
// Kommt es irgendwo vor?
console.log("includes 2026:", nummer.includes("2026"));
console.log("includes 1999:", nummer.includes("1999"));
// Steht es am Anfang?
console.log("startsWith KURS:", nummer.startsWith("KURS"));
// Steht es am Ende?
console.log("endsWith JS:", nummer.endsWith("JS"));
// Alle drei liefern einen Wahrheitswert und passen damit
// direkt in ein if aus Lektion 3.5.
if (nummer.startsWith("KURS-")) {
console.log("Das ist eine Kursnummer.");
}
// Und alle drei unterscheiden Groß- und Kleinschreibung.
console.log("includes js:", nummer.includes("js")); Drei Methoden beantworten die drei Varianten derselben Frage. includes fragt „irgendwo”, startsWith fragt „am Anfang”, endsWith fragt „am Ende”.
Alle drei geben einen Wahrheitswert zurück und passen damit direkt in ein if aus Lektion 3.5. Das ist der Grund, warum man sie einem indexOf vorzieht: das Ergebnis ist schon die Antwort und muss nicht erst verglichen werden.
Alle drei unterscheiden Groß- und Kleinschreibung. nummer.includes("js") findet nichts, obwohl JS dasteht. Das ist keine Schwäche, sondern die einzige sinnvolle Voreinstellung, und wie man sie umgeht, steht weiter unten.
Wo genau?
<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p> const satz = "Programmieren mit Mario";
// Die Position des ersten Treffers.
console.log("Position von mit:", satz.indexOf("mit"));
// Kein Treffer ergibt minus eins, nicht undefined.
console.log("Position von Java:", satz.indexOf("Java"));
// Deshalb die Prüfung auf minus eins, wenn man indexOf nutzt.
if (satz.indexOf("Java") === -1) {
console.log("Java kommt nicht vor.");
}
// Die alte Falle: 0 ist ein gültiger Treffer und zugleich
// falsch genug, siehe Lektion 3.3.
if (satz.indexOf("Programmieren")) {
console.log("Diese Zeile kommt nie, obwohl der Treffer da ist.");
}
// Für die reine Ja-Nein-Frage nimmt man deshalb includes.
console.log("Mit includes:", satz.includes("Programmieren"));
// Und lastIndexOf für den letzten Treffer.
console.log("Letztes m:", satz.lastIndexOf("m")); Wenn du nicht nur wissen willst, ob etwas vorkommt, sondern wo, ist indexOf das Werkzeug. Es liefert die Position des ersten Treffers, gezählt ab 0 wie in Lektion 8.1.
Kein Treffer ergibt -1. Das ist ungewöhnlich, hat aber einen Grund: 0 ist eine gültige Position, also braucht das Nichtstreffen einen Wert, den es sonst nicht gibt.
Genau daraus folgt die Falle im Beispiel. if (satz.indexOf("Programmieren")) sieht aus wie „wenn es vorkommt” und ist es nicht: der Treffer steht auf Position 0, und 0 ist falsch genug im Sinn von Lektion 3.3. Die Bedingung ist also falsch, obwohl der Text da ist.
Wer mit indexOf arbeitet, vergleicht deshalb ausdrücklich mit -1. Und wer nur die Ja-Nein-Frage hat, nimmt includes und umgeht das Problem. lastIndexOf gibt es noch, für den letzten Treffer statt des ersten.
Austauschen
<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p> const satz = "a und b und c";
// replace tauscht nur das erste Vorkommen.
console.log("replace:", satz.replace("und", "&"));
// replaceAll tauscht alle.
console.log("replaceAll:", satz.replaceAll("und", "&"));
// Und der Ausgangssatz steht unverändert da, wie immer.
console.log("Original:", satz);
// Ein zweites replace hilft nicht zuverlässig weiter,
// es trifft nur das nächste.
console.log("Zweimal:", satz.replace("und", "&").replace("und", "&"));
// Auch hier zählt die Schreibweise.
console.log("Groß:", satz.replaceAll("UND", "&")); replace nimmt zwei Texte: den gesuchten und den, der stattdessen dastehen soll. Zurück kommt ein neuer Text, das Original bleibt unverändert, wie in Lektion 8.1.
Und jetzt der Merksatz: replace tauscht nur das erste Vorkommen. Nicht alle. Das ist die häufigste Überraschung dieses Abschnitts, denn in einem kurzen Testtext fällt es nicht auf und in den echten Daten dann schon.
Wer alle meint, schreibt replaceAll. Ein zweites replace dahinterzuhängen ist keine Lösung, es trifft nur das nächste Vorkommen, und wie viele es sind, weiß man vorher nicht.
Auch hier zählt die Schreibweise: replaceAll("UND", "&") findet nichts, wenn im Text und steht.
Groß und klein egal machen
<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p> const eingabe = "Hallo Welt";
const gesucht = "WELT";
// So findet es nichts.
console.log("Direkt:", eingabe.includes(gesucht));
// Beide Seiten kleinschreiben, dann stimmt der Vergleich.
console.log(
"Kleingeschrieben:",
eingabe.toLowerCase().includes(gesucht.toLowerCase())
);
// Wichtig: beide Seiten. Nur eine reicht nicht.
console.log("Nur eine:", eingabe.toLowerCase().includes(gesucht));
// Und die Ausgangswerte sind unverändert.
console.log("Original:", eingabe, gesucht); Das Standardrezept dafür ist kurz: schreib beide Seiten klein und vergleiche dann.
toLowerCase gibt dir eine kleingeschriebene Kopie zurück. Wendest du es auf den Text und auf den Suchbegriff an, stimmt der Vergleich unabhängig davon, wie beide getippt wurden.
Beide Seiten, nicht nur eine. Das Beispiel zeigt den halben Weg, und der findet weiterhin nichts. Der Fehler passiert vor allem dann, wenn der Suchbegriff als Konstante im Code steht und man ihn für unverdächtig hält.
Für das Ersetzen gibt es diesen Weg nicht, denn dort willst du den Originaltext behalten und nur eine Stelle austauschen. Ein toLowerCase würde den ganzen Text kleinschreiben. Dafür ist der reguläre Ausdruck aus Abschnitt 9 gemacht, und das ist einer der Gründe, warum es ihn gibt.
Zum Mitnehmen
replace tauscht nur das erste Vorkommen. Wer alle meint, schreibt replaceAll, und genau dieser Buchstabendreher kostet die meisten Anfänger einen halben Nachmittag.
Jetzt du
Basis Konto, kostenlosZu dieser Lektion gehört eine Aufgabe. Du schreibst den Code selbst, und nach jedem Lauf sagt dir eine Prüfliste, was schon stimmt.
Dafür brauchst du das Basis Konto. Es kostet nichts, und ein Passwort gibt es auch nicht.
Was in dieser Lektion steckt
-
Artikel mit 4 Beispielen zum Ausprobieren
Steht hier, ohne Konto lesbar.
-
Aufgabe im Editor, direkt im Browser geprüft
Öffnet sich mit dem Basis Konto.