正则表达式铁路图可视化器

把正则表达式渲染为 SVG 铁路图（语法图），显示字面量、分组、分支与重复，并标注捕获组编号与标志说明

粘贴一个 JavaScript/PCRE 风格的正则表达式，即可得到一张让结构一目了然的铁路图（语法图）——远比一大堆元字符易读。

工作原理：

  1. 用 ret 库把模式解析为 AST。
  2. 把每个 AST 节点映射为铁路图图元：字面量变成圆角框，分组标注捕获序号（命名组显示名字），分支渲染为选择路径，量词（*、+、?、{n,m}）渲染为回环箭头。
  3. 用 railroad-diagrams 库渲染成自包含的 SVG。

报告还会列出：

  • 每个捕获组及其序号和名字（如果有）。
  • 每个标志的通俗解释（g、i、m、s、u、y、d、x）。

从左到右阅读图表。这对于教学正则、在技术文档中记录复杂模式，以及在灾难性回溯（深层嵌套量词）进入生产前发现它们尤其有用。

限制：解析器覆盖 JavaScript/PCRE 语法，包括字符类、锚点、反向引用、命名分组、零宽断言（以提示形式报告）以及有界/无界量词。部分高级 PCRE 特性（递归模式、\K、分支重置、条件组）不被支持，会报解析错误。

示例结果

2 个示例

可视化 URL 匹配正则

常见 URL 正则渲染为铁路图，含锚点、分组与可选端口。

Railroad diagram with capture groups and flag explanation.
查看输入参数
{ "pattern": "^(https?)://([^/:]+)(:\\d+)?(/.*)?$", "flags": "i" }

可视化邮箱捕获模式

简单的邮箱捕获分组（含单词边界）渲染为图表。

Email pattern railroad diagram with capture group.
查看输入参数
{ "pattern": "\\b(\\w+[\\w.-]*@\\w+[\\w.-]*\\.\\w+)\\b", "flags": "gi" }

关键信息

分类
开发与 Web
输入类型
text
输出类型
html
样本覆盖
4
支持 API
Yes

概览

正则表达式铁路图可视化器能够将复杂的 JavaScript/PCRE 风格正则表达式解析并渲染为直观的 SVG 语法图，清晰展示字面量、捕获组、分支选择和循环结构，帮助开发者轻松理解和调试正则逻辑。

适用场景

  • •需要向团队成员解释或在技术文档中记录复杂的正则表达式结构时。
  • •调试包含多层嵌套、捕获组或复杂分支的正则表达式，难以直观看出匹配逻辑时。
  • •在将正则表达式部署到生产环境前，检查是否存在可能导致灾难性回溯的嵌套量词结构。

工作原理

  • •在输入框中输入正则表达式和可选的修饰符标志。
  • •系统使用 `ret` 库将正则模式解析为抽象语法树（AST）。
  • •将 AST 节点映射为铁路图元素，并使用 `railroad-diagrams` 库生成自包含的 SVG 语法图。
  • •输出可视化图表，并附带捕获组列表及正则表达式标志的详细说明。

使用场景

教学与培训：在编程教学中，通过图形化路径向初学者演示正则表达式的匹配逻辑。
代码审查与文档编写：在 API 文档或代码注释中插入铁路图，直观记录复杂的路由或校验正则。
正则表达式调试：排查复杂的匹配分支，快速定位由于量词嵌套引起的潜在性能问题。

用户案例

1. 可视化 URL 匹配正则

后端开发工程师
背景原因
需要在网关层对传入的 URL 进行格式校验和提取，但现有的正则过于复杂，难以维护。
解决问题
难以直观确认 URL 中的协议、域名、端口和路径捕获组是否正确划分。
如何使用
在“正则表达式”输入框中输入 `^(https?)://([^/:]+)(:\d+)?(/.*)?$`，并在“标志”中输入 `i`。
示例配置
pattern: "^(https?)://([^/:]+)(:\d+)?(/.*)?$", flags: "i"
效果
生成一张清晰的 SVG 铁路图，直观展示了协议、主机名、可选端口和路径的分支路径与捕获组编号。

2. 可视化邮箱捕获模式

前端开发工程师
背景原因
在表单验证逻辑中，需要提取用户输入的邮箱地址，并确保匹配边界正确。
解决问题
需要确认单词边界 `\b` 和字符集在正则中的实际匹配流向。
如何使用
在“正则表达式”输入框中输入 `\b(\w+[\w.-]*@\w+[\w.-]*\.\w+)\b`，并在“标志”中输入 `gi`。
示例配置
pattern: "\\b(\\w+[\\w.-]*@\\w+[\\w.-]*\\.\\w+)\\b", flags: "gi"
效果
渲染出包含单词边界和邮箱字符集匹配路径的语法图，并清晰标注了邮箱整体的捕获组。

用 Samples 测试

image, svg, regex
常用正则表达式
用于验证和匹配的常用正则表达式模式
title token regex
regex
正则表达式模式替代方案
多种编写相同正则表达式模式的方法，在可读性、性能和准确性方面有不同的权衡
title token regex
regex
正则表达式命名捕获组
使用命名捕获组从文本中提取结构化数据的正则表达式模式集合。命名组通过为捕获的部分分配有意义的名称，使模式更易读和更易维护。
title token regex
regex
正则替换示例
用于文本转换和数据清洗的常用正则替换模式集合
title token regex
regex

相关专题

图片格式转换与动画导出工具
在一个专题里比较 JPG、PNG、GIF、AVIF、WebP、TIFF、ICO、base64 以及动画导出相关的图片格式转换工具。
图片整理、修饰与批处理准备工具
把图片清理、裁边、补边、加框、批量缩放压缩、水印和视觉修饰工具集中到一个专题中，适合素材整理流程。
正则测试、校验与匹配调试工具
在一个专题里比较正则测试器、解释器、Lint 检查、性能扫描、模式生成和替换预览工具，适合调试与校验工作流。
图片元数据、EXIF 与隐私清理工具
在一个专题中比较图片元数据查看、EXIF/IPTC/XMP 检查、方向修正、元数据编辑和隐私清理工具，适合图片发布流程。

常见问题

这个工具支持哪些正则表达式流派？

支持 JavaScript 和 PCRE 风格的正则表达式语法。

什么是铁路图？

铁路图（或语法图）是一种可视化表示形式，通过从左到右的路径展示正则表达式的匹配流程。

为什么我的正则表达式解析失败了？

工具不支持部分高级 PCRE 特性（如递归模式、\K、分支重置或条件组），这些特性会导致解析错误。

捕获组在图表中是如何表示的？

捕获组会被标记并标注其对应的捕获序号，命名捕获组则会直接显示其名称。

我可以导出生成的铁路图吗？

工具会渲染出标准的 SVG 矢量图，您可以直接复制或保存该图形。

API 文档

请求端点

POST /zh/api/tools/regex-railroad-diagram-visualizer

请求参数

参数名 类型 必填 描述
pattern text 是 -
flags text 否 -

响应格式

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-regex-railroad-diagram-visualizer": {
      "name": "regex-railroad-diagram-visualizer",
      "description": "把正则表达式渲染为 SVG 铁路图（语法图），显示字面量、分组、分支与重复，并标注捕获组编号与标志说明",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=regex-railroad-diagram-visualizer",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

如果遇见问题，请联系我们：[email protected]