I Built a Regex Visualizer: Live Matches, Capture Groups, and a Plain-English Breakdown

Regex is write-once, decipher-forever. The fastest way to understand or debug one is to watch it match — and to have each cryptic token spelled out in English. So I built a tester that does both, using your browser's real RegExp.

▶ Live demo: https://dev48v.github.io/regex-visualizer/
Source (single file, zero deps): https://github.com/dev48v/regex-visualizer

Type a pattern and your matches light up in the text as you go — with capture groups, named groups, and a plain-English breakdown of every token.

It uses the real engine

No re-implementation, no approximation — matching is done by the native JavaScript RegExp:

const re = new RegExp(pattern, flags);
for (const m of text.matchAll(re)) {
  // m[0] = full match, m[1..] = capture groups, m.groups = named
}

So what you see is exactly what your JS/TS code will do — including the real error message when the pattern is invalid (Invalid regular expression: /(/g: Unterminated group), which is half of regex debugging anyway.

Two things that make regex click

Capture groups, laid out. Run (\w+)@(\w+)\.(\w+) over [e-mail] and you see it broken into group 1: ada, group 2: math, group 3: org — and named groups too: (?<user>\w+)@(?<host>[\w.]+) gives you <user> and <host> by name.

Every token, explained. The pattern is tokenized and each piece described:

(      → start of a capture group
\w     → word char (a-z, 0-9, _)
+      → the preceding token, 1 or more times
)      → end of the group
@      → the literal text "@"

That breakdown is the thing that turns \b(?:\d{1,3}\.){3}\d{1,3}\b from line-noise into "a word boundary, then a group of 1-3 digits and a dot, three times, then 1-3 digits."

Plus: flag toggles (g i m s u y), presets (email, URL, IPv4, date, hex color, named groups), and a cheat sheet.

One index.html, works offline. Native RegExp means it's accurate for JS/TS (other flavours differ in a few edge constructs). If it saved you a regex headache, a star helps others find it: https://github.com/dev48v/regex-visualizer