PocketPlay
中文

Regex Visualizer

Turn a JavaScript regular expression into a railroad diagram you can read at a glance, and export it as SVG or PNG.

🔒 Runs in your browser — files never leave your deviceFree · No sign-up
/ /
Examples

Railroad diagram

Legend

How to use the regex visualizer

  1. Paste a JavaScript regular expression between the slashes — or pick one of the examples to see the shape of a real pattern.
  2. Read the railroad diagram left to right: boxes are things that must match, stacked branches are alternatives, and a loop arrow underneath means “repeat”.
  3. Export the diagram as SVG for docs or a pull request, or as PNG for a slide or a chat message.

FAQ

How do I read a railroad diagram?

Follow the line from the green start dot to the red end dot. Every box you pass through has to match, in that order. Where the line splits into stacked rows, any one of those rows will do — that is an | alternation. A line that curves back underneath a box is a repetition, and its label says how many times. A line that bypasses a box above it means the box is optional.

Which syntax is supported?

ECMAScript patterns: literals, character classes, ., escapes, anchors, groups (capturing, named and non-capturing), alternation, all quantifiers including lazy ones, back-references, lookahead and lookbehind, and \p{…} Unicode properties. Very new set notation from the v flag may be drawn as a single box rather than expanded.

Does my pattern get uploaded?

No. Parsing and drawing happen in your browser, and the SVG or PNG is generated locally too. Nothing about the pattern leaves the page.

Regex TesterHOT Test JavaScript regular expressions live: highlighted matches, capture groups, replace preview and a shareable link. Regex Cheat Sheet A searchable regular expression reference: character classes, anchors, quantifiers, groups, lookaround, flags and Unicode properties, each with a live example. Code FormatterHOT Format or minify JavaScript, TypeScript, JSON, HTML, CSS, SCSS, Markdown and YAML with Prettier, right in your browser. HTML Preview Write HTML, CSS and JavaScript on the left and see the rendered page instantly on the right, in a sandboxed frame. SQL Formatter Format and beautify SQL for MySQL, PostgreSQL, SQLite, T-SQL, BigQuery and more — or minify it back to one line. Table Generator Fill in a spreadsheet-style grid — or paste from Excel — and get the table as HTML, Markdown, CSV, JSON or LaTeX. Meta Tag Generator Build the whole <head> block — title, description, canonical, Open Graph, Twitter card, favicons and JSON-LD — with live Google and social previews. UUID Generator Generate UUID v4, v1, v7, v3 and v5 in bulk — plus ULID and Nano ID — with uppercase, braces and no-dash formatting.

All tools →