regulex
by Jex
Javascript 3457cb26d47bec168436c78274e06d2f3044487889e518e1983ddb98f0b2d99f

Regulex是一个将JS正则表达式图形化的小工具。

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

正则表达式可视化

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

  • 精确的错误定位:Regulex可以指出正则表达式语法错误的具体位置。这个功能很重要,大部分JS解释器抛出的SyntaxError都缺乏具体的错误位置信息。
  • 尽量严格遵循《ECMAScript 语言规范》:令人惊讶的是,这一点大部分JS解释器都没有做到。
  • Regulex使用纯JavaScript实现,可直接运行在浏览器中,而Regexper需要Ruby后端服务器。

此外,Regulex还有些小优点,比如可通过IFrame将图嵌入到自己的网站上、还有鼠标拖动浏览等等。

最后我还顺便实现了一个简单的正则表达式引擎,本打算尝试针对特定形式作特别优化有没有可能在性能上超出内置的正则引擎,不过最后也没有想出什么好的办法实现后向引用和NonGreedy匹配,只实现了一些常见的DFA算法,最后仍然使用NFA。鼓捣一圈后,最终代码已经膨胀了不少,但在架构上仍然与最初的简单直观版本一致。

如果仅仅是为了实现正则表达式解析,根本不需要这么多代码。NFA部分的多数代码是为实现正则引擎准备的,而Parser部分不少代码都是为了给语法树节点添加上充足的辅助信息以实现精确报错以及原本计划实现的Tracer。

该项目发布后就收到不少来信,请求给它添加一个执行匹配文本的功能。

事实上,我一开始有一个更远的计划:Tracer,它可以直接显示出正则式进行文本匹配时所经过的路径,这样你就可以直观看到正则式各部分所匹配到的内容,还有哪些分支失败了,哪些分支成功了,这对Debug会有很大的帮助。虽然Regulex已经包含了一个自己实现的正则引擎,实现Tracer无需多少工作,但目前我并不打算继续推进,因为计划中该项目的未来版本不会选择使用JavaScript语言来编写。

作品简介

Regulex是一个将JS正则表达式图形化的小工具: https://jex.im/regulex/

分享:
0
 97
活动介绍
「寻找实干和坚持的技术力量」是100offer互联网人才拍卖平台独立策划举办的Side Project赞助活动,只是为了向那些视程序为生命、不断在前进的人致敬。
Ad 9482dbb9a1a2921bad6fd499d6d31682c63adfa80c64e8207eea49c78530cdac
Close 44c5a73a048146b9665e653b76f391a9ea025b4eea85f5fff01b8b686e69d372
Smile 144711c94a3fb669870f9d809cc27e690ec118adb5ac8c333830d888b8b81202
谢谢你的支持。100offer Side Project赞助活动投票已结束,但正能量不会结束。