Elysia Tools

在一个清晰的工作台里浏览工具、案例、可视化和主题指南。

热门分类

专题

语言
ZHESPTRUFRDEEN

Elysia Tools

导航

Development

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

· 最后更新:2026-06-20

把正则表达式渲染为 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、分支重置、条件组)不被支持,会报解析错误。

执行

运行这个工具

填写表单、运行工具,并在同一页面查看结果。

案例

与这个工具匹配的案例

相关内容

继续查看相关工具与专题

由 Elysia Tools 团队编写
图像355
可视化69
正则表达式24
SVG14
正则表达式8

工具使用指南

详细了解工具的适用范围、支持能力及用户案例。

关键事实

分类
Development
输入类型
text
输出类型
html
案例覆盖
4
API 可用
是

概览

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

适用场景

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

使用方式

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

常见用途

  • 教学与培训:在编程教学中,通过图形化路径向初学者演示正则表达式的匹配逻辑。
  • 代码审查与文档编写:在 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"

结果

渲染出包含单词边界和邮箱字符集匹配路径的语法图,并清晰标注了邮箱整体的捕获组。

常见问题

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

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

什么是铁路图?

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

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

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

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

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

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

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

专题

正则测试、可视化与安全审查工作流

通过语法参考、匹配测试、结构可视化、替换预览、性能对比和 ReDoS 扫描,构建更可靠的正则表达式。

首页
工具3201
案例593
可视化465
文件查看器103
专题233
标签333
图像、音频与视频657

图像、音频、视频处理、转换与优化工具

数学、日期与金融644

计算器、数值计算、日期逻辑、统计与金融工具

设计与颜色297

颜色、版式、图形、视觉样式与设计辅助工具

文本与写作209

写作、清洗、格式化、提取与文本分析工具

开发与 Web193

开发者工具、网络处理、Web 调试与自动化辅助工具

转换与编码175

格式、文件、压缩包、单位与编码转换工具

FLAC/WAV 无损音源疑点筛查与证据交付
自托管抽奖组件配置复核、嵌入测试与上线交付
Stripe 优惠码候选批次审核与本地导入预检
批量照片技术初筛、近重复复核与修图候选交付
界面截图结构化、人工校对与开发交付

© 2026 Elysia Tools. 保留所有权利。

文档价格关于我们服务条款隐私政策Cookie 政策联系我们
文本处理

正则替换示例

用于文本转换和数据清洗的常用正则替换模式集合

开发

常用正则表达式

用于验证和匹配的常用正则表达式模式

校验

正则表达式模式替代方案

多种编写相同正则表达式模式的方法,在可读性、性能和准确性方面有不同的权衡

文本处理

正则表达式命名捕获组

使用命名捕获组从文本中提取结构化数据的正则表达式模式集合。命名组通过为捕获的部分分配有意义的名称,使模式更易读和更易维护。

Math & Numbers

正态分布绘图器

将正态分布绘制为 SVG 钟形曲线,可标注 z 分数、区间或尾部概率阴影,并叠加 68/95/99.7 标准差带。

Development

PCRE2 正则测试器

在线测试 PCRE2 正则:全套命名组语法((?P<n>)、(?<n>)、(?\u0027n\u0027))、占有优先量词、原子组、\A \z \h 简写——附 pcre2grep 与 C API 代码片段。

Development

正则表达式速查表

可搜索、多语言的正则表达式语法速查表——字符类、锚点、量词、分组与引用、环视断言、转义序列和标志位,并内置快速测试器

Sports

球队表现对比器

粘贴多支球队的 CSV 赛季数据,生成并排对比表:每列最佳/最差高亮、0–100 归一化评分、综合排名与 SVG 条形图。