关于可视化:使用-regexviscom-可视化正则表达式

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

能够间接去 regex-vis.com 体验它的性能，仓库的 README 也有一个简略演示。

如果喜爱的能够点个 Star。如果发现问题能够提 Issue，我会尽快修复

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

其余小性能:

黑夜 / 白天模式切换
输出测试用例，测试正则表达式
罕用正则表达式样例展现

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 不是指浏览器本人的渲染引擎，而是拿上文失去的 AST，计算出它们在画布上的布局信息，转化为一维平铺的节点数组，蕴含 x 和 y 坐标、宽低等信息，再通过 SVG 绘制进去，就失去了最初的可视化图形

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

次要是为了实现撤销和勾销撤销性能，这要求咱们将以前的 AST 贮存下来，但如果间接对数据进行批改，以前的数据也会受到影响。这里应用了 immer 实现了数据不可变，每一次批改数据都会对批改局部生成新的援用

还有有些状况须要非凡解决。比方用户输出了 /abc/ 正则，而后选中 abc 节点，再抉择了 0 or 1(?) 量词。这时不能间接对 abc 对应的 AST 节点加量词，这样生成的正则 /abc?/ 中的量词只对 c 字符起作用。所以须要为 abc 节点生成个非捕捉组，再加上量词，最初生成的正则表达式就是 /(?:abc)?/

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

这里先应用 esbuild 将正则可视化组件独自打包导出，再应用 React 提供的 renderToString 办法并传入相应属性，失去该组件的渲染后果。因为是应用 SVG 渲染，所以能够间接将后果保留为 SVG 图片

我的项目的最后灵感来自 Regulex 和 Regexper，它们是对正则进行可视化展现。在此基础上，我失去了编辑正则表达式的灵感
应用的 UI 组件库是 @geist-ui/core，一个基于 Vercel 格调的组件库（非 Vercel 官网）
我的博客

关于可视化:使用-regexviscom-可视化正则表达式

性能简介

工作流程

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

Parser

RenderEngine

编辑图形

Generator

数据不可变

其余

图例

相干