Javascript 使用正则表达式搜索元素的节点列表

这是跨度的样子

var spans = document.querySelectorAll('#divConfirm span');

spans.length = 43.

跨度：[​预订确认​​, ​预订号码：604905​​, ​游览日期：2016年8月1日​​...

这个跨度列表包含数据，每个跨度都有一个

id

属性。我想用正则表达式搜索这个

id

来检索相应的数据点

我通常会做一些类似于span.querySelectorAll（“span[id*='OrderNumber']”[0]。

但是由于所有的元素都已经是

span

了，所以它似乎不起作用

如何基于regex搜索span？我考虑过将span节点列表转换为数组，但Google表示不能将regex与

indexOf

一起使用，因此将

queryselectoral（）

与节点列表和regex

*=

一起使用似乎是一种可行的方法

---

例如，如何检索span中的第二项，

OrderNumber

span元素？

在节点列表对象中没有

querySelectorAll

方法。因此，您不能在

span

节点列表上使用

querySelectorAll

但您可以使用手写的列表过滤器，如下所示：

spans: [<span id=​"ctl00_cphBody_lblTitleOrder" style=​"color:​#003300;​font-family:​Verdana;​font-size:​18px;​">​Reservation Confirmation​</span>​, <span id=​"ctl00_cphBody_lblOrderNumber" style=​"color:​#003300;​font-family:​verdana;​font-size:​20px;​">​Reservation Number: 604905​</span>​, <span id=​"ctl00_cphBody_lblDate" style=​"color:​#003300;​font-family:​Verdana;​font-size:​18px;​">​Excursion Date: 8/1/2016​</span>​...

或在ES6中：

var filtered = Array.prototype.filter.call(spans, function (item) {
    return /OrderNumber/.exec(item.id);
});

另一种方法是存储对

#divConfirm

元素的引用，然后在其上使用

querySelectorAll

：

let filtered = Array.prototype.filter.call(spans, (item) => /OrderNumber/.exec(item.id));

---

只需省略

span

：

span.queryselectoral（[id*='OrderNumber']）[0]

。或者，更好的是，为什么不使用

document.getElementById（OrderNumber）

？谢谢，但未捕获类型错误：span.queryselectoral不是函数（…）Regex是用于此作业的错误工具，请修复您的查询选择器：

document.querySelector（“#divConfirm span[id*=”OrderNumber“]）

。当然，这是一个愚蠢的选择器，当您只需更新元素以使用类，然后就可以使用

文档进行选择。querySelector（'.confirm.OrderNumber'）

@zzzzBov可以工作。但从技术上讲，它会“更好”吗要缩小所需html的范围，只需一次，然后通过这个较小的部分进行搜索？@DougFir no.原生DOM查询比解释的JS更快，后者随后会运行自己的劣质搜索。甚至考虑这样一个选择器的性能都是过早的优化。

var filtered = divConfirm.querySelectorAll('span[id*="OrderNumber"]');