Regulex： JavaScript 正则表达式可视化.

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3657 天前的主题，其中的信息可能已经有所发展或是发生改变。

http://jex.im/regulex/

特性：
- 精确的错误定位：Regulex可以指出正则表达式语法错误的具体位置。这个功能很重要，大部分 JS解释抛出的SyntaxError都缺乏具体的错误位置信息。
- 尽量严格遵循《ECMAScript 语言规范》，禁止OctalEscape，可以找出不合法的后向引用，NUL转义后面跟数字时报错。
- 纯JavaScript实现
- 可以通过IFrame内嵌到自己的网站上

第 1 条附言 · 2014-11-26 19:34:38 +08:00

@jakwings regexper.com 不能精确显示错误位置，不能识别错误的backref，它容忍OctalEscape但却不能正确解释，NUL转义后面跟数字它不报错，它不会标出NonGreedy匹配，它是用Ruby写的需要后端服务器。

还有我的小改进：SVG图片可以拖动，可以通过IFRAME 嵌入到自己网站上

第 2 条附言 · 2014-11-26 20:05:54 +08:00

还有 regexper 对于 /a{3,5}{4}/ 不能识别出错误。
Debuggex不能识别出 /(\1)/ 和 /(\1)\1/ 的错误

第 3 条附言 · 2014-11-26 20:09:42 +08:00

还有Debuggex的图片排版有些问题，这是这样。我没打算跟它竞争，只为解析正确就行了，其它功能不打算添加。

第 4 条附言 · 2014-11-30 18:47:52 +08:00

JavaScript 正则表达式参考教程：http://javascript-regex.coding.io/

表达式

regulex

转义

40 条回复 • 2015-04-15 15:22:44 +08:00

kingwrcy

2014-11-26 15:00:44 +08:00

狠nice,收藏了

oott123

2014-11-26 15:43:15 +08:00

火狐用户哭晕在厕所

Jex

2014-11-26 17:46:30 +08:00

@oott123 怎么了？在Firefox下OK啊，除了它不支持contentEditable=plain-text，我将input自动跟着伸缩的

anson0370

2014-11-26 18:03:37 +08:00

Atom 前不久的更新里貌似就有正则可视化

Jex

2014-11-26 18:12:34 +08:00

@anson0370 没找到

learnshare

2014-11-26 18:15:37 +08:00

赞！

kokdemo

2014-11-26 18:26:13 +08:00

好给力！之前学正则要命啊……

fantasticfears

2014-11-26 18:26:31 +08:00

@Jex @anson0370 regex-railroad-diagram package https://atom.io/packages/regex-railroad-diagram

leiliang

2014-11-26 18:30:18 +08:00

既然博主对正则理解这么深，出点教程可好

jakwings

2014-11-26 18:46:33 +08:00

和这个的差别有多大？
http://www.regexper.com

bcxx

2014-11-26 18:52:12 +08:00

要是早发现这个玩意我一个月以前写 NFA 就不用写到手抽筋了 QAQ

dsdshcym

2014-11-26 18:59:47 +08:00

刚好今天刚学正则，收藏了

Jex

2014-11-26 19:37:54 +08:00

@fantasticfears 这样挺好，虽然我32位安装不了。
其实这种工具内置到IDE中最好了。但我肯定的是，这些工具都没严格遵守ECMAScript标准中说的语法，大部分正则引擎都会将不存在的backref视为OctalEscape,这点连debuggex都没分析对

Jex

2014-11-26 19:57:27 +08:00

@leiliang 正则表达式好的教程已经太多了

wolfan

2014-11-26 20:40:48 +08:00

奇怪，在http://www.regexper.com/ 可以的公式在这里居然是错误的，这是为什么呢？

Jex

2014-11-26 22:02:50 +08:00

@wolfan 麻烦提供下出错的正则式，我看一下

wolfan

2014-11-27 00:06:04 +08:00

