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

Question

我正在編寫一個 Chrome 擴展程序，它將搜索 DOM 並突出顯示頁面上的所有電子郵件地址。 我發現這是在頁面上查找符號，但它只在有一個電子郵件地址時正確返回，當找到多個地址時它會中斷。

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

如果找到多個返回倍數的正確方法是什么？

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 ），並使用帶有iterateNext()的while循環：

示例：使用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 ) 代表文檔的某些真/假方面； 例如，文檔是否包含任何電子郵件地址的指示符

當然，要獲取其他結果類型，作為document.evaluate()的第一個參數提供的 XPath 表達式必須是一個實際返回字符串、數字或布爾值的表達式（而不是返回一組屬性節點或元素節點）。

---

MDN 上的更多內容

上面的例子都是基於 MDN Introduction to using XPath in JavaScript tutorial，強烈推薦給任何嘗試使用 XPath 和document.evaluate()的人。

Answer 2

通過下面的代碼，您可以將您的XPath選擇器結果作為一個數組。

const xpath = `//*[contains(text(),"@")]`;//your special XPath
const elements = Array.from((function*(){ let iterator = document.evaluate(xpath, document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null); let current = iterator.iterateNext(); while(current){ yield current; current = iterator.iterateNext(); }  })());
//Use the simple array

此外，您可以將其作為一個函數，以進行更多調用...

function getElementsByXPath(xpath) {
    return Array.from((function*(){ let iterator = document.evaluate(xpath, document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null); let current = iterator.iterateNext(); while(current){ yield current; current = iterator.iterateNext(); }  })());
}

享受...