8. Unterrichtsblock

JavaScript-String-Suche

JavaScript-Suchmethoden

• String indexOf()
• String lastIndexOf()
• String search()
• String match()
• String matchAll()
• String includes()
• String startsWith()
• String endsWith()

JavaScript-String indexOf()

Die indexOf()Methode gibt den Index (Position von) des ersten Vorkommens eines Strings in einem String zurück:

let str = "Brautkleid bleibt Brautkleid und Blaukraut bleibt Blaukraut";
str.indexOf("bleibt");

Beispiel:

Die Position des ersten Vorkommens von „bleibt“ ist:

Erinnerung: JavaScript zählt Positionen ab Null. 0 ist die erste Position in einem String, 1 die zweite, 2 die dritte, …

JavaScript-String lastIndexOf()

Die lastIndexOf()Methode gibt den Index des letzten Vorkommens eines angegebenen Textes in einer Zeichenfolge zurück:

let text = "Brautkleid bleibt Brautkleid und Blaukraut bleibt Blaukraut";
text.lastIndexOf("bleibt");

Beide Methoden indexOf(), und lastIndexOf()geben -1 zurück, wenn der Text nicht gefunden wird:

let text = "Brautkleid bleibt Brautkleid und Blaukraut bleibt Blaukraut";
text.lastIndexOf("Bratwurst");

Beide Methoden akzeptieren einen zweiten Parameter als Startposition für die Suche:

let text = "Brautkleid bleibt Brautkleid und Blaukraut bleibt Blaukraut";
text.indexOf("bleibt", 18);

Beispiel

Die Methode startet in folgendem Beispiel auf Position 18, sucht die nächst passende Übereinstimmung und gibt die Position des ersten Zeichens der Übereinstimmung aus.

Die lastIndexOf()Methoden suchen rückwärts (vom Ende zum Anfang), was bedeutet: Wenn der zweite Parameter ist 15, beginnt die Suche an Position 15 und sucht bis zum Anfang der Zeichenfolge.

let text2 = "Brautkleid bleibt Brautkleid und Blaukraut bleibt Blaukraut";
text2.lastIndexOf("bleibt", 42);

Beispiel

JavaScript-String search()

Die search()Methode durchsucht eine Zeichenfolge nach einer Zeichenfolge (oder einem regulären Ausdruck) und gibt die Position der Übereinstimmung zurück:

let text3 = "Brautkleid bleibt Brautkleid und Blaukraut bleibt Blaukraut";
text3.search("bleibt");

let text4 = "Brautkleid bleibt Brautkleid und Blaukraut bleibt Blaukraut";
text4.search(/bleibt/);

Hinweis

Die beiden Methoden indexOf()und search()scheinen gleich zu sein. Sie akzeptieren die gleichen Argumente (Parameter) und geben den anscheinend den gleichen Wert zurück.

Die beiden Methoden sind jedoch NICHT gleich. Das sind die Unterschiede:

• Die search()Methode kann kein zweites Startpositionsargument annehmen.
• Die indexOf()Methode kann keine umfangreichen Suchwerte (möglich durch reguläre Ausdrücke) annehmen.

JavaScript-String match()

Die match()Methode gibt ein Array zurück, das die Ergebnisse des Abgleichs einer Zeichenfolge mit einer Zeichenfolge (oder eines regulären Ausdrucks) enthält.

Wir führen eine Suche nach „au“ durch:

// match() kann wie folgt verwendet werden:

let text5 = "Brautkleid bleibt Brautkleid und Blaukraut bleibt Blaukraut";
text5.match("au");

let text6 = "Brautkleid bleibt Brautkleid und Blaukraut bleibt Blaukraut";
text6.match(/au/);

So führt man eine globale Suche nach „au“ durch:

let text7 = "Brautkleid bleibt BRAUTKLEID und BLAUKRAUT bleibt Blaukraut";
text7.match(/au/g);

So führt man eine globale Suche ohne Berücksichtigung der Groß-/Kleinschreibung nach „au“ durch:

let text8 = "Brautkleid bleibt BRAUTKLEID und BLAUKRAUT bleibt Blaukraut";
text8.match(/au/gi);

Merke: Wenn ein regulärer Ausdruck den Modifikator g nicht enthält (globale Suche), match()wird nur die erste Übereinstimmung in der Zeichenfolge zurückgegeben.

JavaScript-String matchAll()

Die matchAll()Methode gibt einen Iterator zurück, der die Ergebnisse des Abgleichs einer Zeichenfolge mit einer Zeichenfolge (oder einem regulären Ausdruck) enthält.

let text9 = "Wenn Fliegen hinter Fliegen fliegen, fliegen Fliegen Fliegen hinterher."
const iterator = text9.matchAll("Fliegen");

document.getElementById("demo3").innerHTML = Array.from(iterator);

/* Wenn der Parameter ein regulärer Ausdruck ist, 
muss das globale Flag (g) gesetzt werden, 
sonst wird ein TypeError geworfen.
*/

let text10 = "Wenn Fliegen hinter Fliegen fliegen, fliegen Fliegen Fliegen hinterher."
const iterator = text10.matchAll(/Fliegen/g);

document.getElementById("demo4").innerHTML = Array.from(iterator);


/* Wenn zusätzlich auf Groß- & Kleinschreibung verzichtet werden soll,
ist die Insensitiv-Flag (i) zu setzen
*/

let text11 = "Wenn Fliegen hinter Fliegen fliegen, fliegen Fliegen Fliegen hinterher."
const iterator = text11.matchAll(/Fliegen/gi);