@Jex /a{3,5}{4}/

oott123

2014-11-27 00:53:34 +08:00 via Android

@Jex 难道我浏览器问题？
我这里点什么都没用，换 chrome 才看到效果。

Jex

2014-11-27 09:40:13 +08:00

@wolfan /a{3,5}{4}/ 这个正则式是错的啊，你按F12放到console里执行下JS解释器都会报错。我的也会指出错误： http://jex.im/regulex/#!embed=false&re=a%7B3%2C5%7D%7B5%7D

Jex

2014-11-27 09:41:18 +08:00

@oott123 有可能是加载失败，资源是放在Git Pages上的，国内加载速度不行，但raphael、require.js用了360的CDN

justjavac

2014-11-27 10:01:22 +08:00

@Jex https://github.com/justjavac/ReplaceGoogleCDN

Jex

2014-11-27 10:42:15 +08:00

@justjavac raphael、require.js已经用了国内的CDN，但主程序还是要从Git Pages上加载，所以会慢

jakwings

2014-11-27 11:05:35 +08:00

/(\1)\1/ 这个不算错吧，浏览器都能正常 test，虽然可能是未定义行为。我觉得 regexper 的报错也挺精确的，只是没画图。

另外发现你的也不能正确识别这个：{3?}

jakwings

2014-11-27 11:08:07 +08:00

@jakwings 啊，记错了，不是 {3?}。

jakwings

2014-11-27 11:14:19 +08:00

看来是比 regexper 好很多，除了图片的美观程度。还有实在无法理解为什么非要用 content-editable，每次 enter 之后都要把光标弄到开头。

Jex

2014-11-27 11:26:04 +08:00

@jakwings 大部分正则引擎都容忍这类错误，对于 /(\1)\1/ 它确实是一个错误，但错也有错法，比如将/(\1)/解释成/(\u0001)是一种方法，但将 /(\1)/ 解释成Backref #1 就肯定解释错了。所以严格解析就应该报错。

光标跳到开头的问题我修一下。

fising

2014-11-27 11:38:55 +08:00

貌似有bug

jakwings

2014-11-27 11:42:23 +08:00

@Jex 我不觉得解释成后向引用有多大问题，反正默认是空白字符串。

我认为还应该把输入框的可点击范围弄大点。

fising

2014-11-27 11:45:25 +08:00

拷贝了一份放我网站了 :) 谢谢楼主。不喜欢 iframe

zyxfsky

2014-11-27 12:21:54 +08:00

不错的东西，收藏下

Jex

2014-11-27 12:51:29 +08:00

@jakwings 不过它本身是一个误写，作为工具指出这种错误更好

后面我把它还换成input

sneezry

2014-11-27 13:20:52 +08:00

/\\{3}/ 好像有个小bug。这个网站真棒！

dallaslu

2014-11-27 13:54:04 +08:00

提示错误：
^(?<method>\w+)(?:$(?<param>".*")$)?$

Jex

2014-11-27 14:30:50 +08:00

@dallaslu 我就知道会有不少人还是会拿PCRE来测试 -_-！

Jex

2014-11-27 15:54:01 +08:00

@sneezry 已修复

Jex

2014-11-27 20:06:18 +08:00

@leiliang 把以前的一个教程发出来：《JavaScript 正则表达式》

http://javascript-regex.coding.io/

leiliang

2014-11-27 21:03:33 +08:00

@Jex 其实呢，网上教程多，但讲的清楚和简单易懂的少，最重要的是正确性，就怕教程包含错的东西

luoweihua7sync

2014-11-30 16:46:12 +08:00

@Jex 3Q，js的正则是我最大的弱项，一直表示理解不能，看完还是有那么点收获的。。。

yanwen

2015-04-14 11:20:53 +08:00

楼主。。。站点挂了。。。

Jex

2015-04-15 15:22:44 +08:00

@yanwen 那是因为需要翻墙上Github