查找具有与模式匹配的属性的元素

Question

如何查找所有具有匹配模式 data-foo-bar-* 的属性的元素，例如：

<div data-foo-bar-id="" />

使用 document.querySelectorAll 和 foo-bar-* 模式会导致错误：

Uncaught SyntaxError: 在 'Document' 上执行 'querySelectorAll' 失败：'[data-foo-bar-*]' 不是一个有效的选择器。

- Gajus

---

可能是根据部分属性查找HTML的重复问题。 - Ivanka Todorova

@IvankaTodorova 这个问题完全是关于 [tag:jquery] 的。 - Gajus

这个问题已经在这里得到了回答：https://dev59.com/GmQn5IYBdhLWcg3we3PD#16791596 - Cihan Bebek

@Keksike 寻找部分属性值（您的链接）与寻找部分属性名称（这个问题的问题）不同。 - Andreas

@Yoshi 我只有一半的信心，认为使用DOM API无法匹配具有模式匹配属性的元素。解决此问题的方法是遍历所有（或子集）DOM节点并匹配每个属性。 - Gajus

Answer 1

也许遍历所有 DOM 元素并查找特定属性可能不是最好的方法，但这是我的尝试：

function querySelectorPattern(regex, element) {
  var elements = document.getElementsByTagName(element),
    found,
    regexp = new RegExp(regex);
  for (var i = 0; i < elements.length; i++) {
    var attributes = elements[i].attributes;
    for (var k = 0; k < attributes.length; k++) {
      if(regexp.test(attributes[k].nodeName)) {
        console.log(elements[i]);
      }
    }
  }
}

以下是一个快速演示: https://jsfiddle.net/1rsngvy8/

- Ivanka Todorova

---

考虑到DOM API的限制，这似乎是一个合适的解决方案。 - Gajus