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

Parser
首页

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 图片

相关

  • 项目的最初灵感来自 RegulexRegexper,它们是对正则进行可视化展示。在此基础上,我得到了编辑正则表达式的灵感
  • 使用的 UI 组件库是 @geist-ui/core,一个基于 Vercel 风格的组件库(非 Vercel 官方)