Regex Visualizer & Sandbox
Type a regular expression, paste text, and see every capture group color-coded in the pattern and the text, with a plain-English breakdown and live match performance diagnostics. Free, no sign-up, runs in your browser.
New to regex? Pick a sample from Examples…, then change the pattern or text and watch the colors update. Read the quick guide or jump to the cheat sheet.
How to use this tool
Five steps from an empty box to a pattern you understand. Everything updates live, so you can just experiment.
1. Type a pattern
Enter your regular expression in the box at the top, between the two slashes. Try \d+ (one or more digits). Not sure where to start? Open Examples… and pick one, such as Dates (named groups).
2. Paste your text
Put the text you want to search in Test string. Matches are highlighted as you type, and the Matches count at the top updates instantly.
3. Set the flags
Flags change how matching works. g finds all matches (without it you only get the first), i ignores upper/lower case, m makes ^ and $ work per line.
4. Read the colors
Parentheses create capture groups. Each group gets a color in the pattern, in the Breakdown tree and in your text. Hover a group in the Breakdown to spotlight just that part of the text.
5. Check the details
Matches lists every match and what each group captured. Diagnostics shows how fast the pattern runs and warns about risky constructs. Use Share link to send your setup to a teammate.
Try this: pull a date apart
Choose Examples → Dates (named groups). The pattern (?<year>\d{4})-(?<month>…)-(?<day>…) has three capture groups, so every date in the text is split into three colors: year, month and day. Open the Matches tab to see each date's values, then edit the pattern (for example change - to /) and watch the highlights disappear and return as the text stops or starts matching. Note that 2026-13-45 is not highlighted, because month 13 is rejected by the month group.
What is a regular expression (regex)?
A regular expression, or regex, is a compact pattern that describes a set of strings. Instead of searching for one exact word, you describe a shape: "four digits, a dash, two digits" or "anything that looks like an email address". A regex engine then scans your text and reports every place that fits.
Developers use regex to validate input (is this a valid ZIP code?), extract data (pull the user ID out of a URL or log line), search and replace text across files, and split or clean up messy data. Almost every language supports it, including JavaScript, Python, Java, Go, PHP and Ruby, and so do editors like VS Code and tools like grep.
A pattern is built from just a few ideas: literal characters that match themselves, character classes like \d or [a-z], quantifiers that say how many times, anchors that pin a position, and groups that bundle or capture parts. The cheat sheet below lists them all.
Why visualize it? Regex is dense, so a pattern that works can still be hard to read a week later. Color-coded groups and a token-by-token breakdown turn the pattern into something you can read, and the diagnostics show whether it is also fast and safe.
Which flavor is this? This tool uses the JavaScript (ECMAScript) flavor, the same engine your browser and Node.js use. Core syntax is shared with most other languages, but details such as named groups ((?<name>…) here, (?P<name>…) in Python) and lookbehind support differ, so test in the flavor you will deploy.
Regex cheat sheet
The building blocks of the JavaScript flavor. Paste any of them into the tool and watch the Breakdown tab explain it.
Characters & classes
| Syntax | Meaning |
|---|---|
abc | The literal text "abc" |
. | Any character except a line break |
\d \D | A digit / a non-digit |
\w \W | A letter, digit or underscore / the opposite |
\s \S | Whitespace / non-whitespace |
[abc] | One of a, b or c |
[^abc] | Any character except a, b, c |
[a-z0-9] | A character in a range |
\. \$ \( | Escape a special character to match it literally |
Quantifiers
| Syntax | Meaning |
|---|---|
* | Zero or more |
+ | One or more |
? | Zero or one (optional) |
{3} | Exactly 3 |
{2,5} | Between 2 and 5 |
{2,} | 2 or more |
*? +? ?? | Lazy: match as little as possible |
Anchors & boundaries
| Syntax | Meaning |
|---|---|
^ | Start of the text (or line with m) |
$ | End of the text (or line with m) |
\b | Word boundary |
\B | Not a word boundary |
Groups & lookaround
| Syntax | Meaning |
|---|---|
(abc) | Capture group, numbered from 1 |
(?<name>abc) | Named capture group |
(?:abc) | Group without capturing |
a|b | Alternation: a or b |
\1 \k<name> | Backreference to an earlier group |
(?=x) (?!x) | Followed by x / not followed by x |
(?<=x) (?<!x) | Preceded by x / not preceded by x |
Flags
| Flag | Meaning |
|---|---|
g | Global: find all matches |
i | Ignore case |
m | Multiline: ^ and $ per line |
s | Dot also matches newlines |
u | Unicode mode, enables \p{…} |
y | Sticky: match only at the current position |
Reading the results and avoiding common mistakes
What the diagnostics mean
Avg time is how long one full scan of your text takes. Throughput is how much text per second that is. Coverage is the share of characters inside a match. Captured in the group table shows how many matches each group took part in; a group that never captures usually means a typo or an unneeded group.
Greedy vs lazy
.* grabs as much as it can, so <.*> on <b>hi</b> matches the whole string. Add a ? to make it lazy: <.*?> matches each tag separately. Try both and compare the highlights.
Escape special characters
The characters . * + ? ^ $ ( ) [ ] { } | \ have special meanings. To match one literally, put a backslash before it: \. matches a real dot, while . matches anything.
Anchor validation patterns
To check that a whole string is valid, wrap the pattern in ^…$. Without anchors, \d{5} also "matches" inside 1234567.
Catastrophic backtracking (ReDoS)
Nested repetition such as (a+)+$ can take exponential time when the input almost matches, freezing a server or page. The Findings list warns about these shapes, and the tool stops runaway runs with a timeout. Fix it by removing the ambiguity, for example use a+$.
Not a parser
Regex is great for flat text patterns but poor for nested formats like HTML or JSON. For those, use a real parser and keep regex for small checks inside it.
Frequently asked questions
What is a regex used for?
Regex is used to validate input such as emails and ZIP codes, extract data from text and logs, search and replace across files, and split or clean strings. Almost every programming language and editor supports it.
How do I get started if I have never used regex?
Open the Examples menu, pick one, and change the pattern a little at a time. Start with simple pieces like \d+ for digits or [a-z]+ for lowercase words, then read the Breakdown tab to see each part explained.
What does the Regex Visualizer show?
It colors every capture group in your pattern and in your test text, lists each token with a plain-English explanation, shows every match with its groups, and reports timing, throughput and group coverage. Hover a group in the breakdown to spotlight it in the text.
Which regex flavor does it use?
JavaScript (ECMAScript), running on your browser's own regex engine, so results match what your front-end or Node.js code will do. Named groups, lookbehind and the d, s, u and y flags work if your browser supports them.
What is catastrophic backtracking and how does the tool detect it?
Catastrophic backtracking (ReDoS) happens when a pattern such as (a+)+$ takes exponentially longer on input that almost matches. The tool warns about risky shapes such as nested quantifiers, and every run happens in a background worker with a timeout, so a runaway pattern is stopped instead of freezing the page.
Are the timing numbers exact?
They are real measurements from your browser, averaged over many runs of the same scan, but they vary by device and browser. Use them to compare two versions of a pattern on the same machine, not as absolute guarantees.
Is my text uploaded anywhere?
No. Matching, timing and highlighting all run locally in your browser. The Share button puts your pattern and text into the link itself, so only give that link to people who may see them.