V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Jex
V2EX  ›  分享创造

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

  •  5
     
  •   Jex ·
    CJex · 2014-11-26 14:37:15 +08:00 · 6693 次点击
    这是一个创建于 3637 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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/
    40 条回复    2015-04-15 15:22:44 +08:00
    kingwrcy
        1
    kingwrcy  
       2014-11-26 15:00:44 +08:00
    狠nice,收藏了
    oott123
        2
    oott123  
       2014-11-26 15:43:15 +08:00
    火狐用户哭晕在厕所
    Jex
        3
    Jex  
    OP
       2014-11-26 17:46:30 +08:00
    @oott123 怎么了?在Firefox下OK啊,除了它不支持contentEditable=plain-text,我将input自动跟着伸缩的
    anson0370
        4
    anson0370  
       2014-11-26 18:03:37 +08:00
    Atom 前不久的更新里貌似就有正则可视化
    Jex
        5
    Jex  
    OP
       2014-11-26 18:12:34 +08:00
    @anson0370 没找到
    learnshare
        6
    learnshare  
       2014-11-26 18:15:37 +08:00
    赞!
    kokdemo
        7
    kokdemo  
       2014-11-26 18:26:13 +08:00
    好给力!之前学正则要命啊……
    fantasticfears
        8
    fantasticfears  
       2014-11-26 18:26:31 +08:00
    leiliang
        9
    leiliang  
       2014-11-26 18:30:18 +08:00
    既然博主对正则理解这么深,出点教程可好
    jakwings
        10
    jakwings  
       2014-11-26 18:46:33 +08:00
    和这个的差别有多大?
    http://www.regexper.com
    bcxx
        11
    bcxx  
       2014-11-26 18:52:12 +08:00
    要是早发现这个玩意我一个月以前写 NFA 就不用写到手抽筋了 QAQ
    dsdshcym
        12
    dsdshcym  
       2014-11-26 18:59:47 +08:00
    刚好今天刚学正则,收藏了
    Jex
        13
    Jex  
    OP
       2014-11-26 19:37:54 +08:00   ❤️ 1
    @fantasticfears 这样挺好,虽然我32位安装不了。
    其实这种工具内置到IDE中最好了。但我肯定的是,这些工具都没严格遵守ECMAScript标准中说的语法,大部分正则引擎都会将不存在的backref视为OctalEscape,这点连debuggex都没分析对
    Jex
        14
    Jex  
    OP
       2014-11-26 19:57:27 +08:00
    @leiliang 正则表达式好的教程已经太多了
    wolfan
        15
    wolfan  
       2014-11-26 20:40:48 +08:00
    奇怪,在http://www.regexper.com/ 可以的公式在这里居然是错误的,这是为什么呢?
    Jex
        16
    Jex  
    OP
       2014-11-26 22:02:50 +08:00
    @wolfan 麻烦提供下出错的正则式,我看一下
    wolfan
        17
    wolfan  
       2014-11-27 00:06:04 +08:00
    @Jex /a{3,5}{4}/
    oott123
        18
    oott123  
       2014-11-27 00:53:34 +08:00 via Android
    @Jex 难道我浏览器问题?
    我这里点什么都没用,换 chrome 才看到效果。
    Jex
        19
    Jex  
    OP
       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
        20
    Jex  
    OP
       2014-11-27 09:41:18 +08:00
    @oott123 有可能是加载失败,资源是放在Git Pages上的,国内加载速度不行,但raphael、require.js用了360的CDN
    justjavac
        21
    justjavac  
       2014-11-27 10:01:22 +08:00
    Jex
        22
    Jex  
    OP
       2014-11-27 10:42:15 +08:00
    @justjavac raphael、require.js已经用了国内的CDN,但主程序还是要从Git Pages上加载,所以会慢
    jakwings
        23
    jakwings  
       2014-11-27 11:05:35 +08:00
    /(\1)\1/ 这个不算错吧,浏览器都能正常 test,虽然可能是未定义行为。我觉得 regexper 的报错也挺精确的,只是没画图。

    另外发现你的也不能正确识别这个:{3?}
    jakwings
        24
    jakwings  
       2014-11-27 11:08:07 +08:00
    @jakwings 啊,记错了,不是 {3?}。
    jakwings
        25
    jakwings  
       2014-11-27 11:14:19 +08:00
    看来是比 regexper 好很多,除了图片的美观程度。还有实在无法理解为什么非要用 content-editable,每次 enter 之后都要把光标弄到开头。
    Jex
        26
    Jex  
    OP
       2014-11-27 11:26:04 +08:00
    @jakwings 大部分正则引擎都容忍这类错误,对于 /(\1)\1/ 它确实是一个错误,但错也有错法,比如将/(\1)/解释成/(\u0001)是一种方法,但将 /(\1)/ 解释成Backref #1 就肯定解释错了。所以严格解析就应该报错。

    光标跳到开头的问题我修一下。
    fising
        27
    fising  
       2014-11-27 11:38:55 +08:00
    貌似有bug
    jakwings
        28
    jakwings  
       2014-11-27 11:42:23 +08:00   ❤️ 1
    @Jex 我不觉得解释成后向引用有多大问题,反正默认是空白字符串。

    我认为还应该把输入框的可点击范围弄大点。
    fising
        29
    fising  
       2014-11-27 11:45:25 +08:00
    拷贝了一份放我网站了 :) 谢谢楼主。不喜欢 iframe
    zyxfsky
        30
    zyxfsky  
       2014-11-27 12:21:54 +08:00
    不错的东西,收藏下
    Jex
        31
    Jex  
    OP
       2014-11-27 12:51:29 +08:00
    @jakwings 不过它本身是一个误写,作为工具指出这种错误更好

    后面我把它还换成input
    sneezry
        32
    sneezry  
       2014-11-27 13:20:52 +08:00
    /\\{3}/ 好像有个小bug。这个网站真棒!
    dallaslu
        33
    dallaslu  
       2014-11-27 13:54:04 +08:00
    提示错误:
    ^(?<method>\w+)(?:\((?<param>".*")\))?$
    Jex
        34
    Jex  
    OP
       2014-11-27 14:30:50 +08:00
    @dallaslu 我就知道会有不少人还是会拿PCRE来测试 -_-!
    Jex
        35
    Jex  
    OP
       2014-11-27 15:54:01 +08:00
    @sneezry 已修复
    Jex
        36
    Jex  
    OP
       2014-11-27 20:06:18 +08:00   ❤️ 1
    @leiliang 把以前的一个教程发出来:《JavaScript 正则表达式》

    http://javascript-regex.coding.io/
    leiliang
        37
    leiliang  
       2014-11-27 21:03:33 +08:00
    @Jex 其实呢,网上教程多,但讲的清楚和简单易懂的少,最重要的是正确性,就怕教程包含错的东西
    luoweihua7sync
        38
    luoweihua7sync  
       2014-11-30 16:46:12 +08:00
    @Jex 3Q,js的正则是我最大的弱项,一直表示理解不能,看完还是有那么点收获的。。。
    yanwen
        39
    yanwen  
       2015-04-14 11:20:53 +08:00
    楼主。。。站点挂了。。。
    Jex
        40
    Jex  
    OP
       2015-04-15 15:22:44 +08:00
    @yanwen 那是因为需要翻墙上Github
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   972 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 80ms · UTC 19:21 · PVG 03:21 · LAX 11:21 · JFK 14:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.