JavaScript Regex

Einführung in reguläre Ausdrücke (Regex) in JavaScript

Reguläre Ausdrücke, allgemein bekannt als Regex, sind Zeichenfolgen, die Suchmuster bilden. Sie sind in der Programmierung unverzichtbare Werkzeuge für Textverarbeitungsaufgaben wie das Suchen, Bearbeiten und Manipulieren von string-Daten. Regex wird in verschiedenen Bereichen eingesetzt, etwa bei der Datenvalidierung, beim Parsen, bei der Syntaxhervorhebung und vielem mehr.

Zum Beispiel lässt sich schnell prüfen, ob eine Zeichenkette wie eine E-Mail-Adresse aussieht:

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(emailRegex.test("[email protected]")); // true
console.log(emailRegex.test("not-an-email"));    // false

Hinweis: Dies ist ein vereinfachtes Muster. Für die Validierung in der Produktion sollten strengere Regeln oder spezialisierte Bibliotheken in Betracht gezogen werden.

Einsatzbereiche von Regex:

• Webentwicklung: Validierung von Formulareingaben, Parsen von URLs und Suche innerhalb von Inhalten.
• Datenanalyse: Extraktion bestimmter Muster aus großen Datensätzen.
• Textbearbeitung: Suchen und Ersetzen von Text in Dokumenten oder Codebasen.
• Programmiersprachen: Die meisten modernen Sprachen, einschließlich JavaScript, unterstützen Regex.

Einen regulären Ausdruck erstellen

JavaScript bietet zwei Möglichkeiten, einen Regex zu erstellen, und der Unterschied ist in der Praxis relevant.

// 1. Literal syntax — compiled once when the script loads.
const re1 = /\d+/g;

// 2. Constructor — useful when the pattern is built from a variable.
const word = "cat";
const re2 = new RegExp(word + "s?", "i"); // matches "cat" or "cats", case-insensitive

console.log(re1 instanceof RegExp); // true
console.log(re2.source, re2.flags); // cats? i

Verwende die Literal-Form für feste Muster — sie ist kürzer und die Engine kompiliert sie im Voraus. Greife auf den RegExp-Konstruktor zurück, wenn das Muster dynamisch ist (zum Beispiel aus Benutzereingaben aufgebaut). Beachte, dass in einem string der Backslash verdoppelt werden muss: "\\d" im Konstruktor entspricht \d in einem Literal.

Wie Regex mit Strings zusammenarbeitet: die wichtigsten Methoden

Ein Muster ist nur zusammen mit einer Methode nützlich, die es ausführt. Das sind die, die du täglich verwenden wirst.

const text = "The year 2023 follows 2022.";

// test() → boolean: "does it match anywhere?"
console.log(/\d{4}/.test(text)); // true

// String.match() with /g → array of all matches
console.log(text.match(/\d{4}/g)); // [ '2023', '2022' ]

// String.replace() → returns a new string
console.log(text.replace(/\d{4}/g, "YEAR")); // The year YEAR follows YEAR.

// RegExp.exec() → one match at a time, with capture groups
console.log(/(\d{4})/.exec(text)[1]); // 2023

// String.matchAll() → iterator of full match objects (needs /g)
for (const m of text.matchAll(/(\d{4})/g)) {
  console.log(m[0], "at index", m.index);
}
// 2023 at index 9
// 2022 at index 22

Wähle die Methode nach Zweck: test() für eine Ja/Nein-Prüfung, match()/matchAll() zum Extrahieren von Daten und replace() zum Umschreiben von Text. Das Flag g (global) verwandelt „die erste Übereinstimmung" in „alle Übereinstimmungen" und ist daher für match, matchAll und Alle-ersetzen-Operationen unverzichtbar.

Ein Muster lesen: häufige Bausteine

Die meisten Muster werden aus einem kleinen Vokabular zusammengesetzt. Hier ein funktionierendes Beispiel, das mehrere Elemente gleichzeitig verwendet:

const log = "2023-06-19 ERROR user=42 path=/login";

