Kapitel 12: String-Methoden (Text verarbeiten)

Strings sind Texte. In diesem Kapitel lernen Sie die wichtigsten Methoden zur Textverarbeitung.

12.1 String-Länge: length

Die Eigenschaft length gibt die Anzahl der Zeichen in einem String zurück.

Grundlegende Verwendung

let text = "Hallo Welt!";
console.log(text.length);  // 11 (Leerzeichen zählen mit!)

let leer = "";
console.log(leer.length);  // 0

Praxis-Beispiele

// Beispiel 1: Passwort-Länge prüfen
let passwort = "geheim123";
if (passwort.length >= 8) {
    console.log("Passwort ist sicher (mindestens 8 Zeichen).");
} else {
    console.log("Passwort ist zu kurz!");
}

// Beispiel 2: Text kürzen (Vorschau)
let artikel = "Dies ist ein sehr langer Artikel über JavaScript...";
if (artikel.length > 50) {
    let vorschau = artikel.substring(0, 50) + "...";
    console.log(vorschau);  // "Dies ist ein sehr langer Artikel über JavaScript..."
}

12.2 String suchen/extrahieren/ersetzen

Suchen: indexOf() / includes()

let text = "Hallo Welt! Willkommen in JavaScript.";

// indexOf(): Gibt den Index zurück (erste Vorkommen)
console.log(text.indexOf("Welt"));     // 6
console.log(text.indexOf("XYZ"));      // -1 (nicht gefunden)

// includes(): Prüft, ob String vorhanden ist (true/false)
console.log(text.includes("Welt"));   // true
console.log(text.includes("xyz"));     // false

Extrahieren: substring() / slice()

let text = "Hallo Welt!";

// substring(start, end) - extrahiert Teilstring
console.log(text.substring(0, 5));   // "Hallo"
console.log(text.substring(6, 11));  // "Welt!"

// slice(start, end) - ähnlich wie substring
console.log(text.slice(0, 5));      // "Hallo"
console.log(text.slice(-6));          // "Welt!" (von hinten)

Ersetzen: replace() / replaceAll()

let text = "Ich mag Äpfel. Äpfel sind lecker.";

// replace(): Ersetzt nur das ERSTE Vorkommen
let neuerText1 = text.replace("Äpfel", "Bananen");
console.log(neuerText1);  // "Ich mag Bananen. Äpfel sind lecker."

// replaceAll(): Ersetzt ALLE Vorkommen (ES2021)
let neuerText2 = text.replaceAll("Äpfel", "Bananen");
console.log(neuerText2);  // "Ich mag Bananen. Bananen sind lecker."

// Mit regulärem Ausdruck (für alle Vorkommen - alte Methode)
let neuerText3 = text.replace(/Äpfel/g, "Bananen");
console.log(neuerText3);  // "Ich mag Bananen. Bananen sind lecker."

12.3 Groß-/Kleinschreibung umwandeln

toUpperCase() / toLowerCase()

let text = "Hallo Welt!";

// toUpperCase(): Alles GROSSSCHREIBUNG
console.log(text.toUpperCase());  // "HALLO WELT!"

// toLowerCase(): Alles kleinschreibung
console.log(text.toLowerCase());  // "hallo welt!"

Praxis-Beispiele

// Beispiel 1: Benutzereingabe normalisieren (E-Mail)
let email = "  Max@Example.COM  ";
let normalisierteEmail = email.toLowerCase().trim();  // Klein + Leerzeichen entfernen
console.log(normalisierteEmail);  // "max@example.com"

// Beispiel 2: Passwort-Validierung (Großbuchstaben prüfen)
let passwort = "Geheim123";
let hatGrossbuchstaben = passwort !== passwort.toLowerCase();
console.log(hatGrossbuchstaben);  // true

// Beispiel 3: Anfangsbuchstaben großschreiben
function capitalize(text) {
    return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
}

console.log(capitalize("javascript"));  // "Javascript"

12.4 String teilen: split()

Die split()-Methode teilt einen String in ein Array auf.

Grundlegende Verwendung

// split(separator) - Teilt bei Trennzeichen
let text = "Apfel,Banane,Kirsche";
let fruechte = text.split(",");
console.log(fruechte);  // ["Apfel", "Banane", "Kirsche"]

// split("") - Jedes Zeichen wird ein Array-Element
let wort = "Hallo";
let buchstaben = wort.split("");
console.log(buchstaben);  // ["H", "a", "l", "l", "o"]

