Regex in JavaScript

Nachdem du in L5 Python's re-Modul kennengelernt hast, geht's hier um JavaScript. Anders als Python hat JS eine eingebaute Regex-Syntax: das Pattern steht direkt im Code zwischen zwei Slashes – wie ein eigener Datentyp. Das macht JS-Regex kompakt, ist aber auch eine eigene Lernkurve.

Diese Lektion zeigt die zwei Möglichkeiten Regex in JS zu erzeugen, alle wichtigen String- und RegExp-Methoden, das Flag-System, und die Eigenheiten gegenüber Python. Wer Frontend mit DOM-Manipulation und Form-Validierung macht, braucht Regex ständig.

1) Zwei Wege Regex zu erzeugen

In JavaScript hast du zwei Möglichkeiten ein Regex-Objekt zu erstellen. Regex-Literal (mit Slashes) und RegExp-Konstruktor:

regex_create.jsJavaScript

1// 1. Literal-Syntax (häufig, kompakt)
2const re = /\d+/g;   // Pattern zwischen / und /, Flags hinten
3
4// 2. Konstruktor (für dynamische Patterns)
5const re2 = new RegExp("\\d+", "g");
6
7// Konstruktor mit Variable im Pattern:
8const word = "Berlin";
9const re3 = new RegExp(`\\b${word}\\b`, "gi");

Wann was nutzen?

Literal: fast immer. Kompakter, kein doppeltes Escape, syntaxgehighlightet in Editoren.
Konstruktor: wenn das Pattern dynamisch zur Laufzeit gebaut wird – z.B. aus User-Eingabe oder einer Variable.

Wichtig: im Konstruktor sind die Patterns Strings – Backslashes müssen verdoppelt werden. \d als Pattern-Literal, aber "\\d" im String. Im Literal hast du keinen String-Escape-Schritt: was du tippst, ist was die Engine bekommt.

2) Die wichtigsten Methoden

Anders als Python (alle Funktionen im re-Modul) hat JS die Regex-Operationen auf zwei Stellen verteilt: einige auf dem RegExp-Objekt, einige auf String-Objekten. Das ist verwirrend am Anfang. Übersicht:

Regex-Methoden in JavaScript

re.test(str)

→ boolean

Prüft ob das Pattern matched. Liefert true/false. Pflicht-Methode für Validierung – schnell und klar.

re.exec(str)

→ Array | null

Findet ersten Match, gibt Array mit Match + Gruppen zurück. Mit g-Flag kann mehrfach aufgerufen werden.

str.match(re)

→ Array | null

Ohne g-Flag: erstes Match mit Gruppen. Mit g-Flag: Array aller Treffer (ohne Gruppen!).

str.matchAll(re)

→ Iterator

Modernste Methode (ES2020). Liefert Iterator von Match-Arrays inkl. Gruppen. Braucht g-Flag.

str.search(re)

→ number

Findet Position des ersten Matches (Index) oder -1 wenn nicht gefunden. Wie indexOf mit Pattern.

str.replace(re, repl)

→ string

Ersetzt Matches. repl kann String mit $1 oder Funktion sein. Mit g alle, sonst nur erstes.

str.replaceAll(re, repl)

→ string

Ersetzt explizit alle. Mit Regex muss g-Flag dabei sein! Sicherer als replace.

str.split(re)

→ Array

Teilt String am Pattern. Wie split() mit Pattern statt String.

Faustregel: test() für „matched ja/nein?" (Validierung). matchAll() für „alle Matches mit Gruppen". replace() für Umwandlungen. search() für Position. Die alte match() ist tückisch wegen unterschiedlichem Verhalten je nach g-Flag – heute lieber matchAll().

3) Die Flags

JavaScript-Regex haben sechs Flags, jeweils ein einzelner Buchstabe. Im Literal stehen sie hinter dem schließenden Slash, im Konstruktor im zweiten Argument:

Flag	Name	Wirkung
`g`	global	Alle Treffer finden (statt nur erstem). Pflicht für matchAll/replaceAll.
`i`	insensitive	Case-insensitive – Groß/Klein egal.
`m`	multiline	`^`/`$` matchen Zeilenanfang/-ende statt String.
`s`	dotAll	`.` matched auch Newlines (ES2018).
`u`	unicode	Korrekte Unicode-Behandlung, Unterstützung für `\u{...}`
`y`	sticky	Match nur ab `lastIndex`, nirgendwo anders.

Flags kombinieren: einfach aneinanderhängen. /pattern/gim = global, insensitive, multiline. Reihenfolge egal, gleiche Flags doppelt verboten.

4) Interaktiver Flag-Playground

