如何通过特定标签正则表达式使用 JavaScript 从 HTML 文档中获取元素？答案

【问题标题】：How to get elements from HTML document using JavaScript by specific tags reg expression?如何通过特定标签正则表达式使用 JavaScript 从 HTML 文档中获取元素？
【发布时间】：2016-12-01 09:27:20
【问题描述】：

我想从document 中获取所有以ge- 开头的元素。示例<ge-survey></ge-survey> <ge-sombody></ge-sombody> <ge-...></ge-...>。

var elements = document.getElementsByTagName("*"); // <<-- now return all

我也试过了：

var elements = document.querySelectorAll("^=ge-");

但得到：

geadele.js:3 Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '^=ge-' is not a valid selector.

我也试过了：

var els = document.getElementsByTagName("^=ge-"); // return epty HTMLcollection

我的html：

...
</head>
<body>
  <ge-survey></ge-survey>
  <ge-element></ge-element>
</body>
...

【问题讨论】：

不，我想通过标签使用 reg 表达式从 HTML 文档中获取元素数组。更多的是关于 JavaScript reg 表达式的问题。
getElementByName & Regex的可能重复
developer.mozilla.org/nl/docs/Web/API/Document/querySelector

标签： javascript

【解决方案1】：

如果您知道所有想要获取的ge-元素，您可以使用document.getElementsByTagName('ge-somebody') 并连接结果。

var ge1Elements = Array.prototype.slice.call(document.getElementsByTagName('ge-1'));
var ge2Elements = Array.prototype.slice.call(document.getElementsByTagName('ge-2'));
...
var geElements = [].concat(ge1Elements, ge2Elements, ge3Elements);

在我看来，在包含大量元素的文档中，这种方法比正则表达式更快，但我没有任何基准测试。

如果你不知道所有可能的ge- 元素，你可以通过过滤所有元素得到它：

var elements = document.getElementsByTagName("*");
var geElements = [];
for(var i = 0; i < elements.length; i++){
    if(elements[i].tagName.indexOf('GE-') === 0){
      geElements.push(elements[i]);
    }
}
console.log(geElements);

【讨论】：

我试过了，但我认为最好使用带有 reg 表达式的准备好的 JavaScript 决策，不需要编写更多代码；
我不知道html中的ge元素。
@EdgarasKarka 如果您不知道所有地理标签的集合，您应该使用第二种方法，通过标签名匹配过滤任何 html 元素集合

【解决方案2】：

您可以使用 document.querySelector 并使用“开头为”类型的 css 选择器： Can I use a regular expression in querySelectorAll?

【讨论】：

我试过 document.querySelectorAll("^=ge-");但得到错误。期待发布