Regex Visualizer — Railroad Diagram + Character-Level Match

Real-world use cases

• Read a 200-character regex from a coworker's PR in 30 seconds

  Your coworker submits a PR with `^(?:[a-zA-Z0-9_'^&\/+-])+(?:\.(?:[a-zA-Z0-9_'^&\/+-])+)*@(?:[a-zA-Z0-9-])+(?:\.(?:[a-zA-Z0-9-])+)*$` and you're supposed to review whether it correctly validates emails. Paste it into the visualizer. The railroad diagram shows the structure in one screen — local-part with allowed chars, optional dot-separated sub-parts, @ sign, domain with allowed chars, optional dot sub-domains, end anchor. You now understand it in 30 seconds instead of squinting at the string for ten minutes. You can also test the diagram against edge-case strings (Unicode in the local part, IDN domains) by pasting them into the test string box.

• Teach a junior dev what a capture group actually is

  You're pairing with a new hire who has heard of regex but never internalized capture groups. Open the visualizer, load the email sample, and point to the dashed amber boxes — those are the capture groups. Change the test string and watch the pink highlights move with the actual captured characters. The "abstract concept" becomes a thing they can see, and they stop confusing capture groups with character classes (a surprisingly common bug).

• Embed a regex diagram in design docs

  Your design doc explains the routing layer's URL parser and someone is going to ask "what counts as a valid slug". Open the visualizer, paste your slug regex, click Download SVG, drop the .svg into the doc. The reader now has a visual spec, not just a wall of escapes. The SVG is self-contained so it survives doc exports to PDF and email forwards.

• Debug why a regex isn't matching the string you expected

  You wrote `^https?:\/\/\w+\.com` to extract dot-com URLs and it's not catching `https://sub.toolora.com`. Paste both into the visualizer. The character-level view immediately shows that nothing in your test string is highlighted past `sub` — because `\w+` only consumed `sub` and then expected `.com` but got `.toolora`. The diagram makes it obvious: you need a dotted-subdomain group between the `//` and the `\.com`. Without the visualizer this is the kind of bug that eats an afternoon.

• Generate teaching material for a regex workshop

  You're running an internal workshop on regex. Open each of the ten sample patterns one by one, screenshot the railroad diagram (or use Download SVG), and you have a slide deck. Each diagram shows structure rather than syntax, which is the gap most regex tutorials never bridge.

Common pitfalls

• Double-escaping backslashes. When you copy `"\\d+"` from a JavaScript string literal, the `\\` is the source representation of a single backslash. Type it as `\d+` here — one backslash. The visualizer doesn't go through a string-literal parser, so the second `\` is literally a `\` character, which then makes the next escape illegal.

• Forgetting that `[abc-]` includes the literal `-` because it's at the end. The character-class box label shows what's actually inside the brackets — if you wrote `[a-z-A-Z]` thinking it was two ranges, look at the box label and you'll see it's `a-z`, literal `-`, then `A-Z`. Move the dash to the start or escape it.

• Confusing `(?:...)` and `(?=...)`. The first is a non-capture group (a structural grouping that doesn't make a capture slot). The second is a positive lookahead (a zero-width assertion). The visualizer labels each box with its actual semantic so you can tell at a glance which is which.

• Expecting `\b` to mean "any whitespace". It does not. `\b` is a zero-width word boundary anchor (it asserts the position between a word and a non-word character without consuming any character). The pink diamond shape is a visual cue that anchors don't consume characters — if you want to match whitespace, use `\s`.

• Writing patterns that match the empty string (`a*`, `()`, `(?:.*)?`). These cause the global match loop to spin in the same place. The visualizer's match count tries to avoid the infinite-loop trap but the diagram will show a quantifier whose minimum is 0 around something that can also match nothing — that's the warning sign.

Privacy