Regex Visualizer

This tool draws a JavaScript regular expression as a railroad diagram: follow the line from left to right, and any path you can take through the boxes is text the pattern matches. Plain text is green, kinds of character such as “digit” are blue, character sets are violet, and positions such as the start of a line are amber. A loop underneath a box means it can repeat, a line over it means it can be skipped, and a dashed frame is a group — numbered when it captures, or labelled “Followed by” or “Preceded by” for lookarounds. Below the diagram the same pattern is read out in plain English, nested by group, and a test box highlights what it matches in your own text.

1. Type or paste a pattern between the slashes, without the surrounding slashes, and any flags such as g, i, m, s or u after them.
2. Or press one of the examples to see a finished pattern.
3. Read the diagram from left to right; use the zoom buttons for long patterns, and scroll sideways if it is wider than the screen.
4. Read “In words” for the same pattern as a numbered description.
5. Put some text in “Try it” to see every match highlighted.
6. Download the diagram as an SVG for documentation, or copy the pattern with its flags.

• This reads JavaScript’s regular expression syntax, as your browser does. Other flavours differ: PCRE, Python and Java have features JavaScript lacks, such as possessive quantifiers and atomic groups, and those patterns may be rejected or read differently.
• Patterns up to 2,000 characters are drawn.
• A pattern that takes more than a second and a half on the test text is stopped and reported as slow — that usually means catastrophic backtracking, which would also be slow in your code.
• Sets with the v flag (such as [\p{L}--[a-z]]) are listed as their parts, not as the result of the set operation.
• The pattern and your test text stay in this page. Nothing is uploaded or saved. Matching runs in a background worker inside your browser.

Start at the double bar on the left and follow the line to the one on the right. Where the line splits, you may take any branch. Every box you pass through must match, in order. A line that curves back under a box lets you repeat it; one that arches over it lets you skip it.

The tool uses your browser’s JavaScript engine to decide what is valid. Python syntax such as (?P<name>…) for named groups, or inline flags like (?i), is not JavaScript syntax. In JavaScript write (?<name>…) and pass flags after the closing slash.

The quantifier is lazy: it has a ? after it, as in .*? or \d+?. A lazy quantifier matches the shortest text that lets the rest of the pattern succeed, where a normal one matches the longest.

The Regex Tester lists every match with its groups and can preview a replacement. This tool is for understanding the shape of a pattern.