如何獲取文本節點的渲染文本？

我正在根據文本創建一個修改網頁的小webextension。正如我在這裏的問題的一個例子是一些代碼，有樹遍歷抓取網頁上的所有文本節點：如何獲取文本節點的渲染文本？

var treeWalker = document.createTreeWalker(
    document.body, 
    NodeFilter.SHOW_TEXT, 
    { acceptNode:() => {return NodeFilter.FILTER_ACCEPT;} }, 
    false 
); 

while(treeWalker.nextNode()) { 
    let x = treeWalker.currentNode.data; 
    //do something with x 
}

不幸的是，X將所有的節點的文本，即使沒有顯示它在網頁上。

我想要的就像treeWalker.currentNode.innerText，但是對於文本節點沒有定義。有沒有人知道如何只獲取文本節點顯示給用戶的文本？

例如：如果一個網頁有以下HTML節點：

<div> 
    <script type="text/x-config"> 
    { 
     "setObject": -1 
    } 
    </script> 
    <span>Quiz</span>

與相關的CSS：

script { 
    display: none; 
}

那麼相應的文本節點（減去多餘的空格和行的文本內容休息）返回爲「{」setObject「：-1}測驗」。但是，唯一呈現給用戶的是「測驗」。鑑於各自的文本節點，我如何只獲取渲染的文本？

來源

2017-09-28 AndersonHappens

那是什麼不被顯示給用戶的文本節點內容的例子嗎？ – nnnnnn

您是否試圖在數據被CSS隱藏的意義上獲得「可見」文本？（比如'text-overflow'規則）？ – bonesbrigade

增加了一個澄清示例。 – AndersonHappens

我想我們有一個問題。

如果您使用的是新瀏覽器，您應該能夠使用innerText，但是如果您不是，則必須使用textContent。 textContent的問題是，它獲取所有元素的內容，包括and和textContent不知道樣式，因此它將返回隱藏的事件。

我想要走的路是用NodeFilter.SHOW_ELEMENT替換過濾器並獲得Element.innerHTML。

所以嘗試：

var treeWalker = document.createTreeWalker(
    document.body, 
    NodeFilter.SHOW_ELEMENT, 
    { acceptNode: (node) => { return NodeFilter.FILTER_ACCEPT;} }, 
false 
); 

while(treeWalker.nextNode()) { 
    let x = treeWalker.currentNode.innerHTML; 
    //do something with x 
}

來源

2017-09-28 03:55:22

我嘗試在最新版本的chrome上使用innerText，並且它總是返回未定義的文本節點。另外，在你提出的場景中，我不再看文本節點，所以innerText應該可以工作。爲什麼我會使用innerHTML而不是innerText？ – AndersonHappens

好吧，innerText是Node的一個屬性，你可以看到： https://developer.mozilla.org/en-US/docs/Web/API/Node/innerText 並且有一些兼容性問題，因爲innerHTML會工作不管瀏覽器如何。 –

元素是一個節點的下降，因此它也繼承了innerText。 – AndersonHappens

如何獲取文本節點的渲染文本？

回答

相關問題