使用 regex-vis.com 可视化正则表达式

Jan. 28 2022Parser

Home

regex-vis.com 是一个辅助学习、编写和验证正则的工具。它不仅能对正则进行可视化展示，而且提供可视编辑正则的能力

功能简介

可以直接去 regex-vis.com 体验它的功能，仓库的 README 也有一个简单演示。如果喜欢的可以点个 Star。如果发现问题可以提 Issue，我会尽快修复

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

其他小功能:

黑夜 / 白天模式切换
输入测试用例，测试正则表达式
常用正则表达式样例展示

工作流程

从正则表达式到可视化图形

Parser

Parser 将一个正则表达式转为 AST(abstract syntax tree)。其实由于正则紧凑的语法结构，我写的这个 Parser 生成的 AST 几乎等于 CST(concrete syntax tree)

前端大多对 AST 不陌生，Babel 和 Webpack（使用了 acornjs）肯定都接触过，而 CST（具体语法树）可能会相对陌生。顾名思义，它要比 AST（抽象语法树）更加具体。在解析到 AST 时会抛弃对语义没有影响的节点（比如 JavaScript 中的空格），而这些节点在 CST 中将会保留。使用 CST 重建的语句，将和原始输入保持一致

Parser 由两部分组成，词法分析和语法分析。词法分析将正则字符串转为 Tokens，Tokens 再通过语法分析转为 AST

正则表达式算不上编程语言，它的语法十分有限，我觉得写个正则的 Parser 是个不错的练手。这部分代码可以看这 Parser

RenderEngine

这里的 RenderEngine 不是指浏览器自己的渲染引擎，而是拿上文得到的 AST ，计算出它们在画布上的布局信息，转化为一维平铺的节点数组，包含 x 和 y 坐标、宽高等信息，再通过 SVG 绘制出来，就得到了最后的可视化图形

编辑图形

Generator

Generator 是将 AST 重新转换为正则表达式语句。这部分比较简单，从根节点做一个 DFS（深度优先遍历）就可以了

数据不可变

主要是为了实现撤销和取消撤销功能，这要求我们将以前的 AST 储存下来，但如果直接对数据进行修改，以前的数据也会受到影响。这里使用了 immer 实现了数据不可变

其他

还有有些情况需要特殊处理。比如用户输入了 /abc/ 正则，然后选中 abc 节点，再选择了 0 or 1(?) 量词，这时不能直接对 abc 对应的 AST 节点加量词，这样生成的正则 /abc?/ 中的量词只对 c 字符起作用。所以需要为 abc 节点生成个非捕获组，再加量词，最后生成的正则表达式就是 /(?:abc)?/

图例

网站右上角点击 Samples，可以看到一些常用正则表达式的可视化图。这些图并不是实时生成的，而是在打包时就预先生成了 SVG 图片，从而提升网站性能

这里先使用 esbuild 将正则可视化组件单独打包导出，再使用 React 提供的 renderToString 方法并传入相应属性，得到该组件的渲染结果。由于是使用 SVG 渲染，所以可以直接将结果保存为 SVG 图片