Abschnitt 9 · Lektion 1
Was ein Muster ist
Bis hierhin hast du nach festen Zeichenfolgen gesucht. includes("2026") findet genau 2026 und sonst nichts. Aber wonach suchst du, wenn du „irgendeine Postleitzahl” meinst? Dafür gibt es reguläre Ausdrücke.
Eine Form beschreiben
<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p> const texte = ["Kurs 3", "Kurs", "3 Kurse", "keine Zahl"];
// Mit includes suchst du einen festen Text. Nach "einer Ziffer"
// kannst du so nicht fragen, denn welche es ist, weißt du nicht.
console.log("includes 3:", texte.map((t) => t.includes("3")));
// Ein Muster beschreibt die Form. \d steht für eine Ziffer.
const hatZiffer = /\d/;
console.log("Muster:", texte.map((t) => hatZiffer.test(t)));
// Ein Muster steht zwischen zwei Schrägstrichen, ohne
// Anführungszeichen. Es ist ein eigener Wert, kein Text.
console.log("Typ:", typeof hatZiffer);
console.log("Als Text:", String(hatZiffer)); Ein regulärer Ausdruck, kurz Regex, beschreibt eine Form und keinen festen Text. \d steht für „eine Ziffer”, egal welche. Damit lässt sich fragen, was mit includes nicht geht: kommt hier irgendwo eine Zahl vor, sieht das wie eine Uhrzeit aus, ist das eine E-Mail-Adresse.
Geschrieben wird ein Muster zwischen zwei Schrägstrichen und ohne Anführungszeichen: /\d/. Das ist ein eigener Werttyp, kein Text. typeof sagt dazu object, und das ist der einzige Ort, an dem du das wissen musst.
Buchstaben und Ziffern meinen in einem Muster sich selbst. /Kurs/ ist deshalb dasselbe wie ein includes("Kurs"), nur umständlicher geschrieben. Interessant wird es erst mit den Sonderzeichen, und die kommen in Lektion 9.2.
Passt es?
<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p> // test wird am Muster aufgerufen und bekommt den Text.
console.log(/Kurs/.test("Ein Kurs"));
console.log(/Kurs/.test("Ein Buch"));
// Buchstaben und Ziffern in einem Muster meinen sich selbst.
// Dieses hier verhält sich genau wie includes.
console.log(/Kurs/.test("Kursaal"));
// Ein Muster passt, wenn es irgendwo im Text vorkommt.
// Das ist der wichtigste Satz für Lektion 9.3.
console.log(/3/.test("Ein Kurs mit 3 Teilen"));
// Und die Schreibweise zählt, genau wie bei includes.
console.log("Groß:", /kurs/.test("Ein Kurs")); test ist der einfachste Einstieg. Es wird am Muster aufgerufen und bekommt den Text als Argument, also /Kurs/.test(text) und nicht text.test(...). Zurück kommt true oder false.
Diese Reihenfolge verdreht man am Anfang zuverlässig. Es hilft, sich zu merken: das Muster ist das Werkzeug, der Text das Material.
Und ab hier gehört ein Muster in die Eingabezeile der Console, bevor es in den Editor kommt. Ein Regex ist nichts, was man hinschreibt und dann hofft: Man probiert ihn an einem Text aus, dann an einem zweiten, der nicht passen darf, und erst dann übernimmt man ihn. Tipp /Kurs/.test("Kurs 1") und danach /Kurs/.test("kurs 1") mit kleinem k. Zwei Zeilen, und du hast die Groß- und Kleinschreibung geklärt, bevor sie dich später eine halbe Stunde kostet. Für den Rest dieses Abschnitts ist das der übliche Handgriff, und in den nächsten Lektionen wird jedes Zeichen so schneller verstanden als durch jede Tabelle.
Ein Muster passt, wenn es irgendwo im Text vorkommt. Nicht nur am Anfang, nicht nur als Ganzes. /3/ passt auf jeden Text, in dem irgendwo eine Drei steht. Für eine Suche ist das genau richtig, für eine Prüfung fast immer falsch, und das ist der häufigste Fehler bei selbstgebauten Mustern. Lektion 9.3 zeigt, wie man es festmacht.
Zwei Flags
<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p> // Hinter dem zweiten Schrägstrich stehen die Flags.
// i macht Groß- und Kleinschreibung egal.
console.log("ohne i:", /hallo/.test("HALLO"));
console.log("mit i:", /hallo/i.test("HALLO"));
// g heißt: alle Treffer, nicht nur der erste. Es wirkt nicht
// auf test, sondern auf match und replace aus Lektion 9.4.
console.log("ohne g:", "a1b2c3".replace(/\d/, "#"));
console.log("mit g:", "a1b2c3".replace(/\d/g, "#"));
// Beide zusammen, in beliebiger Reihenfolge.
console.log("beide:", "aXbxc".replace(/x/gi, "#"));
// Es gibt weitere Flags, aber diese beiden decken fast alles ab,
// was du in einem Formular brauchst. Hinter dem zweiten Schrägstrich stehen Flags, also Schalter, die das Verhalten ändern. Zwei davon brauchst du ständig.
i macht Groß- und Kleinschreibung egal. Das ersetzt das doppelte toLowerCase aus Lektion 8.2 und ist der kürzere Weg, sobald ohnehin ein Muster im Spiel ist.
g heißt: alle Treffer, nicht nur der erste. Auf test wirkt es nicht sinnvoll, dazu steht in Lektion 9.4 eine Warnung. Bei replace dagegen macht es genau den Unterschied, den du in Lektion 8.2 zwischen replace und replaceAll gesehen hast.
Beide lassen sich kombinieren, die Reihenfolge ist egal.
Wenn das Muster erst zur Laufzeit entsteht
<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p> // Zwischen Schrägstrichen steht das Muster fest im Code.
const fest = /Kurs/;
console.log("fest:", fest.test("Ein Kurs"));
// Steht es erst zur Laufzeit fest, baust du es aus einem Text.
const gesucht = "Kurs";
const gebaut = new RegExp(gesucht, "i");
console.log("gebaut:", gebaut.test("EIN KURS"));
// Achtung: im Text ist der Backslash selbst ein Escape-Zeichen,
// deshalb steht dort ein doppelter.
const ziffer = new RegExp("\\d");
console.log("Ziffer:", ziffer.test("Kurs 3"));
// Und ein benanntes Muster liest sich besser als eines,
// das mitten in einer Bedingung steht.
const istKursnummer = /^KURS-\d{4}$/;
console.log("Nummer:", istKursnummer.test("KURS-2026")); Die Schreibweise mit Schrägstrichen setzt voraus, dass du das Muster beim Tippen kennst. Kommt es aus einer Variablen, etwa aus einem Suchfeld, baust du es mit new RegExp(text, flags).
Dabei lauert eine Kleinigkeit: im Text ist der Backslash selbst ein Escape-Zeichen aus Lektion 2.4. Für \d schreibst du dort also "\\d" mit zwei Backslashes. Wer das vergisst, sucht nach dem Buchstaben d.
Und dann noch etwas, das kein Sprachmittel ist, sondern eine Bitte. Muster sind schwer zu lesen, auch für den, der sie geschrieben hat. Gib ihnen einen Namen und leg sie in eine eigene Zeile, statt sie mitten in eine Bedingung zu quetschen. if (istKursnummer.test(eingabe)) sagt einem Leser, was gemeint ist. Dasselbe mit dem Muster an dieser Stelle sagt es nicht.
Zum Mitnehmen
Ein regulärer Ausdruck beschreibt eine Form, keinen festen Text. Deshalb kann er finden, was du beim Schreiben noch gar nicht kennst.
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.