Question

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

spans.length = 43.

这是跨度的样子

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>...

此跨度列表包含数据，每个属性都有id属性。我想正则表达式搜索此id以检索相应的数据点。

我通常会做一些像spans.querySelectorAll("spans[id*='OrderNumber']")[0].

但是由于所有元素都已经是span，所以它似乎不起作用。

如何基于正则表达式搜索跨度？我考虑将spans节点列表转换为数组，但Google表示你不能在indexOf中使用正则表达式，因此使用querySelectorAll()和节点列表以及正则表达式*=似乎是可行的方法。

举个例子，我如何检索跨度中的第二个项目OrderNumber span元素？

Answer 1

嗯，NodeList对象中没有querySelectorAll方法。因此，您无法在querySelectorAll NodeList上使用spans。

但你可以使用像这样的手写列表过滤器：

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

或者在ES6中：

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

另一种方法是存储对#divConfirm元素的引用，然后在其上使用querySelectorAll：

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

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

1 个答案: