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

【问题标题】：Find an element that has an attribute matching a pattern查找具有与模式匹配的属性的元素
【发布时间】：2016-07-02 09:45:30
【问题描述】：

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

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

将document.querySelectorAll 与foo-bar-* 模式一起使用会出错：

未捕获的语法错误：无法在“文档”上执行“querySelectorAll”：“[data-foo-bar-*]”不是有效的选择器。

【问题讨论】：

Find HTML based on partial attribute的可能重复
@IvankaTodorova 这个问题完全是jquery 的焦点。
这里已经回答了：stackoverflow.com/a/16791596/4523369
@Keksike 寻找部分属性值（你的链接）和寻找部分属性名不一样（本题的问题）
没有您可能已经知道的 attribute-name-starts-with-selector-syntax。因此，您需要代码来手动找到这些元素。所以问题是，你尝试过什么，你在哪里卡住了？

标签： javascript dom

【解决方案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/

【讨论】：

鉴于 DOM API 限制，这似乎是一个合适的解决方案。