一、前置工具篇

正则觉得难无非难在两点，看不懂（长正则易读性都很差）与不会写（不敢保证写的对），针对这两点我先分享几个工具，两个专门用于看，两个专门用于在线写在线测，算是学习正则前的前置知识。

1.1正则图解神器 Regulex

Regulex 这个工具也是我在阅读正则迷你书时，作者所推荐的一个工具。长正则因为分组多正则表达式长，我们单看代码可能从到到哪是一个组都看的费劲，但通过图解工具，你的分组，每个分组起到什么作用都非常清晰。

比如我们现在要实现一个正则，匹配任意三个连续且完全相同的数字，比如：

const regex = /^(\d)\1{2}$/g;
regex.test(123);// false
regex.test(111);// true
regex.test(555);// true

/^(\d)\1{2}$/g是一个结构相对简单的正则，但对于了解基本概念但读正则有点费劲的同学，心里肯定会想，这是个啥玩意？我们将这段正则复制到 Regulex 中，图解图下：

Group #1 代表分组1，对应正则也就是(\d)这一段，而Digit也解释了含义，表示匹配一个任意数字。

Backref 表示反向引用，引用谁？紧接着一个 #1 表示反向引用分组1，而 Backref #1 被一个2 times 连通，代表这一段匹配 2 次。

那么总结来说，(\d) 匹配一个任意精确的数字，反向引用再匹配这个数字两次，加起来就是一个数字重复匹配3次，所以这也是为什么123匹配失败，因为当匹配到 1 时，\1{2}此时已经被确定成再反向引用匹配 1 两次了。

1.2 图解可视化工具 regex-vis

与 Regulex 类似，regex-vis 也是一款用于图解正则的工具，比如正则：

const regex = /23{2,}/

表示匹配 2 开头，以及 3 结尾，且 3 出现最少 2 次。

1.3正则在线调试工具regexr

如果说 Regulex 与 regex-vis 主要用来帮助我们读，那么 regexr 能非常方便的帮助我们在线写正则，比如在日常开发中我们写了一个正则，看上去似乎满足了需求，又担心它会不会出乎意料的匹配到我们不想要的内容，regexr就能起到一个很好的测试作用。

regexr 界面非常简单，一共分为三个区域，上方 Expression 用来写你的正则，下方 Text 用于写你的测试用例，而最下方的工具栏Tools能让你写一个正则做更多事。

比如在上图中，我定义了一个正则 /\d([a-z]+)/，以及一个例子 123abc12 ，于是被匹配的区域成功高亮；在更下方工具栏，我们选择了Replace，我们希望将匹配内容替换成 ❀ ，于是在下面我们看到了替换完成的结果 12❀12。

你完全可以将一个正则写好贴上去，然后把很多个正则匹配边界情况的例子统统加入到Text中，用于检验你的正则是否符合你的预期。而在 Expression 右侧，我们还能切换变成语言，以及选用更多修饰符，比如是否启用全局匹配，是否多行，是否区分大小写等等。

我在给前同事解释分组与反向引用的过程中，他问了我一个这个问题，为什么下面这段代码输出是 true：

new RegExp(/(?:[0-9]){1}-([a-z])\1{3}/).test('111111-bbbb')// true

对于他而言，他的理解是(?:[0-9]){1}这一段明明限定了只匹配1个任意数字，那为什么后面用例这么多个1还匹配成功了，单看这代代码，好像真是这么回事，但只要你把这个正则贴到 regexr 中你完全不会有这个疑虑：

因为这个正则并没有限定从什么地方开始匹配数字1，他给的这个例子中确实有一小段符合要求，当然返回是true。若想达到他的预期，只需要在正则前加一个^即可。

new RegExp(/^(?:[0-9]){1}-([a-z])\1{3}/).test('111111-bbbb')// false

1.4 vscode 插件 Regex Previewer

除了在线网站，有时候我们写代码过程中也想立刻测试正则是否生效，Regex Previewer 就是一个这样的插件。在安装之后，代码中所有正则代码的上角都会出现一个 test 按钮，点击后它会帮你新开一个 tab 并提供部分用例，且匹配的内容会帮你高亮。需要注意的是，目前不支持正则构造器的写法。