Question

我有以下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提出了一个很好的观点，它实际上更适合我的需求。

Answer 1

我正在重复这个问题，但让我们再来一次。

首先，浏览器非常擅长解析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"

我知道，在你的例子中，它可能看起来有点矫枉过正，但它并不昂贵，我认为你的例子无论如何都是简化的。

Javascript正则表达式差异

1 个答案: