Regex-Visualisierer (Railroad-Diagramm)

So visualisieren Sie einen regulären Ausdruck

1. Geben Sie Ihr Muster in das Feld „Regulärer Ausdruck“ ein oder fügen Sie es ein. Sie können auch ein komplettes JavaScript-Literal wie /^\d{3}-\d{4}$/gm einfügen: Die Schrägstriche werden entfernt, und die Flags landen automatisch im Flags-Feld.
2. Ergänzen Sie bei Bedarf Flags (beliebige von d g i m s u v y). Flags ändern die Darstellung mancher Teile: Mit m werden ^ und $ zu „Zeilenanfang“ und „Zeilenende“, mit s wird der Punkt zu „beliebiges Zeichen“.
3. Das Diagramm aktualisiert sich während der Eingabe. „Diagramm zeichnen“ zeichnet es auf Wunsch neu, und „Nächstes Beispiel“ blättert durch einige typische Muster (E-Mail, Telefonnummer, Hex-Farbe, Preis, HTML-Tag, URL).
4. Lesen Sie das Diagramm von links nach rechts, vom gefüllten Punkt bis zum umrandeten Punkt. Jeder Weg, dem Sie folgen können, ist eine Zeichenkette, auf die das Muster passt.
5. Nutzen Sie „SVG herunterladen“ für eine gestochen scharfe Vektorgrafik (Dokumentation, Folien), „PNG herunterladen“ für ein Bild in doppelter Auflösung oder „SVG-Code kopieren“, um das Markup direkt in eine Webseite einzufügen.

Fahren Sie mit der Maus über ein Kästchen, um zu sehen, aus welchem Teil des Musters es stammt und an welcher Position es steht.

So lesen Sie ein Railroad-Diagramm

Railroad-Diagramme, auch Syntaxdiagramme genannt, beschreiben eine Grammatik als ein Netz aus Gleisen. Ein regulärer Ausdruck ist genau so eine Grammatik, deshalb zeigt die Zeichnung seine Struktur viel besser als eine dichte Zeile voller Symbole:

• Blaue Kästchen sind wörtlicher Text, der genau so vorkommen muss, zum Beispiel „@“.
• Grüne Kästchen sind Zeichentypen (\d Ziffer, \w Wortzeichen, . beliebiges Zeichen …) und Zeichenklassen. Eine Klasse wie [\w.+-] wird zu einem Kästchen mit der Überschrift „eines von“, das jedes Element auflistet; eine negierte Klasse [^…] ist rot und trägt die Überschrift „keines von“.
• Lila Pillen sind Anker und Grenzen: Anfang und Ende von Text oder Zeile, \b als Wortgrenze. Sie passen auf eine Position, nicht auf ein Zeichen.
• Orange gestrichelte Kästchen sind Rückverweise wie \1 oder \k<name>: derselbe Text, den eine Gruppe zuvor erfasst hat.
• Gestrichelte Rahmen sind Gruppen. Erfassungsgruppen werden in der Reihenfolge ihrer öffnenden Klammer nummeriert („Gruppe #2 ‚domain‘“); nicht erfassende Gruppen (?:…) erhalten keinen Rahmen. Lookaheads und Lookbehinds bekommen einen rosa Rahmen mit „gefolgt von“ bzw. „nach“, weil sie den Text prüfen, ohne ihn zu verbrauchen.
• Parallele Gleise sind Alternativen, getrennt durch |.
• Ein Gleis über einem Element erlaubt, es zu überspringen (?, *, {0,n}). Ein Gleis darunter mit Pfeil führt zurück und wiederholt es (+, *, {n,m}). Andere Anzahlen als die üblichen stehen unter der Schleife, etwa „2- bis 5-mal“, und genügsame (lazy) Quantifizierer (+?, *?) sind mit „genügsam“ markiert.

Fehlermeldungen mit Position

Das Muster wird von der JavaScript-Regex-Engine Ihres Browsers geprüft. Was dieses Tool akzeptiert, ist also genau das, was new RegExp() mit denselben Flags akzeptiert. Lehnt die Engine das Muster ab, zeigt das Tool auf das fehlerhafte Zeichen – mit Position und einem Zirkumflex unter dem Muster. Erkannt werden eine „)“ ohne Gegenstück, eine nie geschlossene Gruppe, eine Zeichenklasse ohne ], ein Quantifizierer ohne etwas zu wiederholen (*a, a|+), ein einzelner Backslash am Ende sowie {n,m}-Quantifizierer, bei denen n größer als m ist. Andere Fehler, etwa ein Rückverweis auf einen nicht vorhandenen Gruppennamen, erscheinen mit der Meldung des Browsers.

Der Ausdruck wird nur kompiliert, um ihn zu prüfen: Er wird nie auf einen Text angewendet, und nichts verlässt Ihren Browser.