Regex Match Visualizer

Seeing a regex instead of just reading it

A regular expression is a pattern that describes a set of strings, but the gap between writing one and knowing what it actually does is where most bugs live. This visualizer closes that gap by colouring every match directly in your test text and breaking each one apart in a details table. Rather than guessing whether your pattern grabbed too much or skipped a group, you watch it light up character by character. The tool runs on your browser's own regex engine — the same RegExp object JavaScript uses — so what you see here is exactly how the pattern behaves in JavaScript code.

How the colour highlighting works

Each full match gets its own pastel background, cycling through a palette so adjacent matches are easy to tell apart. Inside a match, capture groups — the parts you wrapped in parentheses — are tinted in contrasting shades and listed separately. This is the detail that makes the tool worth using: a regex can match a whole chunk while only the captured sub-parts are what you care about, and seeing both at once shows you precisely what you'll be able to extract later with $1, $2, or named references.

The match details table beneath the text spells out, for every hit: its position (start–end character index), its full value, and each group's captured text. A group that participated but matched nothing shows as empty; a group that didn't participate at all shows as undefined — a distinction that trips up a lot of people and is made visible here.

A worked example

The tool opens with the pattern (\w+)@(\w+\.\w+) and the text "Contact alice@example.com or bob@test.org for info." with the global flag on. Two matches highlight: alice@example.com and bob@test.org. Within the first, group 1 captures alice and group 2 captures example.com, each in its own colour. The details table reports match 1 at positions 8–25, with those two groups; match 2 follows. Change the text or the pattern and everything re-highlights instantly — type a broken pattern like (\w+ with an unclosed parenthesis and a red error message appears immediately, quoting the exact syntax problem rather than failing silently.

The four flags, and why they change everything

Toggling these is instructive: turn off g on the email example and watch the count drop from two matches to one, because without global the engine stops after the first hit.

Replace mode: previewing a substitution

Tick Replace mode and the tool shows what String.replace would produce. Your replacement string can reference captured groups with $1, $2, and so on. With the default pattern and the replacement $1 [at] $2, the output becomes "Contact alice [at] example.com or bob [at] test.org for info." — a live preview of the exact transformation, so you can verify a find-and-replace before running it on real data.

Practical use cases

• Validating input formats — emails, phone numbers, dates, hex colours — by pasting real samples and confirming every one matches.
• Extracting fields from logs or text using capture groups, then checking exactly what each group grabs.
• Building a search-and-replace safely, by previewing the substitution in Replace mode first.
• Debugging a pattern that "doesn't work" by watching where it over- or under-matches.

Tips and a quick-start shortcut

• Use the Quick Reference panel. It ships ready-made patterns for email, URL, IPv4, US phone, ISO date, hex colour, and more — click Use to load one into the pattern field and adapt it.
• Watch the match count. The result line tells you how many matches were found; if it's zero when you expected hits, your pattern is too strict.
• Name your groups for clarity. The engine supports named captures like (?<user>\w+), which read more clearly than numbered ones.
• Mind zero-length matches. Patterns like ^ or \b match positions, not characters; the tool advances safely past them so it doesn't loop forever.

Common mistakes the tool surfaces

• Forgetting the g flag and wondering why only one match shows — the highlighting makes this obvious instantly.
• Confusing a captured-but-empty group with an unmatched one — the table distinguishes empty from undefined.
• Unescaped metacharacters. A literal dot or dollar must be written \. or \$; otherwise it means "any character" or "end of string."

Privacy

Both your pattern and your test string are evaluated entirely in your browser using its native regex engine. Nothing you type is transmitted or stored on any server — you can disconnect from the network and the visualizer still works.