Regex Explainer

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

1. Enter a Pattern (without delimiters). The breakdown updates as you type.
2. Optionally set Flags — the field accepts g i m s u d y; any other character is stripped.
3. Or tap an example chip — Email, Date capture, URL, Lookahead — to load a ready-made pattern with matching flags.
4. 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.
5. 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): g global - find all matches · i case-insensitive · m multiline (^ and $ match line boundaries) · s dotAll - “.” matches newlines · u unicode · y sticky - match at lastIndex · d indices - expose match boundaries.
• Supports JS RegExp syntax; other engines’ extensions (POSIX classes, \p{...} without u) may parse differently.
• Private: parsing is entirely local, in your browser.
• Related tools: Regex Tester (run matches live), Find & Replace, JSON to TypeScript.