Elysia Tools
导航
Development
把正则表达式渲染为 SVG 铁路图（语法图），显示字面量、分组、分支与重复，并标注捕获组编号与标志说明
详情
粘贴一个 JavaScript/PCRE 风格的正则表达式，即可得到一张让结构一目了然的铁路图（语法图）——远比一大堆元字符易读。
工作原理：
ret 库把模式解析为 AST。railroad-diagrams 库渲染成自包含的 SVG。报告还会列出：
从左到右阅读图表。这对于教学正则、在技术文档中记录复杂模式，以及在灾难性回溯（深层嵌套量词）进入生产前发现它们尤其有用。
限制：解析器覆盖 JavaScript/PCRE 语法，包括字符类、锚点、反向引用、命名分组、零宽断言（以提示形式报告）以及有界/无界量词。部分高级 PCRE 特性（递归模式、\K、分支重置、条件组）不被支持，会报解析错误。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
正则表达式铁路图可视化器能够将复杂的 JavaScript/PCRE 风格正则表达式解析并渲染为直观的 SVG 语法图，清晰展示字面量、捕获组、分支选择和循环结构，帮助开发者轻松理解和调试正则逻辑。
背景
需要在网关层对传入的 URL 进行格式校验和提取，但现有的正则过于复杂，难以维护。
问题
难以直观确认 URL 中的协议、域名、端口和路径捕获组是否正确划分。
如何使用
在“正则表达式”输入框中输入 `^(https?)://([^/:]+)(:\d+)?(/.*)?$`，并在“标志”中输入 `i`。
pattern: "^(https?)://([^/:]+)(:\d+)?(/.*)?$", flags: "i"结果
生成一张清晰的 SVG 铁路图，直观展示了协议、主机名、可选端口和路径的分支路径与捕获组编号。
背景
在表单验证逻辑中，需要提取用户输入的邮箱地址，并确保匹配边界正确。
问题
需要确认单词边界 `\b` 和字符集在正则中的实际匹配流向。
如何使用
在“正则表达式”输入框中输入 `\b(\w+[\w.-]*@\w+[\w.-]*\.\w+)\b`，并在“标志”中输入 `gi`。
pattern: "\\b(\\w+[\\w.-]*@\\w+[\\w.-]*\\.\\w+)\\b", flags: "gi"结果
渲染出包含单词边界和邮箱字符集匹配路径的语法图，并清晰标注了邮箱整体的捕获组。
支持 JavaScript 和 PCRE 风格的正则表达式语法。
铁路图（或语法图）是一种可视化表示形式，通过从左到右的路径展示正则表达式的匹配流程。
工具不支持部分高级 PCRE 特性（如递归模式、\K、分支重置或条件组），这些特性会导致解析错误。
捕获组会被标记并标注其对应的捕获序号，命名捕获组则会直接显示其名称。
工具会渲染出标准的 SVG 矢量图，您可以直接复制或保存该图形。