Regex-Visualizer

• Interaktives Eisenbahndiagramm: Sehen Sie Ihren regulären Ausdruck in Echtzeit als professionelles Eisenbahn-/Syntaxdiagramm dargestellt. Jedes Token – Literale, Gruppen, Quantifizierer, Alternationen und Lookaheads – wird als navigierbare visuelle Spur angezeigt.
• AST-Aufschlüsselung mit Token-Baum: Erkunden Sie einen faltbaren abstrakten Syntaxbaum mit jedem geparsten Knoten – Sequenzen, Alternationen, benannte Gruppen, Quantifizierer, Rückverweise – samt verständlichen Beschreibungen, um genau zu bestimmen, was jeder Teil Ihrer Regex tut.
• Live-Treffertest mit Hervorhebung: Fügen Sie eine Testzeichenkette ein und sehen Sie Treffer sofort hervorgehoben. Eine Capture-Gruppen-Tabelle zeigt jeden Treffer mit seinen benannten und nummerierten Gruppenwerten und hilft, die Korrektheit vor dem Produktionseinsatz zu prüfen.
• 100 % kostenlos – ohne Anmeldung, ohne Server: Das gesamte Parsen, die Diagrammerzeugung und die Trefferauswertung laufen direkt in Ihrem Browser mit der nativen JavaScript-Regex-Engine. Keine Daten verlassen Ihr Gerät, wodurch das Tool für sensible Muster wie Authentifizierungsregeln oder PII-Validierungen sicher ist.

• Muster-Debugging: Erkennen Sie sofort nicht übereinstimmende Gruppen, Fallen bei gierigen Quantifizierern und Probleme mit der Reihenfolge von Alternationen, ohne Code auszuführen – einfach durch Betrachten des visuellen Diagramms.
• Code-Reviews: Teilen Sie bei Pull-Request-Reviews einen Link zu einer visualisierten Regex, damit Reviewer die Absicht prüfen können, ohne rohe Escape-Sequenzen im Kopf zu analysieren.
• Sicherheitsaudit: Prüfen Sie Eingabevalidierungsmuster auf Risiken durch katastrophales Backtracking (ReDoS). Der AST-Baum macht verschachtelte Quantifizierer und mehrdeutige Alternationen sofort sichtbar.
• Reguläre Ausdrücke lernen: Anfänger können einfache Muster eingeben und schrittweise Funktionen hinzufügen, wobei sie genau sehen, wie sich jede Zeichenklasse, jeder Quantifizierer oder jede Gruppe auf das Diagramm auswirkt.
• Dokumentationserstellung: Exportieren oder screenshotten Sie Eisenbahndiagramme für API-Dokumentationen, Wikis oder technische Blogbeiträge, um komplexe Validierungslogik ohne lange Texte zu erklären.
• Plattformübergreifendes Testen: Testen Sie das Verhalten eines Musters gegen mehrere Beispielzeichenketten gleichzeitig und prüfen Sie die Extraktion benannter Capture-Gruppen, wie sie in URL-Routing, Log-Parsern oder CSV-Splittern verwendet wird.

Ein Eisenbahn- (oder Syntax-)Diagramm stellt eine formale Grammatik als Gleisnetz dar. Das Muster wird von links nach rechts gelesen: Jedes Token ist ein beschrifteter Kasten, der durch Linien verbunden ist. Gibt es eine Auswahl (Alternation über | ), teilen sich die Gleise vertikal und laufen nach den Alternativen wieder zusammen. Ist ein Token optional oder wiederholt, wird oberhalb des Elements ein Schleifenbogen gezeichnet, um den Quantifizierer anzuzeigen. Das entspricht dem mentalen Modell, das die meisten Entwickler beim Nachdenken über eine Regex verwenden – von links nach rechts, mit Verzweigungen für Auswahl und Schleifen für Wiederholung.

Neben dem Diagramm zeigt der Tab AST-Aufschlüsselung den vollständigen abstrakten Syntaxbaum, der aus Ihrem Muster geparst wurde. Jeder Knoten hat einen Typ (Sequenz, Alternation, Gruppe, Quantifizierer, Literal, Zeichenklasse, Escape, Anker, Rückverweis) und eine verständliche Beschreibung. Der Baum ist vollständig faltbar, sodass Sie sich auf bestimmte Teilmuster konzentrieren können, ohne den Kontext zu verlieren.

Der Tab „Testen & Abgleichen“ ermöglicht es, eine Beispieleingabe einzufügen und sofort zu sehen, welche Teile der Zeichenkette zu Ihrem Muster passen. Treffer werden inline hervorgehoben, und eine Capture-Gruppen-Tabelle zeigt jede nummerierte und benannte Gruppe aus jedem Treffer – dieselben Daten, die Ihr Anwendungscode bei String.prototype.matchAll() oder RegExp.prototype.exec() erhält.

Der Visualizer unterstützt den vollständigen ECMAScript-Regex-Funktionsumfang, einschließlich Zeichenklassen ( [a-z] , [^0-9] ), Kurzschreibweisen ( \d , \w , \s ), Anker ( ^ , $ , \b ), erfassende und nicht erfassende Gruppen, benannte Gruppen über , Lookaheads ( (?=…) , (?!…) ), Lookbehinds ( (?<=…) , (?<!…) ), Rückverweise ( \1 , \k<name> ) und alle Quantifizierer inklusive lazy-Varianten ( *? , +? , ?? ).