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

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

> 标准页面: https://elysiatools.com/zh/tools/regex-railroad-diagram-visualizer

- **分类:** Development

- **关键词:** 正则表达式, 铁路图, 可视化, regex, 图表

## 概述

粘贴一个 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、分支重置、条件组）不被支持，会报解析错误。

## 输入项

- **正则表达式** (text): e.g. ^(https?)://(\[^/:\]+)(:\d+)?(/.*)?$ · (\w+@\[\w.-\]+) · \b\d{3}-\d{4}\b
- **标志** (text): e.g. gi · gim · (leave empty for none)

## 适用场景

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

## 工作原理

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

## 使用案例

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

## 常见问题

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

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

### 什么是铁路图？

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

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

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

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

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

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

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

## 相关工具

- [正则表达式速查表](https://elysiatools.com/zh/tools/regex-cheat-sheet): 可搜索、多语言的正则表达式语法速查表——字符类、锚点、量词、分组与引用、环视断言、转义序列和标志位，并内置快速测试器
- [正则执行追踪器](https://elysiatools.com/zh/tools/regex-debugger): 逐步展示正则表达式如何匹配字符串：可视化每次匹配尝试、部分成功、回溯与捕获——是理解正则行为的认知工具，而非只看最终结果
- [正则替换预览器](https://elysiatools.com/zh/tools/regex-replace-previewer): 实时预览正则替换，显示详细差异和统计
- [显微镜标尺校准器](https://elysiatools.com/zh/tools/microscope-scale-bar-calibrator): 计算显微镜物方尺度、实际视野、衍射极限和奈奎斯特采样，并下载透明 SVG 标尺。
- [自闭合HTML标签参考](https://elysiatools.com/zh/tools/self-closing-html-tags): HTML空元素（自闭合标签）、SVG元素和MathML元素的完整参考指南
- [正则表达式测试](https://elysiatools.com/zh/tools/regex-tester): 测试正则表达式匹配文本
- [开普勒轨道求解器](https://elysiatools.com/zh/tools/kepler-orbit-solver): 数值求解开普勒方程 E − e·sin(E) = M，得到偏近点角 E、真近点角 ν、轨道半径与相对速度，支持牛顿/二分/不动点三种方法、收敛历史与 SVG 轨道图
- [ReDoS 正则拒绝服务扫描器](https://elysiatools.com/zh/tools/redos-regex-scanner): 扫描一个或多个正则表达式的灾难性回溯风险，模拟恶意输入并给出更安全的替代建议

## 示例

- [正则替换示例](https://elysiatools.com/zh/samples/regex-replace): 用于文本转换和数据清洗的常用正则替换模式集合
- [常用正则表达式](https://elysiatools.com/zh/samples/regex-samples): 用于验证和匹配的常用正则表达式模式
- [正则表达式模式替代方案](https://elysiatools.com/zh/samples/regex-alternatives): 多种编写相同正则表达式模式的方法，在可读性、性能和准确性方面有不同的权衡
- [正则表达式命名捕获组](https://elysiatools.com/zh/samples/regex-named-groups): 使用命名捕获组从文本中提取结构化数据的正则表达式模式集合。命名组通过为捕获的部分分配有意义的名称，使模式更易读和更易维护。

## 相关内容

- [正则测试、可视化与模式调试工具](https://elysiatools.com/zh/hubs/regex-utility): 把正则测试器、解释器、速查表、结构可视化、Lint、性能扫描和替换预览工具放在同一个专题里，方便完成更安全的模式设计与调试流程。
- [SVG、Favicon 与图标资产工作流工具](https://elysiatools.com/zh/hubs/svg-favicon-icon-workflows): 在一个专题中完成 favicon 套件生成、SVG 优化、ICO/PNG/JPG/WebP/SVG 之间的图标转换，以及面向网页交付的图像资产准备。