使用 XPath 在 DOM 中搜索相同字符串的倍数

Question

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

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

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

Answer 1

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

示例：使用 snapshotLength() 和 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 值，到 return 只是一个节点，然后使用 属性 （不是方法） 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 );

---

改为获取文本或倒计时，或测试 true/false 条件

注意among the other values (constants) you can specify as the second-to-last argument to document.evaluate()获取其他结果类型，可以直接制作return:

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

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

---

MDN 上有更多内容

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

的任何人