Loading…
Loading…
Test regex live — railroad diagrams + plain English explained
| # | Match | Position |
|---|---|---|
| 0 | [email protected] | 14 |
| 1 | [email protected] | 33 |
one or more of any character in [a-z], then "@", then one or more of any character in [a-z], then ".", then 2 or more of any character in [a-z] Flags: global (find all matches)
Run your projects on Claude Code?
We packaged the .claude config that runs this site — 26 specialist agents, 14 workflow skills, and 6 rule files from 31 real production incidents. From $9.
Get the Claude Code Production Pack — $29Regular expressions are one of the most powerful — and most misread — tools in a developer's toolkit. The ECMAScript regex engine used by JavaScript, Node.js, and most web frameworks supports a rich feature set including named capture groups, lookbehind assertions, and Unicode property escapes introduced in ES2018. A playground that renders railroad diagrams transforms an abstract pattern like /^(?=.*[A-Z])(?=.*\d).{8,}$/ into a legible flowchart, cutting debugging time dramatically.
Pattern matching runs the browser's native RegExp engine, which means results are identical to what you would get in Node.js or a modern browser environment. The engine evaluates the pattern against your test string using the selected flags and highlights every match position in real time as you type.
Railroad diagrams are generated by parsing the regex AST (abstract syntax tree) and rendering each token — literals, character classes, quantifiers, groups, alternation — as a directed graph where left-to-right flow represents the matching direction. Each node type is color-coded: green for literals, blue for groups, orange for quantifiers.
The plain English explainer traverses the same AST and generates prose descriptions for each node. A pattern like \b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\b is explained as "a word boundary, followed by one or more uppercase letters, digits, dots, underscores, percent signs, plus signs, or hyphens..."
A developer writing an email validation function tests their pattern against 15 edge-case strings to verify it rejects missing TLDs but accepts plus-sign subaddresses.
A data engineer crafts a regex to extract ISO 8601 timestamps from messy log lines, using the railroad diagram to verify the optional milliseconds group fires correctly.
A security engineer builds an input sanitization pattern and uses the explainer to document it in plain English for a code review comment.
A junior developer learning regex uses the railroad diagram to understand how alternation and grouping interact in an existing pattern they inherited.
Type your regex pattern and select flags (g, i, m)
Enter test strings — matches highlight instantly in real-time
View the railroad diagram for a visual breakdown of your pattern
Read the plain English explanation to understand each part
About the Regex Playground
JavaScript regex (ECMAScript). This is the same flavor used in Node.js, browsers, and most web frameworks.
A visual flowchart showing how the regex engine processes your pattern step by step. It makes complex patterns much easier to understand.
Patterns are saved in your browser's local storage. You can also share via URL — the pattern is encoded in the URL parameters.
The playground supports g (global — find all matches), i (case-insensitive), m (multiline — ^ and $ match line boundaries), s (dotAll — . matches newlines), and u (Unicode mode). Flags can be combined freely.
Wrap the part of your pattern you want to extract in parentheses. The match panel shows each capture group numbered from left to right. Named groups (using ?<name> syntax) are also labeled by name.
Yes. The explainer breaks down lookaheads, lookbehinds, backreferences, character classes, quantifiers, and alternation. For very complex patterns it explains each segment in sequence rather than attempting a single sentence.
Builder/critic agent prompts with brakes built in
Open →DeveloperFormat, validate & diff JSON — runs entirely in browser
Open →DeveloperOne color in, full design system out
Open →DeveloperBuild cron jobs visually — no syntax to memorize
Open →