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

Question

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

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

将 document.querySelectorAll 与 foo-bar-* 模式一起使用会产生错误:

Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '[data-foo-bar-*]' is not a valid selector.

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/