document.getElementById("demo5").innerHTML = Array.from(iterator);

Hinweis: matchAll()funktioniert nicht im Internet Explorer.

JavaScript-String includes()

Die includes()Methode gibt true zurück, wenn eine Zeichenfolge einen angegebenen Wert enthält. Anderenfalls wird false ausgegeben.

// Hier wird geprüft, ob der Text "Brautkleid" enthält:

let text12 = "Brautkleid bleibt Brautkleid und Blaukraut bleibt Blaukraut";
text12.includes("Brautkleid");


// Hier wird geprüft, ob der Text "Brautkleid" ab Position 40 enthält

let text13 = "Brautkleid bleibt Brautkleid und Blaukraut bleibt Blaukraut";
text13.includes("Brautkleid", 40);

Anmerkungen

• includes()unterscheidet zwischen Groß- und Kleinschreibung.
• includes()ist eine ES6-Funktion (JavaScript 2015).
• includes()wird im Internet Explorer nicht unterstützt.

JavaScript-String startsWith()

Die startsWith()Methode gibt zurück, true wenn eine Zeichenfolge mit einem angegebenen Wert beginnt. Andernfalls wird false zurückgegeben.

Beispiele

Gibt wahr zurück:

// Gibt true zurück:

let text14 = "Brautkleid bleibt Brautkleid und Blaukraut bleibt Blaukraut";
text14.startsWith("Brautkleid");


// Gibt false zurück:

let text15 = "Brautkleid bleibt Brautkleid und Blaukraut bleibt Blaukraut";
text15.startsWith("Blaukraut");


/*
Es kann auch eine Startposition für die Suche angegeben werden:
*/

// Gibt false zurück:

let text16 = "Brautkleid bleibt Brautkleid und Blaukraut bleibt Blaukraut";
text16.startsWith("bleibt", 10);


// Gibt true zurück:

let text16 = "Brautkleid bleibt Brautkleid und Blaukraut bleibt Blaukraut";
text16.startsWith("bleibt", 11);

Anmerkungen

• startsWith()unterscheidet zwischen Groß- und Kleinschreibung.
• startsWith()ist eine ES6-Funktion (JavaScript 2015).
• startsWith()wird im Internet Explorer nicht unterstützt.

JavaScript-String endsWith()

Die endsWith()Methode gibt zurück, true wenn eine Zeichenfolge mit einem angegebenen Wert endet. Andernfalls gibt die Methode false zurück.

// Prüfung, ob der Name mit "Müller" endet

let text17 = "Thomas Müller";
text17.endsWith("Müller");


// Überprüfen Sie, ob die ersten 16 Zeichen einer Zeichenfolge mit "bleibt" enden:

let text18 = "Brautkleid bleibt Brautkleid und Blaukraut bleibt Blaukraut";
text18.endsWith("bleibt", 16);

Anmerkungen

• endsWith()unterscheidet zwischen Groß- und Kleinschreibung.
• endsWith()ist eine ES6-Funktion (JavaScript 2015).
• endsWith()wird im Internet Explorer nicht unterstützt.

JavaScript-Vorlagen

Synonyme:

• Vorlagenliterale
• Vorlagenzeichenfolgen
• String-Templates
• Back-Tics-Syntax

Rückwärtsgeneigte-Hochkomma-Syntax (Backtics)

/* Vorlagenliterale verwenden Rückwärts-Hochkomma (Backtics ``) 
anstelle von Anführungszeichen (""), um eine Zeichenfolge zu definieren:
*/

let text = `Servus!`;


/* Innerhalb von Vorlagenliteralen können auch einfache 
und doppelte Anführungszeichen verwendet werden.
*/

let text = `Komm'st mit ins "CityDome"?`;


// Auch mehrzeilige Zeichenfolgen sind möglich.

let text =
`Fischers
Fritz
fischt
frische
Fische`;

Interpolation

Vorlagenliterale bieten eine einfache Möglichkeit, Variablen und Ausdrücke in Zeichenfolgen zu interpolieren. Das Verfahren heißt „String-Interpolation“.

Erklärung: Interpolation kommt aus der Mathematik und meint das Errechnen von Werte zwischen bereits bekannten Werten einer Funktion. In der Bildbearbeitung beschreibt die Interpolation das Errechnen fehlender Bildpunkte aus vorhandenen Nachbar-Pixeln, die anschließend eingeschoben werden, um das Bild zu vergrößern.

// SYNTAX

${...}


/* Vorlagenliterale erlauben Variablen in Strings.
Das automatische Ersetzen von Variablen durch reelle 
Werte wird dabei als String-Interpolation bezeichnet.
*/

let vorName = "Thomas";
let nachName = "Müller";

let text = `Hallo ${firstName} ${lastName}!`;


/* Vorlagenliterale erlauben Ausdrücke in Strings.
Das automatische Ersetzen von Ausdrücken durch reelle 
Werte wird dabei ebenfalls als String-Interpolation bezeichnet.
*/

let Preis = 10;
let MwSt = 1.19;

let Summe = `Total: ${(Preis * MwSt).toFixed(2)}`;

document.getElementById("demo").innerHTML = Summe;

HTML-Vorlagen

Vorlagen werden in der Praxis oft zur Generierung von HTML verwendet.

// Vorlage am Beispiel einer Schleife

let ueberschrift = "Südfrüchte";
let frucht = ["Orangen", "Kiwis", "Melonen", "Bananen", "Zitronen"];

let html = `<h2>${ueberschrift}</h2><ul>`;
for (const x of frucht) {
  html += `<li>${x}</li>`;
}

html += `</ul>`;