Interactive visualizer
Regex Visualizer — Break Down Any Regular Expression
Paste a regular expression and see every token color-coded and explained. Live match highlighting, capture groups, and full syntax support for JavaScript regex.
Last updated:
Breakdown
Token-by-token explanation
| Token | Kind | Meaning |
|---|---|---|
^ | Anchor | start of string (or line with m flag) |
( | Group | capture group start |
[a-zA-Z0-9._%+-] | Character class | any single character in the set [a-zA-Z0-9._%+-] |
+ | Quantifier | repeat the previous token one or more times, greedy |
) | Group close | group end |
@ | Literal | literal character "@" |
( | Group | capture group start |
[a-zA-Z0-9.-] | Character class | any single character in the set [a-zA-Z0-9.-] |
+ | Quantifier | repeat the previous token one or more times, greedy |
\. | Escaped literal | escaped literal "." |
[a-zA-Z] | Character class | any single character in the set [a-zA-Z] |
{2,} | Quantifier | repeat the previous token 2, time(s) |
) | Group close | group end |
$ | Anchor | end of string (or line with m flag) |
Live match preview
0 matchesLegend
How this visualizer works
The regex is scanned left-to-right and each construct — anchors, character classes, groups, quantifiers, back-references, and look-arounds — is emitted as a labelled token. Nesting is preserved via indentation so you can see at a glance which quantifier applies to which group. Everything happens client-side; your pattern is never sent to a server.
Reading the color-coded tokens
- ▸Sky-blue = meta character (\d, \w, \s, .)
- ▸Purple = anchor (^, $, \b, \B)
- ▸Emerald = character class ([abc], [^0-9])
- ▸Amber = capture / non-capturing group ( )
- ▸Rose = quantifier (*, +, ?, {n,m})
- ▸Pink = alternation (|)
- ▸Fuchsia = look-ahead / look-behind assertion
- ▸Indigo = back-reference (\1, \k<name>)
Common pitfalls this visualizer helps catch
- ▸Greedy vs lazy quantifiers — the visualizer marks lazy variants like *? +? ?? explicitly.
- ▸Forgetting to escape a literal dot inside a character class (they're already literal).
- ▸Confusing (?:x) non-capturing with (?=x) look-ahead — different colors make the distinction obvious.
- ▸Anchors inside character classes: [^abc] means "not a/b/c", not "start of line".
Frequently Asked Questions
Which regex flavor does this visualizer support?
JavaScript (ECMAScript) regex, matching what modern browsers execute. Named capture groups, look-ahead, and look-behind are supported. PCRE-only features (recursion, atomic groups, possessive quantifiers) are not.
Is my regex sent to a server?
No. Parsing, tokenisation, and match testing all run locally in JavaScript. Nothing is uploaded and no analytics track the content of your patterns.
Why is my expression valid but the token list looks wrong?
The tokenizer is intentionally simple and does not simulate the NFA — it explains structure, not runtime behaviour. Use the live match preview to confirm your expression matches what you expect on real input.
How is this different from your Regex Tester tool?
The tester is a debugging playground (matches, groups, flags). This visualizer focuses on teaching — every part of the pattern is annotated with plain-English explanations so you can understand a regex before running it.
Other visualizers
JWT Visualizer
Decode a JWT and visualize the header, payload, and signature side-by-side with plain-English explanations of every registered claim and expiration status.
URL Anatomy
Paste any URL and see its scheme, userinfo, host, port, path, query, and fragment highlighted and explained side-by-side.