正则也能可视化？放弃学习，一个工具让你看懂复杂语句在干什么

前篇文章讲述了《一个开源项目，教你快速掌握正则表达式》（请到主页查看），很多人反馈自己平时正则的使用率不高；也有反馈正则门槛太高，实在是看不懂。

即使日常中自己不太使用正则，但我们在阅读别人的代码时，面对对方留下的复杂正则表达式，看不懂的话只会更头疼。

难道我们真的必须要完全学透正则，才能看懂别人的正则语句吗？

答案是：不一定！

---

今天强烈推荐的开源工具：Regexer，就是一款能把复杂的正则表达式转化为可视化的利器。

image-20200308145108460.png

Regexer的开源项目在GitLab上javallone/regexper-static，本地部署执行：

git clone https://gitlab.com/javallone/regexper-static.git
cd regexper-static
yarn install
yarn start

如果自己不想折腾的话，也可以直接访问官方已经部署好的站点regexper.com

接下来从网上随便找一个经典的身份证号匹配的表达式：

(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)

粘贴进去，点击Display

image-20200308151444675.png

见证奇迹，整个表达式的运行方式一目了然。看不懂图例没关系，查看Regexper的文档就明白了。

image-20200308151730157.png

还贴心的提供了流程图的SVG和PNG导出功能。

image-20200308151821991.png

点击图片导出旁边的Permalink，可以直接把当前页面，包括流程图和语句，分享给同事。

是不是爽？

有了它，面对别人留下的表达式再也不用慌！终于可以轻松搞清楚这些复杂语句背后的逻辑了。