// split() ohne Parameter - Ganzer String wird Array-Element
let satz = "Hallo Welt";
let arr = satz.split();
console.log(arr);  // ["Hallo Welt"]

Praxis-Beispiele

// Beispiel 1: Satz in Wörter teilen
let satz = "Dies ist ein Satz.";
let woerter = satz.split(" ");
console.log(woerter);  // ["Dies", "ist", "ein", "Satz."]
console.log("Anzahl Wörter:", woerter.length);  // 4

// Beispiel 2: Datum parsen (TT.MM.JJJJ)
let datum = "26.05.2024";
let teile = datum.split(".");
console.log("Tag:", teile[0]);    // "26"
console.log("Monat:", teile[1]);  // "05"
console.log("Jahr:", teile[2]);   // "2024"

// Beispiel 3: URL-Parameter parsen
let url = "https://example.com?name=Max&alter=25";
let params = url.split("?")[1].split("&");
console.log(params);  // ["name=Max", "alter=25"]

12.5 Praxis: Benutzernamen-Validierung / Text extrahieren

Projekt 1: Benutzernamen-Validierung

function validiereBenutzername(benutzername) {
    // 1. Länge prüfen (3-20 Zeichen)
    if (benutzername.length < 3 || benutzername.length > 20) {
        return "Benutzername muss zwischen 3 und 20 Zeichen lang sein.";
    }
    
    // 2. Nur Buchstaben, Zahlen und Unterstrich erlaubt
    let erlaubteZeichen = /^[a-zA-Z0-9_]+$/;
    if (!erlaubteZeichen.test(benutzername)) {
        return "Benutzername darf nur Buchstaben, Zahlen und _ enthalten.";
    }
    
    // 3. Darf nicht mit Zahl beginnen
    if (!isNaN(benutzername.charAt(0))) {
        return "Benutzername darf nicht mit einer Zahl beginnen.";
    }
    
    return "Benutzername ist gültig!";
}

console.log(validiereBenutzername("max_mustermann"));  // "Benutzername ist gültig!"
console.log(validiereBenutzername("ab"));             // "Benutzername muss zwischen 3 und 20 Zeichen lang sein."
console.log(validiereBenutzername("max@mustermann")); // "Benutzername darf nur Buchstaben, Zahlen und _ enthalten."
console.log(validiereBenutzername("123max"));         // "Benutzername darf nicht mit einer Zahl beginnen."

Projekt 2: Text extrahieren (E-Mail-Domain)

function extrahiereDomain(email) {
    // Prüfen, ob E-Mail gültig ist (einfach)
    if (!email.includes("@")) {
        return "Ungültige E-Mail-Adresse.";
    }
    
    // Domain extrahieren
    let domain = email.split("@")[1];
    return domain;
}

console.log(extrahiereDomain("max@example.com"));      // "example.com"
console.log(extrahiereDomain("lisa@googlemail.com")); // "googlemail.com"
console.log(extrahiereDomain("invalid-email"));        // "Ungültige E-Mail-Adresse."

Projekt 3: Tags aus Text extrahieren

function extrahiereTags(text) {
    // Suche nach Hashtags (#wort)
    let tags = text.match(/#\w+/g);
    return tags ? tags : [];
}

let tweet = "Heute ist ein schöner Tag! #sonne #freizeit #entspannung";
let tags = extrahiereTags(tweet);
console.log(tags);  // ["#sonne", "#freizeit", "#entspannung"]

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ length - String-Länge ermitteln
• ✅ indexOf() / includes() - Suchen in Strings
• ✅ substring() / slice() - Teilstrings extrahieren
• ✅ replace() / replaceAll() - Texte ersetzen
• ✅ toUpperCase() / toLowerCase() - Groß-/Kleinschreibung
• ✅ split() - String in Array teilen
• ✅ Praxis-Projekte: Benutzernamen-Validierung, Text extrahieren

➡️ Nächster Schritt

Im nächsten Kapitel lernen wir DOM-Grundlagen - wie Sie Webseiten mit JavaScript manipulieren!

---

Übung:

1. Schreiben Sie eine Funktion, die prüft, ob ein String ein Palindrom ist
2. Erstellen Sie eine Funktion, die alle Hashtags (#) aus einem Text extrahiert
3. Schreiben Sie eine Funktion, die einen String umdreht
4. Testen Sie alle Funktionen in der Konsole