JavaScript：如何通过数组索引获取XPath搜索的第n个结果？

问题描述 #

我尝试使用XPath定位以下HTML中包含“Messi”的节点。为减少代码量，我希望使用数组索引而非循环遍历迭代器的解决方案。

我假设最标准、最简单的API是XPathExpression.evaluate()。如果有更好的API，欢迎分享。

另外，我需要修改返回结果中的DOM Node。因此，XPathResult.resultType会被设置为ORDERED_NODE_ITERATOR_TYPE，所以无法使用XPathResult.snapshotItem()。

HTML示例 #

<html>
<body>

<div>
    <div>NumberOne</div>
    <div>NumberTwo_Mbappe</div>
    <div>NumberOne</div>
    <div>NumberTwo_Ronaldo</div>
    <div>NumberTwo_Messi</div>
</div>

</body>
</html>

获取XPath结果的代码 #

运行以下代码将从上述HTML中返回一个迭代器。

let xpathIterator = new XPathEvaluator()
                        .createExpression("//*[starts-with(text(), 'NumberTwo')]")
                        .evaluate(
                            document, 
                            XPathResult.ORDERED_NODE_ITERATOR_TYPE
                        );

提取第n项的现有迭代器解决方案 #

现有的XPathResult接口仅有iterateNext()方法，因此提取第n项需要6行代码：

let n = 3;
while (n > 0) { 
    xpathIterator.iterateNext(); 
    n--; 
}
xpathIterator.iterateNext();

提取第n项的理想数组解决方案 #

由于XPath和Chrome每天被数百万人使用，理想情况下应该有一种方法可以直接使用数组索引获取第n项（如下列代码所示）。如果不存在这样的API，我会感到惊讶。

let v = xpathResult[2];

理想的解决方案不一定需要使用XPathExpression.evaluate()。我接受任何Chrome支持的标准JavaScript函数解决方案。

（希望不需要使用函数。如果必须使用函数，最好是不超过2-3行符合ESLint规范的代码。）

谢谢！

相关帖子 #

由于XPathResult.resultType不是可迭代对象，以下帖子不适用：

• Convert ES6 Iterable to Array
• Transforming a Javascript iterable into an array
• How to use Array.from with a XPathResult?

内容的提问来源于stack exchange，提问作者Emma