Regex PatternEnter regex without delimiters

Token Types

LiteralMetacharQuantifierGroupAnchorChar ClassEscapeSpecial

What is Regex Explainer?

Regular expressions pack a lot of meaning into a small string of metacharacters, quantifiers, and escape sequences — which makes them powerful but hard to read. This explainer takes any regex pattern and breaks it into individual tokens, color-coding each one by type (anchor, quantifier, group, character class, and so on) and providing a plain-English description. It is the fastest way to understand a regex you found in documentation, inherited from a colleague, or generated with another tool.

How to Use

Enter your regex pattern in the input field — do not include surrounding slashes.
Click Explain Regex to parse the pattern into its component tokens.
Each token is color-coded by type in the visual breakdown above the explanation list.
Scroll through the detailed explanation list to read what every token does.
Use the sample pattern buttons to load and explore common regex patterns.
Copy the full explanation text for documentation or team sharing.

Why Use This Tool?

Understand complex regex patterns step by step instead of guessing at their meaning

Color-coded token visualization makes it easy to distinguish anchors, quantifiers, groups, and literals

Validate regex syntax — invalid patterns produce an error before explanation

Learn regex by exploring sample patterns and seeing how each part contributes to the match

Copy the full token-by-token explanation for code reviews, documentation, or onboarding

All parsing runs locally in your browser — no patterns are sent to any external service

Tips & Best Practices

Enter regex without surrounding slash delimiters — the tool adds them for display
Quantifiers always apply to the immediately preceding token, not the entire expression
Capturing groups (...) store matched content for later extraction; non-capturing groups (?:...) do not
Anchors (^ and $) match positions in the text, not actual characters
Character classes [...] match exactly one character from the set, not the entire set as a string
Use non-capturing groups (?:...) when you need grouping logic but do not need the matched content

Frequently Asked Questions

What do the different token colors represent?

Purple indicates metacharacters like . (any character). Orange marks quantifiers (*, +, ?, {n,m}). Blue represents groups (parentheses and their variants). Green shows anchors (^ and $). Cyan highlights character classes like [a-z]. Pink indicates escape sequences (\d, \w, \s). Yellow marks special tokens like the alternation pipe (|). Gray tokens are literal characters that match themselves.

What is the difference between capturing and non-capturing groups?

Capturing groups (...) store the matched content so you can reference it later — in JavaScript via match[1], match[2], and so on. Non-capturing groups (?:...) apply grouping logic for quantifiers or alternation without storing the match. Use non-capturing groups when you do not need the content — they are slightly faster and keep the match array cleaner.

Why would I use lazy quantifiers (*? and +?)?

By default, quantifiers are greedy — they match as much text as possible. Lazy quantifiers match as little as possible. For example, applying <.+> to <a>text</a> greedily matches the entire string, while <.+?> lazily matches just <a>. Use lazy quantifiers when you want the shortest possible match.

When should I NOT use this explainer?

This tool is not designed for regex dialects outside JavaScript (such as PCRE-only features like recursive patterns or conditional subpatterns), for explaining regex replacement strings (like $1 or \1 in substitution context), or for analyzing the performance characteristics of a pattern. For those needs, consult the documentation of your specific regex engine.

Is my regex pattern kept private?

Yes. All parsing and explanation logic runs entirely as client-side JavaScript in your browser. Your regex pattern is never sent to any server, API, or third-party service. You can safely explain proprietary or sensitive patterns without any data leaving your machine.

What are lookahead and lookbehind assertions?

Lookahead (?=...) checks that the pattern follows the current position without consuming characters. Negative lookahead (?!...) checks that the pattern does NOT follow. Lookbehind (?<=...) checks what precedes the position. Negative lookbehind (?<!...) checks that something does NOT precede it. These are zero-width assertions — they verify conditions without including text in the match result.

Real-world Examples

Decoding a Complex Email Validation Pattern

A colleague wrote [a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,} for email validation. Paste it into the explainer to see each token broken down: the character class, the quantifier, the literal @, and the top-level domain pattern.

Input

[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}

Output

Token breakdown: [a-zA-Z0-9._%+-] (character set) + (one or more) @ (literal) [a-zA-Z0-9.-] (character set) + (one or more) \. (escaped dot) [a-zA-Z] (character set) {2,} (two or more)

Understanding a URL Pattern with Optional Groups

You found ^https?:\/\/(www\.)?[\w.-]+\.[a-zA-Z]{2,}(\/[^\s]*)?$ in a codebase. The explainer shows that s? makes the s optional, (www\.)? makes the www. prefix optional, and (\/[^\s]*)? makes the path optional.