(التوثيق بالإنجليزية)
What it does
The Regex Explainer turns a regular expression into a plain-English, token-by-token breakdown. Each token — anchor, character class, quantifier, group, escape, alternation, or literal — gets its own row showing the exact fragment and what it matches, plus a token count and an explanation of every flag you set. Invalid patterns show the JavaScript engine’s own error in a red error box instead of breaking the page. Great for learning regex or deciphering one you found in a codebase. 100% client-side; nothing is sent anywhere.
How to use it
- Enter a Pattern (without delimiters). The breakdown updates as you type.
- Optionally set Flags — the field accepts
g i m s u d y; any other character is stripped. - Or tap an example chip — Email, Date capture, URL, Lookahead — to load a ready-made pattern with matching flags.
- Read the report on the right (sticky on desktop): one row per token, the token count badge up top, and each active flag with its meaning.
- Copy breakdown copies the full explanation as plain text; the address bar always carries your pattern (
?p=and?f=), so copying the URL shares the exact view.
Invalid regex (e.g. an unterminated [) shows the engine’s error message — Invalid regular expression: missing terminating ] for character class for [ — with an Invalid badge, and never throws.
Examples
All explanations below are the tool’s real output for each input.
Phone-like pattern — ^\d{3}-\d{4}$ with flag g (the built-in Sample, 7 tokens):
| Token | Explanation |
|---|---|
^ |
start of the string (or line with /m) |
\d |
a digit [0-9] |
{3} |
quantifier - repeat 3 time(s) |
- |
the literal “-” |
\d |
a digit [0-9] |
{4} |
quantifier - repeat 4 time(s) |
$ |
end of the string (or line with /m) |
Flag g → global - find all matches.
Email-ish pattern — [a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-z]{2,} with flags gi (the Email chip, 8 tokens), excerpt:
[a-zA-Z0-9._%+-]→match any of: a-zA-Z0-9._%+-+→quantifier - 1 or more times (greedy)@→the literal "@"\.→an escaped literal "."{2,}→quantifier - repeat 2, time(s)- Flag
i→case-insensitive
Date capture — (\d{4})-(\d{2})-(\d{2}) (the Date capture chip, 5 tokens): three rows of capturing group (for (\d{4}), (\d{2}), (\d{2})) separated by two rows of the literal "-".
Lookahead — \d+(?=px) (the Lookahead chip, 3 tokens): a digit [0-9], quantifier - 1 or more times (greedy), then (?=px) → lookahead assertion (positive).
Good to know
- Flags reference (each flag renders its meaning next to its letter):
gglobal - find all matches ·icase-insensitive ·mmultiline (^ and $ match line boundaries) ·sdotAll - “.” matches newlines ·uunicode ·ysticky - match at lastIndex ·dindices - expose match boundaries. - Supports JS
RegExpsyntax; other engines’ extensions (POSIX classes,\p{...}withoutu) may parse differently. - Private: parsing is entirely local, in your browser.
- Related tools: Regex Tester (run matches live), Find & Replace, JSON to TypeScript.