Regulex:JavaScript Regular Expression Visualizer

Regulex是一个将JS正则表达式图形化的小工具。这个项目其实是一个偶然产物,一开始我只是随手写了一个NFA/DFA,然后我发现只需要给DFA的转换边加上Action,让Action函数自己管理Stack,就可以实现一个简单的Parser。于是我就试着用这种方法写了一个简单的正则表达式解析器,得到的代码还算简单。但过一段时间后再回头看那段代码,觉得其实也无多大用处,自己又不忍心删掉,于是就琢磨这Parser能用在什么地方呢?最后就给它加了个GUI,成了Regulex

正则表达式可视化

搜索一下发现这类工具其实已经有了不少,比如RegexperDebuggex。其中Debuggex作为一个商业产品,功能确实强大,支持PCRE等多种正则表达式语法,而Regulex只支持JavaScript正则式语法。不过之所以我仍然要做这个工具,无非是因为它们还有一些缺陷:

此外,Regulex还有些小优点,比如可通过IFrame将图嵌入到自己的网站上、还有鼠标拖动浏览等等。事实上最后我还顺便实现了一个简单的正则表达式引擎,本打算尝试针对特定形式作特别优化有没有可能在性能上超出内置的正则引擎,不过最后也没有想出什么好的办法实现后向引用和NonGreedy匹配,只实现了一些常见的DFA算法,最后仍然使用NFA。鼓捣一圈后,最终代码已经膨胀了不少,但在架构上仍然与最初的简单直观版本一致。事实上,如果仅仅是为了实现正则表达式解析,根本不需要这么多代码。NFA部分的多数代码是为实现正则引擎准备的,而Parser部分不少代码都是为了给语法树节点添加上充足的辅助信息以实现精确报错以及原本计划实现的Tracer。该项目发布后就收到不少来信,请求给它添加一个执行匹配文本的功能。事实上我一开始有一个更远的计划:Tracer,它可以直接显示出正则式进行文本匹配时所经过的路径,这样你就可以直观看到正则式各部分所匹配到的内容,还有哪些分支失败了,哪些分支成功了,这对Debug会有很大的帮助。虽然Regulex已经包含了一个自己实现的正则引擎,实现Tracer无需多少工作,但目前我并不打算继续推进,因为计划中该项目的未来版本不会选择使用JavaScript语言来编写。

最后,立即在线体验:https://jex.im/regulex/

Github:https://github.com/JexCheng/regulex