Seeing the structure of a pattern
Reading someone else's regular expression is a different skill from writing your own — you're parsing a dense string of punctuation back into the structure it represents. This tool does that parsing for you: paste a pattern and it's broken down into nested boxes for groups and alternatives, with a badge on anything that repeats, plus a plain-English line-by-line breakdown underneath. Hover any piece of the diagram for its description.
It runs entirely client-side against a small hand-written parser covering the constructs you'll meet in practice — literals, character classes, anchors, quantifiers, groups (capturing, non-capturing, named, and lookaround), alternation, and backreferences.
Reading the diagram
- Gray pills are literal text, character classes, anchors, or backreferences.
- Blue boxes are groups — capturing, non-capturing, named, or a lookahead/lookbehind — labeled with what kind they are.
- Amber boxes are alternation: exactly one of the branches inside must match.
- A violet badge attached to a piece shows its quantifier, e.g.
1+for one or more,0-1for optional, or2-4for a bounded range.
FAQ
Why does my pattern show an error here but seems to work elsewhere?
This tool validates with the same RegExp engine your browser uses, so a pattern that's invalid here is invalid in JavaScript. If it worked in another language (PCRE, Python's re, POSIX), the syntax may differ slightly — JavaScript regex isn't 100% identical to every other flavor.
Does this tool test my pattern against text?
No — it only visualizes structure. To test a pattern against sample text with match highlighting, use the Regex Tester. To build a pattern from scratch by clicking pieces together instead of writing it by hand, use the Regex Builder.
New to regex syntax entirely?
The Regex for Beginners guide walks through the same building blocks this tool visualizes — character classes, anchors, quantifiers, and groups — from scratch. Want a token reference to keep handy while you work? The Regex Cheat Sheet Generator exports a customizable syntax reference as Markdown or plain text.