大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 Regex-Vis Regex visualizer & editor

regex-vis.com 是一个学习、编写和测试正则表达式的网站，其不仅可以将正则表达式转换为图表，还允许编辑图表。开发者还可以通过单击并拖动图表中的一个或多个节点来选择，从而允许插入空节点、分组节点、添加量词等等。

Regex-Vis 是正则表达式可视化工具和编辑器，具有以下突出特征：

可视化正则表达式正则表达式的可视化编辑正则表达式的测试支持暗模式 / 亮模式

同时值得一提的是，Regex-Vis 受到 Regulex 和 Regexper 的启发，同时 regex-vis.com 也借助了非常优秀的 React UI 库，即 @geist-ui/core。

目前 Regex-Vis 在 Github 通过 MIT 协议开源，有超过 3.5k 的 star、1k 的 fork、是一个值得关注的前端开源项目。

如何使用 Regex-Vis

Regex-Vis 解析器将正则表达式转换为 AST（抽象语法树），解析器由两部分组成：

词法分析器：将正则表达式转换为 token语法分析器：将 Token 转换为 AST

Token 的形式如下：

[RegexBodyStart, GroupStart, Characters, GroupEnd, Quantifier, RegexBodyEnd, Flag]

而语法分析器将 / a*/ 正则表达式转换为以下 AST：

// 这里是正则表达式的 AST，由语法分析器处理{ id: "", type: "regex", body: [ { id: "", type: "character", kind: "string", value: "a", quantifier: {kind: "*", min: 0, max: Infinity, greedy: true}, }, ], flags: [], literal: true, escapeBackslash: false,}

关于 Regex-Vis 解析器的源码可以参考文末资料，本文不再过多展开。

参考资料

https://bowencodes.com/post/regex-vis_en

https://github.com/Bowen7/regex-vis/tree/prod/src/parser

https://github.com/javallone/regexper

https://github.com/CJex/regulex

https://blog.robertelder.org/regular-expression-visualizer/