Regex Visualizer — Railroad Diagram Generator for Regular Expressions
Visualize common JavaScript regex syntax with a railroad diagram, token explanations, and a match tester. Includes a heuristic warning for some nested quantifiers.
Updated
What is the Regex Visualizer — Railroad Diagram Generator for Regular Expressions?
Regular expressions can be difficult to read. This regex visualizer turns supported JavaScript patterns into a railroad diagram and provides a token-by-token explanation and a match tester.
Paste a pattern and instantly get:
- A railroad diagram for commonly used JavaScript regex syntax, including groups, alternation, quantifiers (
*,+,?,{n,m}), character classes, anchors, lookahead/lookbehind, named groups, and backreferences - A plain-English breakdown listing every token in order, so you can see what each fragment does without guessing
- A live match tester — paste sample text and watch matches highlight instantly, with numbered and named capture groups broken out per match
- A heuristic backtracking warning for some nested-quantifier patterns, such as
(a+)+; it is not a guarantee that a pattern is safe to run - SVG export to drop the diagram straight into documentation, a PR description, or a wiki page
- Support for the listed JavaScript flags (
g,i,m,s,u,y,d), subject to the browser's regex engine
The diagram parser covers common constructs, but it is not a complete JavaScript regex parser. The native JavaScript engine validates patterns and runs the match tester; the diagram and explanations may not represent every valid construct.
Pattern parsing and matching run in your browser. Some regular expressions can take a long time to evaluate on certain text and may make the page unresponsive; the warning is only a heuristic. Avoid testing untrusted or potentially expensive patterns with large input.
How it works
- Type or paste a pattern into the Pattern field — just the regex body, no surrounding slashes (write
\d{4}-\d{2}-\d{2}, not/\d{4}-\d{2}-\d{2}/). - Toggle flags —
g(global),i(case-insensitive),m(multiline),s(dotAll),u(unicode),y(sticky),d(indices). Invalid or duplicate flags are rejected with a clear message. - Read the railroad diagram — supported syntax is parsed into a syntax tree and laid out left to right. The visual parser does not cover every valid JavaScript regex construct:
- A straight pill is a literal, character class, anchor, or shorthand like
\d - A fork with multiple lanes is an alternation (
|) - A curved bypass line above an element means it's optional
- A loop below an element shows how many times it can repeat, with the count labeled (
0+,1+,2–4, …) - A boxed section marks a capturing, named, or non-capturing group; a dashed box marks a lookahead or lookbehind
- Hover a shape for a tooltip describing the corresponding syntax
- Scan the breakdown list below the diagram for a plain-English, line-by-line explanation of every token in source order.
- Review the backtracking warning — a heuristic flags some nested unbounded quantifiers, such as
(a+)+. It can miss risky patterns and does not prevent a slow match from blocking the page. - Paste test text to run the pattern and highlight matches, with positions and capture groups listed below. Matching can take time for some patterns and inputs; at most 2,000 matches are collected.
- Export or share — copy the full
/pattern/flagsstring with one click, or download the diagram as a standalone SVG file.
Not sure where to start? Use the Quick start dropdown to load a ready-made pattern — email, URL, UUID, ISO date, named groups, or a lookahead example — and see the diagram build immediately.
Parsing and matching happen in your browser. A match may take a long time for certain patterns and inputs; do not use the tester with untrusted patterns or large text when you are unsure of their behavior.
Examples
Visualize an email pattern
Render a common email-matching regex as a railroad diagram to see how the local part, domain, and TLD connect
Pattern: [\w.+-]+@[\w-]+\.[a-zA-Z]{2,} Flags: iA diagram showing a character-class loop for the local part, a literal "@", a domain loop, a literal ".", and a 2-or-more letter loop for the TLDBreak down named capture groups
Visualize an ISO date pattern with named groups to see each labeled group and its quantifier
Pattern: (?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})Three labeled group boxes — "year", "month", "day" — each containing a \d loop with an exact repeat count, connected by literal "-" pillsSpot a catastrophic backtracking risk
Enter a pattern with nested unbounded quantifiers to see the diagram and a heuristic warning
Pattern: (a+)+bA diagram with a repeat loop nested inside another repeat loop, plus a warning: "nests unbounded quantifiers... can cause catastrophic backtracking"Frequently asked questions
What is a regex railroad diagram?
What is a regex railroad diagram?
A railroad diagram (or syntax diagram) shows a pattern as a track you read left to right. Straight sections are literal matches, forks are alternation (|), loops below an element show it repeating, and a curved bypass above an element shows it's optional. It's the same visual style used in formal language specifications, adapted here for JavaScript regex.
Which regex flavor does this tool support?
Which regex flavor does this tool support?
The tester uses the browser's JavaScript regex engine. The diagram parser handles common constructs such as groups, lookarounds, quantifiers, character classes, anchors, and backreferences, but does not represent every valid JavaScript regex feature.
Does it handle named groups and lookbehind?
Does it handle named groups and lookbehind?
Yes. Named capture groups are labeled with their name in the diagram, and lookahead/lookbehind assertions are drawn as dashed boxes so you can tell at a glance that they don't consume characters. Backreferences (\1, \k<name>) are validated against the groups that actually exist in the pattern.
Why is my pattern showing an error instead of a diagram?
Why is my pattern showing an error instead of a diagram?
The parser reports the specific problem — an unterminated group, a quantifier with no token to repeat (a**), a character class range out of order ([z-a]), or a backreference to a group that doesn't exist. Fix the message shown and the diagram renders immediately; there's no silent failure.
What does the catastrophic backtracking warning mean?
What does the catastrophic backtracking warning mean?
It heuristically flags some patterns where an unbounded quantifier is nested inside another, such as (a+)+. This check can miss risky expressions and does not protect the tester from a slow match. Some patterns can make the page unresponsive for particular inputs, so avoid testing untrusted or potentially expensive patterns with large text.
Can I test my regex against real text here too?
Can I test my regex against real text here too?
Yes. Paste text into the Test string box to run the pattern and highlight matches with their positions and capture group values. Matching can take time for some patterns and inputs, and the tool displays up to 2,000 matches.
Can I export or share the diagram?
Can I export or share the diagram?
Click "Export SVG" to download the diagram as a standalone, scalable SVG file you can drop into documentation, a pull request, or a wiki page. Use the copy button next to the flags to grab the pattern as a /pattern/flags string.
Is my regex pattern uploaded anywhere?
Is my regex pattern uploaded anywhere?
Pattern parsing and matching run in your browser. Avoid testing untrusted patterns or sensitive text unless you are comfortable with the site's privacy practices; the regex runs in the page and is not isolated from it.
Why do I need the u flag for \p{L}?
Why do I need the u flag for \p{L}?
Unicode property escapes like \p{L} (any letter) or \p{N} (any number) are only meaningful in JavaScript's unicode mode. Without the u flag, the engine doesn't recognize the syntax at all, so the tool requires the flag before treating it as valid — matching real JavaScript behavior rather than silently guessing.
I don't know where to start — are there example patterns?
I don't know where to start — are there example patterns?
Use the Quick start dropdown above the pattern field to load ready-made examples: email, URL, IPv4 address, hex color, UUID, ISO date, 24-hour time, slug, named capture groups, and a lookahead example. Each one populates the pattern and flags so you can see the diagram build immediately.
Related tools
More utilities you might find handy.