Regex Visualizer
Visualize regex patterns as Railroad Diagrams.
Live match highlighting on test strings.
🔒Regex and test strings are never sent to any server. ※ Railroad Diagram uses Regulex (CDN).
About
A developer tool that renders regular expressions as Railroad Diagrams (syntax diagrams) and displays live match results. The existing regex-checker only supports pattern testing. This tool is specifically designed for visualizing regex structure — a completely separate feature.
How to Use
Enter a Regex
Type a pattern and set flags. Try the example buttons to get started.
Read the Diagram
The Railroad Diagram visualizes the regex structure as a path flow.
Test & Export
Enter a test string to see live matches, then export the SVG diagram.
Glossary
- Regular Expression (Regex)
- A formal language for describing text patterns. In JavaScript, written as /pattern/flags.
- Railroad Diagram
- A visual representation of syntax/grammar. Shows branching, repetition, and sequence as a directed path.
- Capture Group
- Parentheses () that capture matched text for backreference or replacement via $1, $2, etc.
- Quantifier
- Specifies repetition: * (0+), + (1+), ? (0 or 1), {n,m} (n to m times).
- Character Class
- [ ] matches any listed character. [a-z] = lowercase, [^0-9] = non-digit.
- Lookahead / Lookbehind
- (?=...) and (?<=...) assert conditions ahead/behind the match without consuming characters.
- Flags (g/i/m/s/u)
- g=global, i=case-insensitive, m=multiline, s=dotAll, u=Unicode mode.
FAQ
- Q.How is this different from regex-checker?
- regex-checker focuses on testing and match display. This tool's main feature is Railroad Diagram visualization.
- Q.Which regex syntax is supported?
- ES2024 JavaScript regex syntax, including lookahead, lookbehind, and named capture groups.
- Q.Is my data sent to a server?
- No. All processing is local in your browser.
- Q.Are there ReDoS risks?
- Catastrophically backtracking patterns could slow the browser. Test with small strings first.
- Q.Does it require internet?
- The Railroad Diagram library loads from CDN. The match testing feature works offline.
Use Cases
Learning Regex
Understand complex patterns visually by seeing the structure as a diagram.
Debugging Patterns
Verify a pattern is structured as intended before using it in production code.
Team Documentation
Share SVG diagrams in pull requests or technical docs to explain regex logic.
API Spec Diagrams
Embed SVG diagrams in specification documents for clarity.