// \d  digit      \w  word char     \s  whitespace
// .   any char   +   1 or more     [] a set of chars
const match = log.match(/(\d{4}-\d{2}-\d{2})\s+(\w+)\s+user=(\d+)/);

console.log(match[1]); // 2023-06-19  (the date group)
console.log(match[2]); // ERROR       (the level group)
console.log(match[3]); // 42          (the user id group)

Jedes (...) ist eine Erfassungsgruppe, deren Text im Ergebnis-array erscheint. \d, \w und \s sind Zeichenklassen; die Quantifizierer + und {4} geben an, wie oft das vorherige Token wiederholt werden soll. Kombiniere diese Elemente, und du kannst strukturierte Daten aus einfachem Text extrahieren.

Kurzübersicht: Flags und Quantifizierer

Häufige Fallstricke

Einige Überraschungen stolpern fast alle, die Regex in JavaScript lernen:

• Ein /g-Regex merkt sich, wo er aufgehört hat. Wenn du dasselbe RegExp-Objekt mit test() oder exec() wiederverwendest, erhöht es lastIndex zwischen den Aufrufen. Dadurch kann der zweite test() bei einer eindeutig passenden Zeichenkette false zurückgeben. Verwende jedes Mal ein frisches Literal oder setze re.lastIndex = 0 zurück.

  const re = /a/g;
  const s = "a";
  console.log(re.test(s)); // true
  console.log(re.test(s)); // false — lastIndex moved past the end

  Kopieren

• Dynamische Muster müssen Benutzereingaben escapen. Wenn du einen Regex aus Text aufbaust, den der Benutzer eingegeben hat, werden Zeichen wie . oder ( als Sonderzeichen behandelt. Escape sie zuerst:

  const escape = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  const userInput = "a.b";
  const re = new RegExp(escape(userInput));
  console.log(re.test("axb"));  // false — the dot is now literal
  console.log(re.test("a.b"));  // true

  Kopieren

• Standardmäßig gierig. .+ erfasst so viel wie möglich; füge ? hinzu, um es lazy zu machen (.+?). Siehe Gierige und lazy Quantifizierer.

Lernfahrplan

Diese Seite ist der Einstieg in den Regex-Teil des Kurses. Arbeite die folgenden Kapitel der Reihe nach durch, um ein vollständiges, praxisnahes Verständnis zu erlangen:

1. Muster und Flags — Muster aufbauen und wie die Flags (i, g, m, s, u, y) die Suche verändern.
2. Zeichenklassen — \d, \w, \s und ihre Negationen.
3. Unicode: Flag u und Klasse \p{...} — mehrsprachigen Text und Emoji verarbeiten.
4. Anker: Stringanfang ^ und -ende $ — an Grenzen treffen.
5. Mehrzeiliger Modus der Anker, Flag m — ^ und $ jede Zeile treffen lassen.
6. Wortgrenze \b — ganze Wörter treffen.
7. Sonderzeichen escapen — ., (, ? wörtlich verwenden.
8. Mengen und Bereiche [...] — benutzerdefinierte Zeichensätze.
9. Quantifizierer +, *, ?, {n} — Wiederholungen festlegen.
10. Gierige und lazy Quantifizierer — steuern, wie viel gematcht wird.
11. Erfassungsgruppen — Teile eines Treffers extrahieren und benennen.
12. Rückverweise \n und \k<name> — erfassten Text wiederverwenden.
13. Alternation (ODER) | — eine von mehreren Optionen treffen.
14. Lookahead und Lookbehind — Nullbreite-Assertionen.
15. Katastrophales Backtracking — pathologische Performance diagnostizieren und vermeiden.
16. Sticky-Flag y, Suche an Position — verankertes, positionsbasiertes Matching.

Die Methoden, die diese Muster ausführen, findest du im Kapitel über das RegExp-Objekt und seine Methoden sowie im Kapitel über JavaScript strings.

Am Ende dieser Lektionen wirst du in der Lage sein, effektive Regex-Muster zum Suchen, Validieren und Transformieren von Text in JavaScript zu erstellen.