Regex Railroad Diagram

How to visualize a regular expression

1. Type or paste your pattern in Regular expression. You can also paste a complete JavaScript literal such as /^\d{3}-\d{4}$/gm: the slashes are removed and the flags move to the flags box automatically.
2. Add flags if you need them (any of d g i m s u v y). Flags change how some parts are drawn: with m, ^ and $ become “start of line” and “end of line”; with s, the dot becomes “any character”.
3. The diagram updates as you type. Draw diagram redraws it on demand, and Next example cycles through a few common patterns (email, phone number, hex colour, price, HTML tag, URL).
4. Read the diagram from left to right, from the filled dot to the ringed dot. Every path you can follow is a string the pattern can match.
5. Use Download SVG for a sharp vector image (documentation, slides), Download PNG for a picture at double resolution, or Copy SVG code to paste the markup into a web page.

Hover a box to see the part of the pattern it comes from and its position.

How to read a railroad diagram

Railroad diagrams, also called syntax diagrams, describe a grammar as a set of tracks. A regular expression is exactly such a grammar, so the drawing shows its structure far better than a dense line of symbols:

• Blue boxes are literal text that must appear as written, for example “@”.
• Green boxes are character types (\d digit, \w word character, . any character…) and character classes. A class such as [\w.+-] becomes a box headed “one of” listing each item; a negated class [^…] is red and headed “none of”.
• Purple pills are anchors and boundaries: start and end of text or line, \b word boundary. They match a position, not a character.
• Orange dashed boxes are back-references such as \1 or \k<name>: the same text as a group matched earlier.
• Dashed frames are groups. Capturing groups are numbered in the order of their opening parenthesis (“group #2 “domain””); non-capturing groups (?:…) are not framed. Lookaheads and lookbehinds get a pink frame labelled “followed by” or “preceded by”, because they check the text without consuming it.
• Parallel tracks are alternatives separated by |.
• A track above an item lets you skip it (?, *, {0,n}). A track below with an arrow loops back to repeat it (+, *, {n,m}). Counts other than the usual ones are written under the loop, such as “2 to 5 times”, and lazy quantifiers (+?, *?) are marked “lazy”.

Error messages with positions

The pattern is checked by your browser’s own JavaScript regular expression engine, so what this tool accepts is exactly what new RegExp() accepts with the same flags. When the engine rejects it, the tool points to the offending character with its position and a caret under the pattern. It recognises an unmatched ), a group that is never closed, a character class missing its ], a quantifier with nothing to repeat (*a, a|+), a lone backslash at the end and {n,m} quantifiers where n is greater than m. Other errors, such as a back-reference to a group name that does not exist, are shown with the browser’s message.

The expression is only compiled to validate it: it is never run against any text, and nothing leaves your browser.