代码之家  ›  专栏  ›  技术社区  ›  adviner

Javascript正则表达式差异[重复]

  •  0
  • adviner  · 技术社区  · 8 年前

    我有以下html代码:

    <input id="buttonClickOne" type="button" value="Click 1" @click="buttonOneClicked">
    

    在我的脚本中,我有一个正则表达式来提取@click名称及其值:

    let arrEvents = source.match(/ @click="([^"]*)"/g);
    

    我得到了我期望的输出:

    [" @click="buttonOneClicked""]
    

    因此,我修改了reg exp,以便可以搜索不同的事件:

    const arrEventTypes = ['@click'];
    for(let event_type of arrEventTypes){
        let reg = new RegExp(' ' + event_type + '="([^"]*)"', 'g');
        let arrEvents = reg.exec(source);
        ...
    }
    

    但我的输出不同:

    [" @click="buttonOneClicked"", "buttonOneClicked"]
    

    如果查看我创建的RegExp,它看起来是正确的:

    " @click="([^"]*)""
    

    我错过什么了吗?

    解决方案

    感谢您的链接。现在更有意义了。我在编写代码时启动了表达式版本,但Touffy在使用DOMParser方面做得很好,它实际上更好地满足了我的需要。

    1 回复  |  直到 8 年前
        1
  •  0
  •   Touffy    8 年前

    我在重复我自己关于这个问题的看法,但让我们再试一次。

    首先,浏览器非常擅长解析HTML。解析HTML是其主要功能。因此,让浏览器完成它的工作:

    source = `<input id="buttonClickOne" type="button" value="Click 1" @click="buttonOneClicked">`
    dom = new DOMParser().parseFromString(source, 'text/html')
    

    现在,您有了一个完全解析的对象,它支持(我希望)您习惯的所有优秀DOM功能,例如:

    dom.body.firstElementChild.getAttribute('@click')
    // returns "buttonOneClicked"
    

    我知道,在您的示例中,这可能看起来有点过头了,但它并没有那么贵,我假设您的示例已经简化了。