ページ内のすべてのtextNodesを変更する

Question

次のスクリプトを使用して、ページ内のすべてのテキストを空白なしの長いテキストに変更します。 "aquickbrownfoxjumpedoveralazyfrog"これは、テキストがすべての場所で正常に切断されているかどうかをテストするためです。

しかし、コンソールに貼り付けてスクリプトを実行すると、何らかの形でこのテキストがランダムに別の場所に追加され、奇妙なことにページがいっぱいになります。私が間違ってやっていることについてのアイデア？

(function(el, string){ 
    var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false); 
    while(n=walk.nextNode()) n.nodeValue = string; 
}(document.body, 'abigfoxjumpedoveralazyfrogmultipletimes')); 

Answer 1

テキストノードは空白だけでもかまいませんが、別の方法では空白もテキストノードであることに注意してください。そのようなノードはあなたのスクリプトによって記入されます。これにより、置換テキストが多くの予期しない場所に表示されます。

<div>**THERE IS AN EMPTY TEXT NODE HERE** 
    <span>Hi bob</span>**THERE IS AN EMPTY TEXT NODE HERE** 
</div> 

あなたの結果は、このようにテキストノード内の任意の非空白文字の存在のためのテスト、これを避けるために

<div>abigfoxjumpedoveralazyfrogmultipletimes 
    <span>abigfoxjumpedoveralazyfrogmultipletimes</span>abigfoxjumpedoveralazyfrogmultipletimes 
</div> 

次のようになります。

while (n=walk.nextNode()) if (/\S/.test(n.nodeValue)) n.nodeValue = string; 
          ^^^^^^^^^^^^^^^^^^^^^^^^^^^ 

Answer 2

あなたはSHOW_TEXTがあなたに見えるテキストを与えることを期待していますか？ここでの私の直感は、SHOW_TEXTがどのように選択されるのか、どのようにするのかを切り離すことです。

残念なことに、これに関するMDNドキュメントには、具体的な例がありません。 What Is A Text Node, Its Uses? //document.createTextNode()

要素がテキストノードである複数の子を持っていることと思われる。

はここで何が起こっているのかを説明するかもしれない、スタックオーバーフローの答えです。あなたが解析しているHTMLがどのようなものかはわかりませんが、複数のテキストノードが同じ文字列に設定されている可能性があります。