Skip to main content
Ink·tab

Regex → tree + per-node description

Unfold a complex regex into a tree, with each piece explained.

Structure3 capturing groups
  • SEQUENCEitems in order (sequence)
  • ├─ ANCHOR ^start of line / input
  • ├─ GROUP #1capturing group #1
  • └─ QUANTIFIER {3}repeats 3–3 times (greedy)
  • └─ ESCAPE \da digit (0–9)
  • ├─ LITERAL "-"the character "-"
  • ├─ GROUP #2capturing group #2
  • └─ QUANTIFIER {2}repeats 2–2 times (greedy)
  • └─ ESCAPE \da digit (0–9)
  • ├─ LITERAL "-"the character "-"
  • ├─ GROUP #3capturing group #3
  • └─ QUANTIFIER {4}repeats 4–4 times (greedy)
  • └─ ESCAPE \da digit (0–9)
  • └─ ANCHOR $end of line / input

Everything happens in your browser. Nothing is uploaded.

When to use it

Unfolding someone else's regex to understand the meaning quickly, verifying that your pattern actually has the structure you intended, or learning regex by visually checking precedence among quantifiers, groups, and alternation.

Input → AST tree

Paste a regex (with optional flags) and it expands into an AST tree. Indentation and box-drawing characters (├ └ │) show parent-child relations, with English narrative alongside.

SEQUENCE
├─ ANCHOR ^                 — start of line / input
├─ GROUP #1
│  └─ QUANTIFIER {3}        — repeats exactly 3 times (greedy)
│     └─ ESCAPE \d          — a digit (0–9)
├─ LITERAL "-"              — the character "-"
├─ GROUP #2
│  └─ QUANTIFIER {2}        — repeats exactly 2 times (greedy)
│     └─ ESCAPE \d
├─ LITERAL "-"
├─ GROUP #3
│  └─ QUANTIFIER {4}
│     └─ ESCAPE \d
└─ ANCHOR $                 — end of line / input

How it differs from regex-tester

| Tool | Question it answers | |---|---| | regex-tester | "Where does this pattern match?" — compares text against the pattern, extracts matches and captures. | | regex-visualizer | "What does this pattern mean?" — unfolds the structure of the pattern itself. |

Debug flow: ambiguous pattern → visualize to confirm intent → send to tester to verify matches. The "→ Send to regex tester" button at the top right hands the pattern and flags off directly.

Supported syntax

  • Sequence
  • Alternation |
  • Capturing () and non-capturing (?:) groups
  • Character classes [...], negated [^...]
  • Every escape (\d \D \w \W \s \S \b \B \n \t \r \f \v \0 plus arbitrary character escapes like \., \+, \()
  • Anchors ^ $
  • . (any single character)
  • Quantifiers * + ? {n} {n,} {n,m} (both greedy and lazy ?)

Not supported (V1)

These are preserved as UNSUPPORTED nodes — flagged red in the tree:

  • Lookahead (?=), lookbehind (?<=), negative (?!) (?<!)
  • Named groups (?<name>)
  • Backreferences \1, \k<name>
  • Inline flags (?i)

Candidates for V2 deeper expansion. Surrounding structure parses correctly even when an unsupported pattern is present — you'll see exactly which part is unsupported.

Privacy

Internal-system validation regexes, unpublished pattern libraries, and patterns you're debugging are not transmitted. The AST parser is built in — zero external libraries, zero external calls.

Not the right tool when

  • Railroad SVG diagram — V1 is a text tree only. Railroad SVG involves heavy layout math; it's a V2 deeper expansion.
  • PCRE / Python re engines — JavaScript regex is the baseline. PCRE-only extensions like \K and [[:alpha:]] are not handled.
  • Regex optimization suggestions — this tool only unfolds structure. ReDoS warnings and performance suggestions belong to dedicated tools like regex101.

Patterns stay on the page

Internal-system validation regexes, unpublished pattern libraries, and patterns you are debugging are not transmitted. The AST parser is built in — zero external libraries, zero external calls.

Frequently asked questions

How does this differ from regex-tester?
regex-tester is a *matching* tool — it finds where a pattern matches input text and extracts captures. regex-visualizer is a *structure* tool — it unfolds the pattern itself so you can see what each piece means. The usual flow is visualize → confirm intent → send to tester to verify matches.
Which syntax is supported?
Core JavaScript regex: sequence, alternation `|`, capturing `()` and non-capturing `(?:)` groups, character classes `[...]`, negated `[^...]`, every escape (`\d \D \w \W \s \S \b \B \n \t \r`, …), anchors `^ $`, `.`, and quantifiers `* + ? '{n}' '{n,}' '{n,m}'` (both greedy and lazy `?`).
What is not supported?
Lookahead `(?=)`, lookbehind `(?<=)`, negative lookaround `(?!)` `(?<!)`, named groups `(?'<name>')`, backreferences `\1` `\k'<name>'`, inline flags `(?i)`. These are preserved as `UNSUPPORTED` nodes — flagged in red in the tree so you spot them. V2 expansion candidate.
Do regex flags (i, g, m, …) affect the visualization?
No. Flags apply at *match time*, not to the *structure*. This tool visualizes structure only; the flags input is just for information and gets handed off to regex-tester when you send the pattern over.
Why a text tree instead of a railroad diagram?
Railroad SVG involves heavy layout math for alternation branches, nested groups, and quantifier labels — too much to do honestly in V1. The text tree carries the same structural information cleanly: depth, parent-child relations, color-coded node types. Railroad SVG is a V2 expansion.