正则可视化
粘贴一段正则表达式，工具在前端将其语法结构解析为彩色的树状可视化图，直观展示分组、量词与字符类层级，帮助开发者理解复杂正则的匹配逻辑。
🔍 Regex Expression Visualization
Test regular expressions with live match highlighting and an explained breakdown, all running locally in your browser.
📐 工作原理与说明
把正则表达式解析为可视化流程图。
- 原理：把正则解析为语法树（AST），再绘制为铁路图（railroad diagram）展示匹配路径。
- 价值：直观呈现分支、循环与可选部分，便于理解复杂正则的匹配顺序。
- 要素：高亮分组范围、量词作用域与断言位置。
- 用途：调试与学习复杂表达式，降低理解和沟通成本。
📚 深度解析：正则表达式可视化
💡 常见使用场景
- 把正则渲染成 railroad 图理解结构。
- 读懂别人留下的复杂正则：把铁路图铺开，看清分支、量词与分组的嵌套关系，再决定怎么改。
可视化
`a(b|c)*` → 起始 a，循环分支 b/c 的状态图。
❓ 常见问题（FAQ）
- 图怎么看？
- 从左到右的轨道即匹配路径。
- 为什么图里出现了我没写的分支？
- 多半是量词与可选符（?、*、{n,m}）造成的：它们在图上表现为「可跳过的回路」或「重复回路」，看起来像额外分支，其实是等价的表达。另外非捕获分组 (?:...) 与前瞻 (?=...) 在图上也有专门表示，容易与普通分组混淆。