在工作中有没有觉得写正则表达式很难，我就一直很头疼。今天我们就介绍一个开源项目，它可以用可视化的方式查看、编辑和测试正则表达式，大大的提升效率，它就是：regex-vis

regex-vis是什么

regex-vis是一个辅助学习、编写和验证正则的工具，你输入一个正则表达式后，会生成它的可视化图形。然后可以点选或框选图形中的单个或多个节点，再在右侧操作面板对其进行操作，具体操作取决于节点的类型，比如在其右侧插入空节点、为节点编组、为节点增加量词等。

安装regex-vis

首先regex-vis提供了一个在线环境，可以直接到regex-vis.com/ 去试用，这是最简单的方式。

当然，作为一个开源项目，另外一种方式就是自己运行啦。按以下步骤：

• 
  
• 首先下载代码到本地。
  
• 安装依赖：pnpm install
  
• 安装完成后运行服务：pnpm start
  

启动完成后到3000端口访问即可。

这里可能会遇到一些小问题，比如SSL的问题，稍微修改一些运行命令的配置即可解决。

使用 regex-vis

首先我准备一个例子的正则表达式，验证身-份-证的正则：

^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$

可视化

直接把正则表达式贴进去就能看到可视化的效果了。

编辑

在右侧是正则表达式的编辑区，可以在这里修改、编辑正则的内容。

首先是一些图例，点击图形中想要编辑的部分，然后点击中间的编辑就可以进入到编辑页面了。

测试

修改完了正则的内容，想要验证一下写的对不对，那就到测试里去试一试吧。通过的会显示绿色，失败的则显示为红色。

示例

项目还自带了几个示例，如果你 刚一进来，不知道用什么来试用，可以直接打开示例来看看。

设置

本身是个小工具，这里有2个可用的设置，一个是切换语言，可以切成中文显示，另一个就是明/暗显示模式的转换。

总结

作为一个小工具还是挺不错的，对于像我这样不熟练正则的人有所帮助，一步步的编辑可以渐进式的编辑。

当然现在写正则最好的方式是让AI帮忙写，所以我建议可以AI帮忙写，然后通过这个工具来检查一下，通过可是的方式检查和AI的沟通有没有错误。

另外测试正则的功能里，不能显示出事那部分 正则出错略有可惜，如果能增强就更好用了。

项目信息

• 
  
• 项目名称：regex-vis
  
• GitHub 链接：github.com/Bowen7/rege…
  
• Star 数：3K+