Wie funktioniert Regex in deinem Browser?
Jede JavaScript-Laufzeit bringt eine native Regex-Engine mit — new RegExp(pattern, flags) kompiliert dein Muster, danach treiben Methoden wie String.prototype.match, String.prototype.replace und RegExp.prototype.exec sie über eine beliebige Eingabe. Dieser Tester verpackt diese Engine in eine Oberfläche, sodass du Muster bearbeiten, ausführen und prüfen kannst, ohne den Browser zu verlassen. Nichts, was du eingibst — Muster, Flags, Test-String oder Ersetzung — wird über das Netzwerk gesendet.
Wie funktioniert der Regex-Tester?
Die Pipeline besteht aus wenigen kurzen Schritten, die alle bei jedem Tastendruck im Client laufen (mit 150 ms Debounce, damit das Tippen flüssig bleibt):
- Der Körper deines Musters wird aus dem Eingabefeld oben gelesen (keine führenden oder schließenden
/-Delimiter — die sind nur Deko). Die ausgewählten Flag-Pillen werden zu einem Flag-String wiegiodergimsuyverkettet. new RegExp(patternBody, flags)kompiliert das Muster. Wirft die Engine einenSyntaxError(z. B. nicht-passende Klammern oder ein ungültiger Escape), wird die Meldung über dem Test-String angezeigt und die Trefferliste geleert. Der Kompilierfehler ist die echteerr.messagevon V8 / SpiderMonkey / JavaScriptCore, sie entspricht also dem, was du in den DevTools sehen würdest.- Für die Trefferliste zählt der Tester immer mit einem synthetischen Global-Flag auf — selbst wenn du
gabschaltest, listet er weiter jeden Treffer. Der Standardschutz gegen Nullbreiten-Treffer (if (m.index === rx.lastIndex) rx.lastIndex++) verhindert, dass die Schleife auf Mustern stehen bleibt, die auf einen leeren String passen. Der Ersetzungsmodus respektiert deinen echten Flag-Satz, sodass sich$&wieString.prototype.replaceverhält. - Zwischen jeder Iteration prüft der Tester
performance.now() - startund bricht ab, sobald 50 ms vergangen sind. Das schützt vor katastrophalem Backtracking auf Eingaben wie(a+)+$gegen eine lange Folge vona— der Tab würde sonst hängen. Der Schutz ist Best-Effort: ein pathologisches Einzeltreffer-Muster kann immer noch Zeit innerhalb einesexec-Aufrufs verbrauchen. Sollte das passieren, lade den Tab neu und schreibe das Muster mit einem nicht-gierigen Quantor oder einem possessiven Stil um (z. B.[^x]*x). - Der Test-String wird an jedem Treffer-Bereich in Segmente zerlegt, und die übereinstimmenden Segmente werden in
<mark class="rx-match rx-cap-N">-Elemente eingewickelt, wobeiNsechs Paletten-Farben zyklisch durchläuft, damit benachbarte Treffer auf einen Blick zu unterscheiden sind. Die nummerierten Gruppen (m[1],m[2], …) und benannten Gruppen (m.groups) jedes Treffers werden als beschriftete Zeilen darunter dargestellt; ist dasd-Flag gesetzt, werden auch[start, end]-Indizes pro Gruppe angezeigt.
Warum diesen Regex-Tester nutzen?
- Datenschutz: Jedes Muster, jeder Test-String und jede Ersetzung läuft in deinem Browser über die eingebaute JavaScript-RegExp-Engine. Nichts verlässt den Tab — wichtig, wenn die Eingabe ein Kundenlog, ein geleaktes Credential-Muster oder sonst etwas ist, das du nicht in einen gehosteten SaaS-Regex-Spielplatz einfügen würdest.
- Ehrlicher Dialekt: Der Tester nutzt exakt die Regex-Engine, die Node.js, Chrome, Safari, Firefox und jeder browserbasierte Formularvalidator ausführt. Es gibt keine Perl-Dialekt-Übersetzungsschicht, die subtile Unterschiede verschleiert — was hier funktioniert, funktioniert in deinem Code.
- Debugging von Captures und benannten Gruppen: Jede nummerierte Gruppe (
$1,$2, …) und benannte Gruppe ($<year>) wird pro Treffer angezeigt, sodass du einen Parser bauen und die Slots ohne Raten ablesen kannst. Der Ersetzungsmodus erlaubt dir freie Gruppen-Kombinationen —$2-$1vertauscht die ersten beiden Slots,$<name>setzt einen benannten Slot ein und$&gibt den ganzen Treffer aus. - Schutz vor katastrophalem Backtracking: Eine 50-ms-Obergrenze bei der Aufzählung bricht pathologische Muster wie
(a+)+$ab, bevor sie den Tab einfrieren. Du siehst eine erklärende Fehlermeldung statt eines hängenden Browsers, und die Seite erholt sich sofort.
Was sind häufige Anwendungen eines Regex-Testers?
Reguläre Ausdrücke tauchen in Webentwicklung, Sicherheit und Datenarbeit auf — dieser Tester zielt auf die häufigsten Anwendungsfälle:
- Formular-Validierung: Prototypisiere ein E-Mail-, Telefon- oder PLZ-Muster, füge Beispiel-Eingaben in den Test-String ein und prüfe vor dem Deploy, dass jeder positive Fall trifft und jeder negative Fall nicht trifft.
- Log-Auswertung: Füge einen NGINX-, Anwendungs- oder Audit-Log-Ausschnitt ein, schreibe ein Muster mit benannten Gruppen für die relevanten Teile (
(?<ip>…) (?<path>…)) und lies die erfassten Slots pro Treffer ab, um zu bestätigen, dass dein Parser korrekt ist. - Refactor-Suche-und-Ersetzen: Nutze den Ersetzungsmodus, um Bezeichner in einem Schnipsel umzuschreiben —
(\w+)\.set(\w+)\(→$1.$2 =macht aus Setter-Aufrufen Eigenschaftszuweisungen, und die Live-Vorschau zeigt das Ergebnis, bevor du es in einem Codemod festschreibst.
Wie sieht ein Regex-Beispiel aus?
Nimm das Muster (\d{4})-(\d{2})-(\d{2}) mit dem g-Flag, ausgeführt gegen den Test-String release 2025-11-15, prerelease 2026-05-25. Die Engine findet zwei Treffer. Der erste ist 2025-11-15 mit Gruppe 1 = 2025, Gruppe 2 = 11, Gruppe 3 = 15. Der zweite ist 2026-05-25 mit derselben Gruppenform. Im Ersetzungsmodus schreibt die Vorlage $3/$2/$1 beide Daten um zu 15/11/2025 und 25/05/2026 — eine ISO-zu-DMY-Konvertierung in einem Muster, die du visuell prüfen kannst, bevor du das Muster in ein Skript einbaust.
Nutze diesen Tester als schnellen Weg für jede Regex-Arbeit — Aufbau, Debugging oder Umschreiben von Mustern. Alles läuft lokal; nichts wird protokolliert; die Regex-Engine ist die, die dein Browser mitbringt, also entspricht das Verhalten dem, was Produktionscode zur Laufzeit sieht.