Spiel mit den Flags und sieh die Auswirkungen sofort. Klick die Flags an/aus und beobachte wie sich die Treffer ändern:

Flag-Playground: Auswirkungen verstehen

global

insensitive

multiline

dotAll

Pattern:

Text:

Resultat:

Aktive Flags: (keine)

Probier verschiedene Kombinationen:

Ohne Flags: nur „Hallo" am Anfang (case-sensitive) wird gefunden, alle anderen Vorkommen werden mit ^-Anker am Stringanfang abgeblockt.
+ g: macht keinen Unterschied weil ^ nur einmal matched (Stringanfang).
+ i: jetzt findet er auch HALLO als Variante.
+ m: jetzt matched ^ auch nach Newline → alle Zeilen-Anfänge.
g + i + m zusammen: alle Hallo-Varianten am Anfang jeder Zeile, case-insensitive.

5) Named Groups und Backreferences

Wie in L3 erklärt: Named Groups machen Code lesbar. JavaScript-Syntax: (?<name>...) – ohne das P von Python:

named.jsJavaScript

1const str = "Datum: 17.05.2026";
2const m = str.match(/(?<day>\d{2})\.(?<month>\d{2})\.(?<year>\d{4})/);
3
4console.log(m.groups);
5// { day: "17", month: "05", year: "2026" }
6
7console.log(m.groups.day);   // "17"
8console.log(m.groups.year);  // "2026"

Im Replace-Pattern referenzierst du Named Groups mit $<name>:

Replace mit Named Groups

1const iso = str.replace(
2    /(?<day>\d{2})\.(?<month>\d{2})\.(?<year>\d{4})/,
3    "$<year>-$<month>-$<day>"
4);
5// "Datum: 2026-05-17"

Verfügbar seit ES2018 – moderne Browser und Node.js können das. In älteren Umgebungen brauchst du nummerierte Groups ($1, $2, $3).

6) replace mit Funktion: maximale Flexibilität

Wie Python's re.sub: JavaScript's replace akzeptiert eine Funktion als zweites Argument. Die Funktion bekommt den Match plus alle Gruppen und gibt den Ersatz zurück. Damit löst du komplexe Transformationen elegant:

replace_fn.jsJavaScript

1// Alle Zahlen verdoppeln
2"a=5, b=10, c=20".replace(/\d+/g, n => Number(n) * 2);
3// → "a=10, b=20, c=40"
4
5// Mit Gruppen-Zugriff:
6"Anna: 28, Bob: 35".replace(
7    /(\w+): (\d+)/g,
8    (match, name, age) => `${name} ist ${age}`
9);
10// → "Anna ist 28, Bob ist 35"

Die Funktion bekommt als Parameter: 1. den ganzen Match, 2.+ alle nummerierten Gruppen, dann den Offset im Original-String, den Original-String, und (bei Named Groups) das groups-Objekt. Sehr mächtig.

7) Lookbehind: in JavaScript erst seit kurzem

Eine wichtige Eigenheit: Lookbehind-Assertions (?<=...) und (?<!...) sind in JavaScript erst seit ES2018 verfügbar. Ältere Browser (Internet Explorer, Safari vor 16.4) unterstützen sie nicht. Wenn du für ältere Targets entwickelst: vermeiden oder polyfillen.

Lookbehind-Beispiel

1// Alle Preise in EUR finden (nicht USD)
2const str = "€100, $50, €200, $80";
3const eurPrices = str.match(/(?<=€)\d+/g);
4// → ["100", "200"]

Lookahead dagegen ((?=...), (?!...)) gibt's in JavaScript schon ewig – ungefähr ES3. Bei alten Targets ist nur Lookbehind das Problem.

8) Python vs. JavaScript – Cheat-Sheet

Wenn du zwischen beiden Sprachen wechselst, hilft eine Vergleichstabelle. Die Patterns sind 95% identisch, nur die Drumherum-API unterscheidet sich:

Aufgabe	Python (re-Modul)	JavaScript
Pattern erstellen	re.compile(r"\d+")	/\d+/ oder new RegExp("\\d+")
Test ob matched	re.search(pat, s)	re.test(s)
Erstes Match	re.search()	re.exec() oder s.match()
Alle Matches	re.findall()	[...s.matchAll(re)]
Ganzer String matched?	re.fullmatch()	/^...$/ nutzen
Ersetzen	re.sub(pat, repl, s)	s.replace(re, repl)
Teilen	re.split(pat, s)	s.split(re)
Named Groups	(?P<name>...)	(?<name>...)
Backref im Replace	\1 oder \g<name>	$1 oder $<name>
Case-Insensitive	re.IGNORECASE	/i
Multiline	re.MULTILINE	/m
Dot matches all	re.DOTALL	/s

