正则表达式匹配唯一结果

Question

我有一个问题，我正在搜索HTML字符串中的属性。下面是一个正则表达式，它可以工作得很好，但我想只获取唯一的结果。当然，我可以对结果数组应用一些过滤器，但我认为这可以通过纯正则表达式实现。在这种情况下，“class”被返回了两次，但我只想要一次。期望输出：['class'，'data-text']，而不是['class'，'data-text'，'class']。请参考链接：https://regex101.com/r/UqCuJS/1

const html = `<div class="foo">
 <span data-text="Some string" class="bar"></span>
</div>`

console.log(html.match(/[\w-:]+(?=\s*=\s*".*?")/g))

http://jsbin.com/bekibanisa/edit?js,console

- Anderson

---

你能在问题中包含完整的 javascript 代码吗？你是使用 .split() 还是 .match() 来获取匹配项数组？ - guest271314

请查看此链接：http://jsbin.com/bekibanisa/edit?js,console，其中包含.match相关内容。 - Anderson

请查看 http://jsbin.com/yofozabilu/1/edit?js,console - Wiktor Stribiżew

@WiktorStribiżew，您的答案似乎是正确的，您能否发布一篇解释正在发生什么的说明呢？ - Anderson

请记住，多重分组（@WiktorStribiżew的示例）会带来很大的性能损失。因此，我建议您改用过滤器。 - Maxim Shoustin

是的，使用匹配任何字符、任意次数的构造的贪婪模式会导致很多回溯。请使用/[\w-:]+(?=\s*=\s*"[^"]*")/g并使用.filter()。 - Wiktor Stribiżew

Answer 1

你可以将.match()的结果传递给Set，它不允许重复的值。如果需要，可以将Set实例转换回Array。

const html = `<div class="foo">
 <span data-text="Some string" class="bar"></span>
</div>`
// or use existing `RegExp`
console.log([...new Set(html.match(/([\w-]+)(?=[=]")/g))])

- guest271314

---

这太棒了。 - Anderson

Answer 2

尝试移除 '/g' 全局修饰符

console.log(html.match(/[\w-:]+(?=\s*=\s*".*?")/))

- Jed

---

不匹配 data-text，只匹配第一个属性，这样是不正确的！ - Anderson

它只会返回第一个匹配项，而不是完整的匹配项。 - Syed Kashan Ali