接口文档改正则
后端接口文档里写死了手机号正则 `^1[3-9]\d{9}$`，测试发现 192 号段被拒。改完代码后，文档里的正则也得同步改，但嵌套在 Markdown 代码块里，肉眼检查容易漏。把整段文档粘贴进工具，高亮出所有正则片段，逐个修改后可视化预览新规则是否匹配预期号码，避免文档与代码脱节。
/
/
铁路图 railroad diagram
输入正则表达式，自动生成结构铁路图
字面量
字符类 / 元字符
锚点
分组
＊＋？{ } 量词（节点右上）
测试文本 test string
匹配高亮 matches
匹配 0 处·
捕获组 0 个
输入测试文本后，命中处在此高亮
分组捕获 capture groups · 每个匹配的组
尚无匹配 · 带捕获组的正则命中后将在此列出各组
常用正则速查 quick patterns · 点击填入
就绪 · 输入正则查看铁路图与匹配测试
第一节
关于本工具
About调试正则表达式时，最折磨人的不是写错模式，而是看不出为什么匹配失败。这个工具把正则实时转成轨道图——分支、分组、量词一目了然，同时高亮匹配文本，哪里匹配哪里漏掉，视觉上直接暴露。纯浏览器处理，表达式和测试文本不上传服务器。
使用场景
日志提取邮件地址
运维凌晨收到告警，某服务日志里混入大量异常邮件地址——有的缺@、有的带空格、有的用中文全角符号。写一条 `[\w.+-]+@[\w-]+(?:\.[\w-]+)+` 去抓，但不确定是否漏掉了边界情况。把样本日志贴进工具，看到铁路图里 `[\w.+-]+` 分支没覆盖点号结尾的情况，补上 `(?!\.)` 后才放心上线。
爬虫规则防误伤
写爬虫要抓豆瓣电影 top250 的标题，规则写成 `<span class="title">(.*?)</span>`，但同页面还有副标题、英文名也套这个 class。用工具可视化后，发现铁路图里 `.*?` 会跨到相邻标签，改成 `[^<]+` 并加前后断言，预览确认只命中主标题才部署。
SQL 注入检测规则
WAF 规则里要拦截 `UNION SELECT` 类注入，但合法 SQL 里也可能出现这些词。写 `(?i)\bUNION\b\s+\bSELECT\b`，可视化后发现 `\s+` 允许换行，而 HTTP 请求里换行可能被 URL 编码为 `%0A`，实际不匹配。改写成 `[\s%0A]+` 并用铁路图验证分支覆盖，避免漏报。
配置文件版本迁移
公司 Nginx 配置从 1.18 升级到 1.24，`ssl_protocols` 的写法变了——旧版 `TLSv1 TLSv1.1 TLSv1.2` 在新版里被弃用。需要批量替换所有配置文件里的正则 `ssl_protocols\s+TLSv1(?:\.[01])?\s+`。用工具可视化确认 `(?:\.[01])?` 分支只匹配 `.0` 和 `.1`，不会误删 `TLSv1.2`，才执行全局替换。
第二节
使用指南
Getting Started使用步骤
- 1在「正则表达式」输入框键入模式（如 `\d{3}-\d{4}`），下方即时显示匹配高亮与铁路图
- 2在「测试文本」区粘贴待匹配内容，匹配部分自动高亮，不匹配部分保持灰色
- 3点击铁路图中的任意节点（如 `\d`），对应正则片段在输入框中高亮，辅助定位
- 4展开右侧「匹配结果」面板，查看所有捕获组的分组提取值，支持一键复制
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| \d{3,5} | 铁路图：一个序列，先是一个“数字”节点（\d），然后是一个“重复”框（{3,5}），框内标注“3到5次”。高亮：匹配到的数字序列会被高亮显示。 | 常规：量词 {n,m} 的典型用法，验证重复次数在铁路图中的可视化表现。 |
| ab*c | 铁路图：序列“a”→“b（星号重复框）” →“c”。高亮：匹配“ac”、“abc”、“abbc”等。 | 常规：贪婪量词 * 的可视化，展示零次或多次分支在图中如何呈现。 |
| ^(?!.*\badmin\b).*$ | 铁路图：开始锚点（^）→ 一个“负向前瞻”框（(?!...)），框内是“任意字符（.*）→单词边界（\b）→文字“admin”→单词边界（\b）”→任意字符（.*）→结束锚点（$）。高亮：匹配所有不包含完整单词“admin”的行。 | 边界：零宽断言（前瞻/后顾）在铁路图中通常以特殊框或虚线表示，验证工具是否支持并正确渲染。 |
| 铁路图：空图（无节点）。高亮：无匹配。 | 边界：空正则输入，验证工具是否崩溃或给出合理空状态。 | |
| a|b|c | 铁路图：一个分支节点，三个分支分别指向“a”、“b”、“c”。高亮：匹配单个字符 a、b 或 c。 | 常规：分支（|）的典型可视化，展示多个并列选项在图中如何排列。 |
| (?<name>[A-Z]+) | 铁路图：一个“命名捕获组”框（(?<name>...)），框内是“大写字母（[A-Z]+）”。高亮：匹配连续大写字母序列。 | 易错：命名捕获组在铁路图中可能被忽略或显示为普通组，验证工具是否标注组名。 |
| [^0-9] | 铁路图：一个“字符集”框，内部标注“非数字（0-9）”。高亮：匹配任何非数字字符。 | 易错：否定字符集（[^...]）在图中可能被误标为“除...外”，验证工具对否定的可视化是否清晰。 |
| a{0} | 铁路图：一个“重复”框（{0}），标注“0次”。高亮：匹配空字符串（因为要求零次 a）。 | 边界：量词 {0} 在语义上等价于空匹配，验证工具是否正确处理零次重复。 |
常见错误对照
1.字符类中连字符未转义，产生意外范围
✗ 错误
想匹配数字或连字符，写 [0-9-]✓ 修复
[0-9\-] 或 [-0-9]连字符在字符类中放在开头或结尾是字面量，放在中间（如 a-z）则定义范围。写成 [0-9-] 会被解析为 '0到9 或 连字符'，但若写成 [a-9] 则会报错或匹配意料之外的 ASCII 范围。
2.重复量词叠加，导致正则引擎回溯爆炸
✗ 错误
想匹配任意长度数字，写 \d+?✓ 修复
\d+\d+? 是懒惰匹配，在大多数场景下与 \d+ 结果相同，但会迫使引擎在每个字符位置尝试更少匹配再回溯，处理长文本时性能差数十倍。应仅在需要最小匹配时使用懒惰量词。
3.分组捕获与引用编号混淆
✗ 错误
想重复匹配同一单词，写 (\w+) \1，但实际有嵌套分组时编号错位✓ 修复
使用命名分组 (?P<word>\w+) (?P=word) 或 (\w+) \1 并确认编号反向引用 \1 引用第一个捕获组，若正则中有嵌套分组（如 ((\w+)) ），编号按左括号出现顺序计算，容易误引。命名分组可避免编号依赖，提升可读性。
4.锚点缺失，部分匹配代替全串匹配
✗ 错误
验证邮箱格式，写 \w+@\w+\.\w+✓ 修复
^\w+@\w+\.\w+$无 ^ 和 $ 时，正则会在字符串中任意位置查找子串匹配，导致 'a@b.c 非法字符' 这种字符串也被判定为通过。验证类正则必须用锚点限定匹配范围。
5.转义符在字符串中多一层转义
✗ 错误
在 JavaScript 字符串中写正则 '\d+'✓ 修复
'\\d+' 或使用正则字面量 /\d+/字符串中的反斜杠本身是转义符，'\d' 实际存储为 'd'。在需字符串传参的场景（如 new RegExp('\d')），必须写两个反斜杠 '\\d' 才能表示字面量 \d。
6.忽略多行模式下 ^ $ 的含义变化
✗ 错误
用 ^\d+$ 匹配多行文本中的每行数字，但未开启 m 标志✓ 修复
开启 m 标志后使用 ^\d+$默认模式下 ^ 和 $ 匹配整个字符串首尾。开启多行模式后，它们才匹配每行的首尾。不开启 m 标志时，^\d+$ 只能匹配整个文本只有数字的情况。
7.字符类内特殊元字符忘记转义
✗ 错误
想匹配括号，写 [()]✓ 修复
[\(\)] 或直接使用转义 \( 和 \)在字符类 [] 内部，大部分元字符（如 . * + ?）失去特殊含义成为字面量，但 ] \ ^ - 仍需要特殊处理。括号 () 在字符类内就是字面量，无需转义，但很多开发者习惯性转义反而导致错误。
第三节
工作原理
How It Works核心公式
Railroad Diagram = 正则表达式 → 语法树 → 分支/序列/循环节点 → 图形布局
变量说明
正则表达式用户输入的字符串模式语法树解析后的结构化表示分支节点表示 | 或选择，多个路径序列节点表示连续匹配，顺序排列循环节点表示 * + ? 等重复量词图形布局节点坐标与连线路径
示例
输入正则 /ab(c|d)*e/，解析为：序列节点[字面'a', 字面'b', 循环节点[分支节点[字面'c', 字面'd']], 字面'e']。布局时，序列从左到右排列，循环节点用带箭头的回环线表示重复，分支节点用上下分叉线表示选择。最终生成 railroad diagram 图形，其中 'c' 和 'd' 在分支中上下排列，循环节点外有弧线箭头指向自身。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问我贴进去一个正则，怎么画出来的图和我想的不一样？＋
答
最常见的原因是正则里写了捕获组 `()` 或非捕获组 `(?:)`，可视化图会把每个组画成一个独立分支。如果只想看整体结构，可以先用非捕获组把子表达式包起来，或者直接看顶层的 railroad 主干。另外，`|`（或）会分叉成上下两条轨道，检查一下竖线前后是不是你预期的两个分支。
问这个可视化支持零宽断言（比如 `(?=...)`）吗？怎么画的？＋
答
支持。零宽断言（`(?=...)` 前瞻、`(?!...)` 负前瞻、`(?<=...)` 后顾、`(?<!...)` 负后顾）在 railroad 图上会用虚线框或特殊节点标出，表示它们匹配位置而不消耗字符。比如 `(?=\d)` 会显示成一个虚线菱形，旁边标注“前瞻：数字”。如果你看到某个节点是虚线的，那就是断言，不是普通字符匹配。
问为什么我的正则很长，图只显示了一部分？＋
答
浏览器渲染有宽度限制。如果正则超过几百个字符，railroad 图可能会横向溢出或被截断。你可以尝试：1）缩小浏览器页面缩放比例（Ctrl+滚轮）让图整体缩小；2）把长正则拆成几个子正则分别画，然后对照组合逻辑；3）本工具纯前端运行，不限制输入长度，但显示效果取决于你的屏幕分辨率。建议单次输入不超过 500 字符以保证可视性。
问这个工具和 Regex101 的图有什么区别？＋
答
核心区别在于渲染引擎和交互。本工具用 railroad-diagrams 库生成纯 SVG 图，侧重结构清晰、节点间距均匀，适合打印或嵌入文档。Regex101 的图是 Canvas 绘制，支持点击节点跳转到对应正则片段。本工具纯前端运行，不发送任何数据到服务器，而 Regex101 有后端调试功能会传输正则。如果你注重隐私或需要离线使用，本工具更合适。
问我输入的正则怎么在图上显示乱码或方块？＋
答
通常是编码问题。正则里如果包含中文、日文等非 ASCII 字符，浏览器必须用 UTF-8 编码显示。检查一下：1）你的编辑器或粘贴来源是否用了 GBK 或 Latin-1 编码，导致字符变成乱码；2）正则里是否混入了不可见控制字符（如零宽空格 U+200B）。本工具默认 UTF-8 解析，如果粘贴后出现方块，先清空输入框重新手动输入那几个特殊字符试试。
问用这个工具学正则，能直接看到每一步匹配了什么吗？＋
答
不能。本工具只做静态可视化——把正则结构画成铁路图，展示分支、循环、分组的关系，不提供实时匹配调试（即不会高亮你输入的一段文本里哪些被匹配了）。如果你想看每一步匹配了哪些字符，建议配合 RegexBuddy 或 Regex101 的调试器使用。本工具适合先理解正则的结构骨架，然后再用调试工具验证具体匹配行为。
问我修改了正则，图为什么不自动更新？＋
答
本工具需要手动触发更新，不是实时输入即更新的。每次修改正则内容后，需要点击“可视化”或“生成”按钮（或按回车）才会重新绘制。这是为了避免频繁重绘导致浏览器卡顿（尤其长正则）。如果点了按钮还没变化，检查一下输入框里是否有多余空格或换行，导致语法错误——有语法错误时图会显示错误提示而不是新图。
问这个工具在手机浏览器上能用吗？＋
答
能用，但体验有限。本工具纯前端，手机浏览器支持 SVG 渲染，但 railroad 图通常宽高比较大，小屏幕上需要横向滚动才能看全。建议横屏使用，或者把正则拆成短片段分别查看。输入框在手机上也能正常粘贴，但如果你用 iOS Safari，注意键盘可能会遮挡输入区域，需要手动滚动页面。没有移动端专用布局，但核心功能完整。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。