用弹珠轨道可视化正则表达式

把正则表达式变成弹珠轨道

如果你更擅长通过实物运动来理解抽象概念，那么 bottomless 开发的 Regex Marble Run 可能正合你意。输入一条测试正则表达式和一个字符串，网站就会生成一台虚拟弹珠机，让正则表达式以更直观的方式“拆解”这个字符串。

例如打开这个示例链接，会看到正则表达式 ^[hH]ack.[dD][^0-9]*$。对不熟悉正则的人来说，它看起来可能有点神秘，但逐段拆开就清楚多了。

逐段拆解一个正则

• ^ 表示从字符串开头匹配。因此 ^dog 能匹配 “dog” 和 “dog food”，但不会匹配 “food for a dog”。
• [hH] 表示匹配 “h” 或 “H”。接着的 ack 就是字面上的 “ack”。所以以 “hack” 或 “Hack” 开头的字符串可能匹配，具体还要看后面的表达式。
• 句点 . 表示匹配任意单个字符。
• 后面的 [dD] 用来匹配任意形式的字母 D。
• [^0-9] 是一个取反的字符类：匹配 0 到 9 之外的任意字符。
• * 表示前一项可以出现零次或多次。因此 “HackxD” 能匹配，“HackxDXYZabc” 也能匹配。

这里有个容易误判的问题：“HackxDXYZabc123” 能匹配吗？只看前半段似乎可以，但正则只匹配到了小写字母 c 附近。最后的 $ 表示字符串结尾，由于后面还有 “123”，整条字符串并不能满足结束位置的要求。相反，“HackxDXYZabc” 可以匹配，因为前面的 * 已经“吃掉”了剩余字符。

弹珠如何判定匹配

如果这些规则让你头晕，网站的弹珠动画可以帮忙。测试字符串中的每个字符都会变成一颗弹珠，依次落过正则表达式的不同部分。通过关卡的弹珠进入左侧盒子，失败的则进入右侧盒子。它是否真能帮助理解正则并不确定，但看弹珠在轨道里滚动本身已经挺有趣。

对于想复习正则表达式的人，这个工具也提供了一个轻松的入口：先观察弹珠如何被接受或拒绝，再回到表达式本身逐段分析。