Text verarbeiten

Text ist in JavaScript unveränderlich. Keine einzige Methode ändert die Zeichenkette, auf der sie aufgerufen wird. Sie liefern alle eine neue zurück.

const wort = "Morsecode";

wort.toUpperCase();
zeige("unverändert:", wort);
zeige("das Ergebnis:", wort.toUpperCase());

Wer das vergisst, sucht lange. Der Rückgabewert muss irgendwo hin, sonst verpufft er.

Ausschneiden

const s = "Kostenlose-Javascripts";

zeige(s.length);
zeige(s[0], s.at(-1));
zeige(s.slice(0, 10));
zeige(s.slice(11));
zeige(s.slice(-11));

slice nimmt Anfang und Ende, wobei das Ende nicht mehr dazugehört. Bei slice(0, 10) kommen die Zeichen 0 bis 9 heraus, also zehn Stück. Negative Werte zählen von hinten.

Es gibt auch substring und das veraltete substr. Beide haben Eigenheiten, die niemand braucht. Nimm slice.

Suchen

const satz = "Der Browser rechnet, nicht der Server.";

zeige(satz.includes("Server"));
zeige(satz.indexOf("Browser"));
zeige(satz.startsWith("Der"));
zeige(satz.endsWith("."));
zeige("Groß und klein:", satz.toLowerCase().includes("server"));

Alle diese Methoden unterscheiden Groß- und Kleinschreibung. Wenn dir das egal sein soll, wandle vorher beide Seiten in Kleinbuchstaben um, so wie in der letzten Zeile.

Zerlegen und zusammensetzen

const zeile = "Telekom;9.95;DSL;24";
const teile = zeile.split(";");

zeige(teile);
zeige("Anbieter:", teile[0]);
zeige("wieder zusammen:", teile.join(" | "));

split macht aus Text ein Array, join macht aus einem Array Text. Die beiden sind ein Paar und tauchen ständig zusammen auf.

Mit leerem Trennzeichen zerfällt der Text in einzelne Zeichen:

zeige("Anna".split(""));
zeige("Anna".split("").reverse().join(""));

Die zweite Zeile ist der übliche Einzeiler zum Umdrehen. Das Werkzeug Namen rückwärts gelesen im Archiv macht genau das, nur umständlicher.

const mitEmoji = "Hallo 👋";

zeige("split:", mitEmoji.split("").length);
zeige("spread:", [...mitEmoji].length);

Ersetzen

const s = "eins zwei eins zwei";

zeige(s.replace("eins", "ONE"));
zeige(s.replaceAll("eins", "ONE"));

replace tauscht nur das erste Vorkommen. Das überrascht regelmäßig. replaceAll tauscht alle und ist seit 2021 überall verfügbar.

Putzen und auffüllen

const eingabe = "   kontakt@example.de  ";

zeige("[" + eingabe + "]");
zeige("[" + eingabe.trim() + "]");

trim entfernt Leerzeichen und Zeilenumbrüche an beiden Enden. Bei jedem Formularfeld, in das ein Mensch tippt, gehört das dazu. Leute fügen Text aus der Zwischenablage ein, und da hängt oft ein Leerzeichen dran.

for (const n of [3, 42, 500]) {
  zeige(String(n).padStart(5, "0"));
}

zeige("Kapitel".padEnd(12, ".") + "Seite 9");

padStart und padEnd füllen auf eine Mindestlänge auf. Für Uhrzeiten, Nummerierungen und alles, was in einer Spalte untereinanderstehen soll.

Mehrzeiliger Text

Backticks aus Kapitel 3 können mehr als nur Werte einsetzen:

const name = "Flensburg";
const quote = 99;

const text = `Ort: ${name}
Glasfaser: ${quote} %
Stand: heute`;

zeige(text);

Der Zeilenumbruch im Quelltext landet direkt im Ergebnis. Kein \n nötig.

Reguläre Ausdrücke, vorsichtig

Irgendwann reicht includes nicht mehr, weil du nicht nach einem festen Text suchst, sondern nach einem Muster. Dafür gibt es eine eigene Mini-Sprache.

const text = "Ruf an unter 0221 4567890 oder 030 111222.";

const nummern = text.match(/\d{3,4} \d{6,}/g);
zeige(nummern);

Zwischen den Schrägstrichen steht das Muster. \d bedeutet Ziffer, {3,4} bedeutet drei bis vier davon, das g am Ende sucht alle Treffer statt nur den ersten.

Ein paar Bausteine, mit denen man weit kommt:

zeige(/^\d+$/.test("12345"));
zeige(/^\d+$/.test("12a45"));
zeige("Bindestriche weg:", "030-11-22".replace(/-/g, ""));
zeige("mehrfache Leerzeichen:", "viel    Luft".replace(/\s+/g, " "));

^ heißt Anfang, $ heißt Ende, + heißt einmal oder öfter, \s heißt Leerraum. test gibt wahr oder falsch zurück.

Reguläre Ausdrücke sind mächtig und werden schnell unlesbar. Zwei Ratschläge dazu. Erstens: Wenn eine normale Methode reicht, nimm die normale Methode. Zweitens: Schreib einen Kommentar daneben, was das Muster bedeuten soll. Du selbst wirst es in drei Monaten nicht mehr entziffern.

Ein Beispiel aus dem Archiv

Morsecode ist eine Zuordnung von Zeichen zu Punkten und Strichen. Mit einem Objekt aus Kapitel 8 und den Methoden von hier ist das eine überschaubare Sache.

const code = {
  a: ".-", b: "-...", c: "-.-.", d: "-..", e: ".", f: "..-.",
  g: "--.", h: "....", i: "..", j: ".---", k: "-.-", l: ".-..",
  m: "--", n: "-.", o: "---", p: ".--.", q: "--.-", r: ".-.",
  s: "...", t: "-", u: "..-", v: "...-", w: ".--", x: "-..-",
  y: "-.--", z: "--..",
};

function zuMorse(text) {
  return text
    .toLowerCase()
    .split(" ")
    .map((wort) => [...wort].map((z) => code[z] ?? "").filter(Boolean).join(" "))
    .join("  /  ");
}

zeige(zuMorse("SOS"));
zeige(zuMorse("Hallo Welt"));

Sechs Zeilen für die Umwandlung. Das Morsecode-Werkzeug im Archiv braucht dafür rund fünfzig, weil es mit zwei parallelen Arrays und einer verschachtelten Schleife arbeitet statt mit einem Objekt.

Das ?? "" fängt Zeichen ab, für die es keinen Code gibt, etwa Satzzeichen. filter(Boolean) wirft die dabei entstandenen leeren Einträge wieder raus.

Zahlen sind das nächste Thema.