Bei der täglichen Arbeit reicht oft eine Sprache. Aber für IT-Profis ist es nicht ungewöhnlich beide zu nutzen (Backend Python, Frontend JS) – diese Tabelle hilft beim Wechsel.

9) Stolperfallen in JavaScript-Regex

Spezifische Fallen die dich in JS treffen:

exec() mit g-Flag und lastIndex: bei wiederholtem Aufruf läuft die Engine intern weiter. Wenn du den selben Regex auf einen anderen String nutzt, ist der lastIndex noch vom alten – kann verwirren. Lösung: re.lastIndex = 0 manuell, oder matchAll() nutzen.
match() Verhalten je nach g: ohne g → Array mit Match + Gruppen. Mit g → Array nur mit Matches, KEINE Gruppen. Das ist eine echte Inkonsistenz. Lösung: matchAll() mit g-Flag, gibt Iterator von vollständigen Match-Arrays.
String → Regex-Escape: wenn du User-Input in einen Regex packst, kann der enthaltene Sonderzeichen haben. Erst escapen: str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&').
replace ohne g ersetzt nur erstes: "a a a".replace(/a/, "X") → „X a a". Will man alle ersetzen: /a/g oder String-replaceAll: "a a a".replaceAll("a", "X"). Ohne g und mit replaceAll → TypeError.
Source-Property: zum Debuggen kannst du re.source und re.flags anschauen.

10) Frontend-Validierung mit Regex

Ein typischer JS-Use-Case: Formular-Validierung im Browser. Beispiel für eine E-Mail-Eingabe:

validate.jsJavaScript

1function isValidEmail(email) {
2    const re = /^[\w.-]+@[\w.-]+\.\w{2,}$/;
3    return re.test(email);
4}
5
6// Im Form-Event:
7document.querySelector("#email").addEventListener("blur", e => {
8    if (!isValidEmail(e.target.value)) {
9        e.target.setCustomValidity("Ungültige E-Mail");
10    }
11});

HTML5 hat auch pattern-Attribute auf Input-Feldern für deklarative Regex-Validierung:

HTML5 pattern-Attribut

1<input type="text" pattern="\d{5}"
2       title="5-stellige PLZ" required>

Der Browser prüft automatisch beim Submit. Wichtig: das pattern wird implizit als ^...$ behandelt – muss den ganzen Wert matchen. Mehr zu Form-Validierung in L8.

11) ReDoS – auch in JavaScript ein Problem

Wie in L4 beschrieben: katastrophales Backtracking kann zu Hängern führen. In JavaScript ist das besonders problematisch wenn User-Input gegen einen schlecht geschriebenen Regex geprüft wird – ein Angreifer kann mit einem speziellen String die Webseite lahmlegen.

Wichtige Verteidigungen:

Anchor verwenden: ^ und $ begrenzen die Suche
Negierte Klassen statt lazy: [^"]* statt .*?
Maximale Input-Länge prüfen: vor dem Regex-Match die Länge limitieren
Timeout-Mechanismus: in Web Workers ausführen mit Timeout (komplex aber möglich)
Statisch analysieren: Tools wie safe-regex oder vuln-regex-detector erkennen problematische Patterns

Mehr zu sicheren Regex in K11 Secure Coding. Beim Debugging kann ein hängendes test() auch ein ReDoS-Symptom sein.

12) Performance-Tipps für JavaScript

Ein paar Faustregeln für schnellen Regex-Code:

Pattern wiederverwenden: Regex-Literal außerhalb von Loops definieren, nicht in jedem Durchlauf neu.
test() statt match() wenn du nur ja/nein brauchst – ist schneller und gibt klares Boolean.
String-Methoden bevorzugen wenn keine Regex nötig: str.startsWith("x") ist 10x schneller als /^x/.test(str).
Anchor bei test: /^pattern/ bricht früh ab wenn Anfang nicht matched.
Spezifische Patterns: [a-z]+ ist schneller als \w+ wenn du wirklich nur Kleinbuchstaben willst.

Zusammenfassung

JavaScript-Regex haben zwei Formen: Literal /pattern/flags (kompakt) und Konstruktor new RegExp(...) (für dynamische Patterns). Hauptmethoden: re.test() (boolean), str.matchAll(re) moderner Iterator (ES2020), str.replace(re, repl) mit String oder Funktion. Flags: g/i/m/s/u/y. Named Groups: (?<name>...), Match hat .groups-Property. Lookbehind erst seit ES2018. Stolperfallen: match() verhält sich je nach g-Flag unterschiedlich (lieber matchAll), replace ohne g ersetzt nur erstes. ReDoS auch in JS ein Sicherheitsrisiko – Input-Länge prüfen.