JavaScript-Regex zum Prüfen, Ersetzen und Extrahieren

JavaScript-Regex gleicht Text mit Mustern für Validierung, Extraktion und Ersetzung ab. Immer wenn Eingaben einem vorhersehbaren Format folgen, etwa bei Datumswerten, IDs oder Codes, kann ein regulärer Ausdruck passende Teile prüfen oder herausziehen. Capture Groups in Klammern isolieren Teiltreffer, sodass ein einzelnes Muster strukturierte Daten liefert, ohne den String manuell zu zerlegen.

JavaScript-Regex-Beispiel zur Musterextraktion

JavaScript-Editor

const text = "Bestellung #A-123 wurde am 2024-03-15 versendet";
const datumsMuster = /(\d{4})-(\d{2})-(\d{2})/;

console.log("Enthält Datum:", datumsMuster.test(text));

const [, jahr, monat, tag] = text.match(datumsMuster);
console.log("Extrahiert:", jahr + "/" + monat + "/" + tag);

const normalisiert = text.replace(datumsMuster, "$1/$2/$3");
console.log("Ersetzt:", normalisiert);

Ausgabe:

Die Ausgabe erscheint hier...

Ausgabe:

Enthält Datum: true
Extrahiert: 2024/03/15
Ersetzt: Bestellung #A-123 wurde am 2024/03/15 versendet

So funktioniert dieses Beispiel

/(\d{4})-(\d{2})-(\d{2})/ definiert ein Regex-Literal, das ein Datum im ISO-Format trifft. \d{4} steht für genau vier Ziffern; Klammern erzeugen Capture Groups für Jahr, Monat und Tag.
datumsMuster.test(text) liefert true, wenn das Muster irgendwo im String vorkommt, ohne Match-Details zurückzugeben.
text.match(datumsMuster) gibt ein Array zurück: den vollständigen Treffer an Index 0, danach jede Capture Group. Gibt es keinen Treffer, kommt null zurück, deshalb vor dem Destructuring bei Nutzereingaben absichern.
text.replace(datumsMuster, "$1/$2/$3") ersetzt den passenden Teilstring. $1, $2 und $3 setzen die Capture Groups ein (Jahr, Monat, Tag).

Was ist ein JavaScript-Regulärer Ausdruck?

Ein JavaScript-Regulärer Ausdruck ist ein RegExp-Objekt, oft auch JavaScript regexp genannt, um Zeichenkombinationen in Strings zu finden. JavaScript-Regex erstellst du als Literal (/pattern/flags) oder über den RegExp-Konstruktor (new RegExp("pattern", "flags")). Die Engine läuft von links nach rechts und liefert den ersten Treffer, außer das globale Flag (g) ist gesetzt.

Häufige Fehler mit JavaScript-Regex

Eine globale Regex mit test oder exec verwenden.

const re = /\d+/g;
console.log(re.test("abc 123")); // true
console.log(re.test("abc 123")); // false (lastIndex wurde weitergeschoben)
re.lastIndex = 0;
console.log(re.test("abc 123")); // true

Mit g oder y sind test/exec über lastIndex zustandsbehaftet. Setze den Wert zurück oder vermeide g bei reinen Wahr/Falsch-Prüfungen.

Doppeltes Escaping in new RegExp() vergessen.

new RegExp("\d+");  // Muster ist "d+"
new RegExp("\\d+"); // eine oder mehr Ziffern

In einem String-Literal erzeugt \\ einen einzelnen Backslash, sodass die Regex-Engine \d statt d erhält.

Regex-Literal vs. RegExp-Konstruktor

Regex-Literal (`/pattern/`)	`new RegExp(pattern)`
Beim Laden geparst; Syntaxfehler früh sichtbar	Zur Laufzeit kompiliert; Fehler erst beim Ausführen
Kein String-Escaping nötig	Doppelter Backslash erforderlich (`\\d`)
Muster ist im Quellcode fest	Muster kann aus Variablen gebaut werden

Nutze ein Literal für statische Muster. Nutze den Konstruktor, wenn das Muster dynamische Werte enthält, aber escapiere Nutzereingaben zuerst, damit es keine Regex-Injection und keine unbeabsichtigten Metazeichen gibt.

const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
const re = new RegExp(escapeRegExp("a+b?"), "i");

Weitere Beispiele

Alle Vorkommen mit replaceAll ersetzen:

const maskiert = "karte 4111-1111-1111-1111".replaceAll(/\d{4}/g, "****");
console.log(maskiert); // "karte ****-****-****-****"

replaceAll benötigt das g-Flag, wenn das Suchargument eine Regex ist; ohne g wird ein TypeError geworfen.

Alle Treffer mit matchAll extrahieren:

const tags = [...("#js #regex #es2022".matchAll(/#(\w+)/g))];
console.log(tags.map((m) => m[1])); // ["js", "regex", "es2022"]

matchAll liefert einen Iterator aus Match-Arrays, jedes inklusive Capture Groups. Durch das Ausbreiten in ein Array kannst du auf alle Treffer vollständig zugreifen.

FAQ

Wie testet man eine Regex in JavaScript?

Rufe regex.test(string) für ein Wahr/Falsch-Ergebnis auf, oder string.match(regex) für Match-Details. Für mehrere Treffer verwende string.matchAll(regex) mit dem g-Flag; das gibt einen Iterator mit allen Match-Arrays inklusive Capture Groups zurück.

Unterstützt JavaScript Lookbehind-Assertions?

Ja. Positives Lookbehind (?<=...) und negatives Lookbehind (?<!...) funktionieren in den meisten modernen JavaScript-Engines, aber ältere Browser und manche eingebettete Laufzeitumgebungen können einen Syntaxfehler werfen.

Wann sollte man `new RegExp()` statt eines Literals verwenden?

Verwende den RegExp-Konstruktor, wenn das Muster beim Schreiben noch nicht feststeht, etwa bei vom Nutzer gelieferten Suchbegriffen. In allen anderen Fällen ist ein Literal besser: kein doppeltes Escaping und Syntaxfehler erscheinen beim Parsen statt erst zur Laufzeit.