Regex Visualizer
Transform regular expressions into interactive railroad diagrams, explore the AST breakdown, and test live matches — 100% free and client-side.
Type any regular expression to see its railroad diagram, AST breakdown, and live match highlighting — entirely in your browser with no data sent to any server.
Quick Reference
.Any char (except \n)\dDigit [0-9]\wWord char [a-zA-Z0-9_]\sWhitespace^Start of string/line$End of string/line\bWord boundary(…)Capturing group(?:…)Non-capturing group(?<n>…)Named group(?=…)Positive lookahead(?!…)Negative lookahead*Zero or more (greedy)+One or more (greedy)?Zero or one{n,m}Between n and m times|Alternation (OR)[…]Character class[^…]Negated class\1Back-referenceInteractive Railroad Diagram
See your regular expression rendered as a professional railroad/syntax diagram in real time. Every token — literals, groups, quantifiers, alternations, and lookaheads — is displayed as a navigable visual lane.
AST Breakdown with Token Tree
Explore a collapsible Abstract Syntax Tree showing every parsed node — sequences, alternations, named groups, quantifiers, backreferences — with human-readable descriptions to pinpoint exactly what each part of your regex does.
Live Match Testing with Highlighting
Paste a test string and watch matches highlight instantly. A capture-group table shows every match with its named and numbered group values, helping you verify correctness before shipping the pattern to production.
100% Free — No Signup, No Server
All parsing, diagram generation, and match evaluation run directly in your browser using the native JavaScript regex engine. No data leaves your device, making the tool safe for sensitive patterns like authentication rules or PII validators.
Pattern Debugging
Immediately spot mismatched groups, greedy quantifier traps, and alternation order issues without running code by inspecting the visual railroad.
Code Reviews
Share a link to a visualized regex during pull request reviews so reviewers can verify intent without mentally parsing raw escape sequences.
Security Auditing
Audit input validation patterns for catastrophic backtracking (ReDoS) risks. The AST tree makes nested quantifiers and ambiguous alternations immediately visible.
Learning Regular Expressions
Beginners can type simple patterns and progressively add features, seeing exactly how each character class, quantifier, or group affects the diagram.
Documentation Generation
Export or screenshot railroad diagrams for API documentation, wikis, or technical blog posts to explain complex validation logic without lengthy prose.
Multi-Platform Testing
Test pattern behavior against multiple sample strings at once and verify named capture group extraction used in URL routing, log parsers, or CSV splitters.
The Aback Tools Regex Visualizer converts regular expression patterns into interactive state diagrams and AST trees entirely in your browser. No server communication is required — all parsing and rendering is performed using a pure TypeScript regex parser and the native JavaScript regex engine.
How the Railroad Diagram Works
A railroad (or syntax) diagram visualizes a formal grammar as a set of tracks. The pattern is read from left to right: each token is a labeled box connected by lines. When there is a choice (alternation via |), the tracks split vertically and re-join after the alternatives. When a token is optional or repeating, a loop arc is drawn above the element to indicate the quantifier. This matches the mental model most developers use when reasoning about a regex — left-to-right, with branches for choice and loops for repetition.
AST Breakdown
Alongside the diagram, the AST Breakdown tab shows the full Abstract Syntax Tree parsed from your pattern. Every node has a type (Sequence, Alternation, Group, Quantifier, Literal, CharClass, Escape, Anchor, Backref) and a human-readable description. The tree is fully collapsible, so you can focus on specific sub-patterns without losing context.
Live Match Testing
The Test & Match tab lets you paste sample input and immediately see which portions of the string match your pattern. Matches are highlighted inline, and a capture-group table shows every numbered and named group extracted from each match — the same data your application code receives when calling String.prototype.matchAll() orRegExp.prototype.exec().
Supported Syntax
The visualizer supports the full ECMAScript regex feature set including character classes ([a-z], [^0-9]), shorthand escapes (\d, \w, \s), anchors (^, $, \b), capturing and non-capturing groups, named groups via (?<name>…), lookaheads ((?=…), (?!…)), lookbehinds ((?<=…), (?<!…)), backreferences (\1, \k<name>), and all quantifiers including lazy variants (*?, +?, ??).
A railroad (or syntax) diagram visualizes a regex as a track network read left to right. Choices (alternations) fork into parallel lanes and re-merge after the branch. Repeating elements (quantifiers) are shown with a loop arc above the box. The visualization maps directly to how the regex engine traverses the pattern.
Everything runs entirely in your browser. The parser is pure TypeScript, the diagram is rendered as SVG using React, and the match engine is the native JavaScript RegExp built into your browser. No data is sent to any server, making the tool safe for sensitive patterns.
The visualizer supports the full ECMAScript regex grammar: character classes, shorthand escapes (\d, \w, \s), anchors, groups (capturing, non-capturing, named), lookaheads, lookbehinds, backreferences, and all quantifiers including lazy variants. Patterns can be entered as plain text or in /pattern/flags notation.
Switch to the "Test & Match" tab and paste your sample input into the text area. Matches are highlighted inline in real time. A table below shows each match with its numbered and named capture group values — exactly what your application receives when calling exec() or matchAll().
The Abstract Syntax Tree (AST) tab displays a collapsible tree of every parsed node: Sequence, Alternation, Group, Quantifier, Literal, CharClass, Escape, Anchor, and Backref. Each node shows its source token and a plain-English description, making it easy to audit complex nested patterns.
Yes, partially. The AST tree makes nested quantifiers and ambiguous alternations immediately visible — the two most common causes of catastrophic backtracking (ReDoS). Seeing (?:a+)+ or (a|a)* in the diagram helps identify danger patterns before they reach production.
Flags modify how the engine evaluates the pattern. The tool supports: g (global — find all matches), i (case-insensitive), m (multiline — ^ and $ match line boundaries), and s (dot-all — . matches newlines). Toggle flags with the buttons next to the input, or include them in /pattern/flags notation.
Related Tools
JSON to YAML
Convert JSON to YAML format instantly - Free online JSON to YAML converter
XML to YAML
Convert XML to YAML format for configuration migration - Free online XML to YAML converter
CSV to YAML
Convert CSV spreadsheet data to YAML format - Free online CSV to YAML converter
TSV to YAML
Convert TSV tab-separated data to YAML format - Free online TSV to YAML converter