Regex-Visualisierer
Visualisieren Sie komplexe Regex-Muster als Railroad-Diagramme.
Live-Treffermarkierung garantiert direktes Feedback zum Code.
🔒Ihr Regulärer Ausdruck und die Test-Strings werden an keinen Server übergeben. * Hinweis: Das Zeichnen der Grafik nutzt Regulex (CDN).
Über
Dieses Entwicklerwerkzeug übersetzt komplizierteste Regex-Bausteine automatisch in ein Railroad-Diagramm (Syntaxdiagramm) und hebt Ihnen in Echtzeit Ihre Match-Treffer auf Texten hervor. Während unser bekannter regex-checker sich dem puren Testing verschreibt, wurde diese Seite exklusiv für visuelle Lernerlebnisse und das SVG-Exportieren von Mustern geschaffen.
Verwendung
Ausdruck eingeben
Tippen Sie das Muster ein und wählen Sie Flag-Optionen. Es stehen zudem obige Buttons für Schnellauswahlen bereit.
Diagramm überprüfen
Die Pfad-Architektur des Railroad-Diagramms entfaltet sofort die logische Struktur Ihrer Zeichenketten-Filter.
Testen & Exportieren
Kopieren Sie sich die produzierte SVG-Vektor-Datei blitzschnell zur Ergänzung von Programmierer-Spezifikationen.
Glossar
- Regulärer Ausdruck (Regex/RegExp)
- Eine Zeichenfolge, die eine Sprache oder ein Muster verfasst. Im JS-Standard typischerweise gerahmt von Slashes wie /pattern/flags.
- Railroad-Diagramm
- Visuelle und didaktische Darstellung des maschinellen Such-Algorithmus unter Berücksichtigung von Rückschleifen, optionalem Pfad und Zeichengruppen.
- Capture Group (Erfassungsgruppe)
- Mittels runden Klammern () gesetzter Block, um diesen später ansprechen zu können oder aus Test-Daten herauszulösen.
- Quantifier (Quantifikator)
- Befehle für die Wiederholgenauigkeit: * (0+), + (1+) sowie ? (optional, 0 oder 1) und {n,m} (Min/Max).
- Character Class (Zeichenklasse)
- Mit [ ] klammert man Buchstaben und Zeichen ein, auf die das Filterkriterium rigoros greift. (Bsp.: [^0-9] = Keine Ziffer).
- Lookahead / Lookbehind
- Eine Vorausschau, wie (?=...), bedingt, dass folgende Buchstaben vorhanden sein müssen, schneidet diese aber nicht mit ins reine Text-Ergebnis.
- Flags (g/m/s/u)
- Parameter abseits des Suchmusters (g für Globalsuche, u zur Dekodierung unangebrachter Unicode-Hieroglyphen uvm.).
FAQ
- F.Wie unterscheidet sich dieses Tool vom regex-checker?
- Der regex-checker legt seinen primären Fokus auf reines Testing und Treffer-Validierung. Dieses Tool hier hingegen konzentriert sich auf die detaillierte Darstellung und Erstellung visueller Railroad-Diagramme.
- F.Welche Regex-Syntax wird unterstützt?
- Die JavaScript-Regex-Syntax gemäß ES2024. Dies umfasst neben Standardausdrücken auch Lookahead, Lookbehind und isolierte benannte Capture-Gruppen.
- F.Werden meine streng vertraulichen Daten an Server gesendet?
- Nein. Alle Berechnungen zum Regex und zum Auslesen der Treffer-Strings finden lokal in der Sandbox Ihres Browsers statt.
- F.Bestehen Risiken hinsichtlich ReDoS (Regex Denial of Service)?
- Komplexe Ausdrücke mit exzessiv katastrophalem Backtracking (Rückverfolgung) können den Tab einfrieren lassen. Testen Sie daher stets an kurzen Texten.
- F.Erfordert das Tool eine stete Internetverbindung?
- Für die initiale Darstellung des Railroad-Diagramms wird ein Skript von einem CDN geladen (einmalig). Die Match-Test-Funktion als Backup funktioniert auf Wunsch komplett offline.
Anwendungsfälle
Lernen von Regex
Wenn das Gewirr an Klammern und Pluszeichen undurchdringbar wird, löst die Railroad-Karte den Blockadenknoten im Gehirn sofort auf.
Debugging von Mustern
Verifizieren und reparieren Sie fehlerhafte Logik-Routen von Skripten, ehe diese verheerend ins Live-System eingepflegt werden.
Team-Dokumentation
Fügen Sie SVG-Diagramme in Ihr Projektmanagement (z.B. Jira) ein, um Front-End-Testern die Validation der Applikation nahezubringen.
API-Darstellungen
Bieten Sie Stakeholdern exakte Struktur-Diagramme und klare visuelle Restriktionen für Input-Formulare auf einer Webseite.