Regex Visualizer

Regex Visualizer — Pattern Diagram & Live Match Highlighting

Paste any JavaScript regular expression and instantly see a visual pattern diagram, live match highlighting across your test string, and a capture group table — all updating in real time as you type. Unlike a plain regex tester, the Regex Visualizer breaks each token in your pattern into a labelled, colour-coded node: literals in blue, escape sequences in violet, character classes in amber, anchors in green, and capture groups in bordered boxes numbered #1, #2, …

Every capture group gets a unique colour both in the diagram and in the highlighted test string, so you can see at a glance exactly which part of the pattern captured which substring. The groups table lists every match with its captured substrings in separate columns — ideal for extracting structured data from log lines, CSV rows, or API responses. Alternation branches (a|b|c) are rendered vertically in the diagram so you can read each branch independently. Quantifiers (+, *, {n,m}) appear as a teal annotation under the token they repeat.

All processing is 100% client-side — your patterns and test data never leave your browser, making it safe to debug against production log files or sensitive records. The URL hash stores your pattern, flags, and test string, so you can share a permalink with teammates, paste it into a PR comment, or bookmark a pattern you want to revisit. Pair it with the RegExp Tester for quick match iteration, or use Find & Replace to apply your debugged pattern to a text corpus.