使用 XPath 在 DOM 中搜索多个相同字符串

Question

我正在编写一个 Chrome 扩展程序，它将搜索 DOM 并突出显示页面上的所有电子邮件地址。我发现这是为了查找页面上的符号，但它只在有一个电子邮件地址时正确返回，当找到多个地址时它会中断。

found = document.evaluate('//*[contains(text(),"@")]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotItem(0);

如果找到多个返回倍数，正确的方法是什么？

Answer 1

如果要处理多个结果，请不要调用.snapshotItem(0)ondocument.evaluate()而是使用for循环和循环遍历结果snapshotLength()：

示例：使用snapshotLength()with循环遍历结果snapshotItem()

var nodesSnapshot = document.evaluate('//*[contains(text(),"@")]',
    document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );

for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
{
  console.dir( nodesSnapshot.snapshotItem(i) );
}

要么，要么指定XPathResult.UNORDERED_NODE_ITERATOR_TYPE参数（而不是XPathResult.ORDERED_NODE_SNAPSHOT_TYPE），并使用while循环iterateNext()：

示例：迭代结果使用 iterateNext()

var iterator = document.evaluate('//*[contains(text(),"@")]',
    document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null );

try {
  var thisNode = iterator.iterateNext(); 
  while (thisNode) {
    console.dir( thisNode );
    thisNode = iterator.iterateNext();
  } 
}
catch (e) {
  console.log( 'Error: Document tree modified during iteration ' + e );
}

在是八九不离十了一个在这个问题上，情况相反情况下，当你真的不希望只是得到第一个匹配的节点，可以指定XPathResult.FIRST_ORDERED_NODE_TYPE值，只返回一个节点，然后使用属性（不是方法）singleNodeValue：

示例：使用XPathResult.FIRST_ORDERED_NODE_TYPE和singleNodeValue

var firstMatchingNode = document.evaluate('// [contains(text(),"@")]',
    document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );

console.dir( firstMatchingNode.singleNodeValue );

获取文本或倒数，或测试真/假条件

请注意，在其他值（常量）中，您可以将其指定为倒数第二个参数document.evaluate()以获取其他结果类型，您可以使其直接返回：

• XPathResult.STRING_TYPE从文档的某些部分中提取的单个字符串 ( )
• 代表某种计数的数字 ( XPathResult.NUMBER_TYPE); 例如，在文档中找到的电子邮件地址数量的计数
• 一个布尔值 ( XPathResult.BOOLEAN_TYPE) 表示文档的某些真/假方面；例如，指示文档是否包含任何电子邮件地址

当然，要返回其他结果类型，您作为第一个参数提供的 XPath 表达式document.evaluate()需要是一个实际返回字符串、数字或布尔值的表达式（而不是返回一组属性节点或元素节点）。

更多在 MDN

以上示例均基于 MDN Introduction to using XPath in JavaScript教程，强烈建议任何尝试使用 XPath 和document.evaluate().