RegEx Toolkit — Visualize, Extract & Replace
Visualise regex token breakdowns and capture groups, extract matches from text, and test replacement patterns — all in one browser-based toolkit.
Build, test, and debug regex without leaving your browser
You have got a regular expression that works in your code editor but breaks when a user submits unexpected input, and you need to figure out why — fast. This tool lets you paste your regex and your test string, see exactly which parts of the pattern match which parts of the text, and debug the problem without switching to a terminal or a different app.
Visualize tab — see what your regex actually does
Paste your pattern into the shared field and the Visualize tab breaks it down into individual tokens — anchors, character classes, quantifiers, groups, lookaheads — each colour-coded and labelled. Below the token strip, a capture groups table shows exactly what each numbered or named group captured in your first three matches. If your pattern has a greedy quantifier where you expected a lazy one, you will see it here immediately.
Extract tab — pull out the matches
Switch to Extract and your test string is highlighted in real time. Every match appears as a chip below the text, so you can scan the results visually. If you have the global flag turned on, you see every match in the string. Turn it off and you see only the first match with its full capture group details.
Find and Replace tab — stack multiple regex rules
The Replace tab lets you chain multiple regex rules together. Each rule has its own pattern, replacement string, and flags. Rules execute in order — the output of rule one becomes the input of rule two. Use back-references like $1 and $2 to insert captured text, or $ and $ for the whole match and surrounding text. Quick presets load common transformations such as stripping HTML tags or collapsing whitespace.
Flags and options
Toggle four flags at the top of the pattern field: g (global — match all occurrences), i (case-insensitive), m (multiline — treat each line as a separate string), and s (dot-all — let the dot match newlines). The error banner at the bottom of the field shows the exact engine error if your pattern has a syntax problem, so you can fix it without guessing.
How the RegEx Toolkit processes your pattern
The Visualize tokenizer walks your pattern character by character
When you type a regex like ^(\w+)\s+(foo|bar)\s*$, the Visualize tab does not use another regex to parse it. It uses a hand-written finite-state machine that reads each character one at a time, tracking whether you are inside a character class, inside a group, or in an escape sequence. It identifies eleven token types — anchors, literals, character classes, quantifiers, capturing groups, non-capturing groups, named groups, alternations, lookaheads, escapes, and dots — and renders each one as a labelled, colour-coded chip.
Match highlighting uses the browser's built-in engine
All three tabs use the same JavaScript RegExp engine that runs in your browser. The tool calls matchAll() when the global flag is on, or exec() when it is off, and splices the resulting indices into marked elements overlaid on your text. For a pattern like \b\d4\b against "The years are 2024 and 2025", the engine finds two matches at character positions 15 and 24, highlights them, and lists them as chips below the text.
Capture groups are extracted from the MatchResult object
Each match returned by the engine includes a groups property for named captures and indexed entries for numbered captures. The tool iterates the first three matches and populates a table showing what each group captured. For the pattern ^(\w+)\s+(foo|bar)\s*$, group 1 captures the word before the space, and group 2 captures either "foo" or "bar". The table shows these values side by side across all three matches.
Find and Replace processes rules sequentially
In Replace mode, each rule is a separate regex with its own pattern, replacement, and flags. Rule 1 runs first against the source text, produces output, and hands that output to rule 2. If rule 1 matches "foo" and replaces it with "baz", rule 2 never sees the original "foo". The replacement string supports back-references — $1 inserts whatever group 1 captured, $ and $ insert text before and after the match. A scroll-synced overlay displays colour-coded highlights on top of the editable textarea without modifying its contents.
Why greedy and lazy quantifiers matter
A greedy quantifier like .* matches as much text as possible before backtracking. A lazy quantifier like .*? matches as little as possible. The Visualize tab labels each quantifier as greedy or lazy in the token breakdown, so you can see which strategy your pattern is using without running it against test data.
Frequently asked questions
What regex flavour does this tool use?
JavaScript's ECMAScript regex engine — the same one in Chrome, Firefox, and Safari. Supports lookaheads, lookbehinds, named capture groups, and Unicode property escapes. PCRE-specific syntax like possessive quantifiers or atomic groups is not supported.
What is the difference between the three tabs?
Visualize shows a colour-coded breakdown of your regex pattern and a capture groups table. Extract highlights every match in your text and lists them as chips. Find and Replace lets you stack multiple regex rules into an ordered pipeline with back-reference substitution.
Why does my regex show an error?
The error banner shows the exact engine message. Common causes include unmatched parentheses, an unescaped special character used as a literal (like a dot without a backslash), or an invalid escape sequence. Fix the syntax and the error clears automatically.
What is a capture group?
A capture group is a section of your regex wrapped in parentheses. It groups the enclosed pattern so quantifiers apply to it as a unit, and captures the matched text so you can extract it. The Capture Groups table in Visualize mode shows what each group matched across your first three matches.
How do back-references work in Find and Replace?
In the replacement field, $1 and $2 insert text captured by numbered parentheses in your pattern. $<name> inserts text from a named group. $& inserts the whole match, $` inserts text before the match, and $' inserts text after. These follow the standard JavaScript String.prototype.replace() patterns.
Can rules conflict with each other in Find and Replace?
Yes, and that is often intentional. Rules execute in order — the output of rule 1 becomes the input of rule 2. If two rules match the same text, the first rule wins on the original text and the second rule sees the already-replaced output. Use rule order to control execution priority.
What does the s (dot-all) flag do?
By default, the dot metacharacter matches any character except newline. With the s flag enabled, dot matches every character including newlines. This matters when your test string spans multiple lines and you want the dot to cross line boundaries.
How do greedy and lazy quantifiers differ?
A greedy quantifier like * or + matches as much text as possible before backtracking. A lazy quantifier like *? or +? matches as little as possible. The Visualize tab labels each quantifier as greedy or lazy so you can see which strategy your pattern is using.
Is my data sent to a server?
No. Every computation — tokenization, matching, extraction, and replacement — runs entirely in your browser using the built-in JavaScript RegExp engine. Your regex patterns and test strings never leave your device.