テキストノードのレンダリングされたテキストのみを取得する方法は？

Question

私はテキストに応じてウェブページを変更する小さな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のようなものですが、テキストノードでは未定義です。テキストノードのユーザに表示されるテキストのみを取得する方法を知っている人はいますか？

例：関連するCSSと

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

：Webページには、以下のHTMLを持つノードを持っている場合

script { 
    display: none; 
} 

そして、それぞれのテキストノード（マイナス余分なスペースや行のテキストコンテンツブレーク）は "{" setObject "：-1}クイズ"として返されます。ただし、ユーザーに表示されるのは「クイズ」だけです。それぞれのテキストノードが与えられた場合、レンダリングされたテキストのみを取得するにはどうすればよいですか？

Answer 1

私は問題があると思います。

新しいブラウザを使用している場合は、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 
}