正则可视化图解

正则表达式一行字符里塞进了字符、分组、重复与分支多重结构，读别人写的正则往往要靠脑内逐字符展开。 可视化把它还原成嵌套盒子：分组是谁的边界、量词修饰谁、或分支有哪几条路，一眼即得，特别适合代码评审、教学讲解与调试复杂规则。

为什么要可视化正则

例如 ^(\d{4})-(\d{2})$ 拆开后是「行首锚点 → 捕获组#1（数字重复 4 次）→ 字面量 - → 捕获组#2（数字重复 2 次）→ 行尾锚点」五段， 哪段限制格式、哪段用于提取一目了然；而 a|bc 的图解会明确显示两条分支是「a」或「bc」，避免误读成「ab 或 c」。

本工具支持哪些语法

覆盖日常大多数场景：字面字符、常用转义（\d \w \s \b 及其大写、\n \t 等）、字符类（范围与取反）、捕获与非捕获分组、 全部五种量词及非贪婪写法、或分支、^ $ 锚点与点号。反向引用、环视断言、命名分组等高级语法暂不支持，会原样以灰色盒展示，不会中断图解。

匹配高亮是怎么测的

底部实测直接用浏览器原生 RegExp 按输入正则做全局匹配，命中的片段黄色高亮； 若正则语法本身有错（如括号不配对），会显示原生报错信息而不是崩溃，方便对照修正。

常见问题

• 我的正则里有 (?=...) 为什么显示灰色？环视断言、反向引用与命名分组暂在本工具支持范围之外，会以灰色「暂不支持可视化」盒原样保留，不影响其余部分解析。
• 量词作用在谁身上？量词只修饰紧邻它的前一个单元（单个字符、转义、字符类或分组），图解中表现为包住该单元并在下方标注。
• 输入 /.../ 包裹的正则会怎样？工具会自动剥离首尾分隔符与 i g m 等标志位，只解析中间的表达式本体。