ウェブページにコード以外のテキストを置き換えます

Question

JavaScriptを使用してサイトのinnerHTMLを置き換えるのに役立つ一連の関連する質問を検索しましたが、ほとんどはテキストのIDまたはクラスを対象としています。しかし、私はスパンタグまたはtdタグの内側にある可能性があります。

$("body").children().each(function() { 
     $(this).html($(this).html().replace(/\$/g,"%")); 
    }); 

上記のコードの問題は、私はランダムにロードされたページ上のいくつかのコードアーティファクトやその他の問題を参照してくださいということです。私は最終的に以下のコードを動作させるために、いくつかのリソースを集めることができました。私はそれが何かを持っていると思うウェブサイトのコードの複数の "$"部分があると上記のスクリプトは％に変換しているので、物事を破る。JavaScriptまたはJqueryを使用して

コードを変更する方法はありますかJavaScript/jQuery）を使用してコード要素に影響せず、表示されるテキストのみを置き換えます（つまり、ここでは<）。

ありがとうございます！

---編集---

私はいくつかの他のコードとの競合を取得していた理由は、このエラーのことであるように見えます「キャッチされない例外TypeError：プロパティを読み取ることができません 『のinnerText』未定義の」。だから私はinnerTextを持っていないいくつかの要素があると推測しています（正規表現の基準を満たしていないにもかかわらず）、他のインラインスクリプトコードも壊れてしまいます。

正規表現を満たしていない場合や、未定義の場合は置き換えないと、.replaceを試しないようにコードを追加または変更できるものはありますか？

Answer 1

DOMへの卸売り正規表現の変更は少し危険です。チェックする必要がある特定のDOMノードだけに作業を制限するのが最善です。この場合、テキストノードのみが必要です（ドキュメントの可視部分）。

This answerは、特定の要素に含まれるすべてのテキストノードを選択する便利な方法を提供します。そして、あなたはそのリストを反復処理し、約誤って周囲のHTMLタグや属性を変更する心配することなく、あなたの正規表現に基づいてノードを置き換えることができます。

var getTextNodesIn = function(el) { 
 
    return $(el) 
 
    .find(":not(iframe, script)") // skip <script> and <iframe> tags 
 
    .andSelf() 
 
    .contents() 
 
    .filter(function() { 
 
     return this.nodeType == 3; // text nodes only 
 
    } 
 
); 
 
}; 
 

 
getTextNodesIn($('#foo')).each(function() { 
 
    var txt = $(this).text().trim(); // trimming surrounding whitespace 
 
    txt = txt.replace(/^\$\d$/g,"%"); // your regex 
 
    $(this).replaceWith(txt); 
 
}) 
 

 
console.log($('#foo').html()); // tags and attributes were not changed

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="foo"> Some sample data, including bits that a naive regex would trip up on: 
 
    foo<span data-attr="$1">bar<i>$1</i>$12</span><div>baz</div> 
 
    <p>$2</p> 
 
    $3 
 
    <div>bat</div>$0 
 
    <!-- $1 --> 
 
    <script> 
 
    // embedded script tag: 
 
    console.log("<b>$1</b>"); // won't be replaced 
 
    </script> 
 
</div>

Answer 2

それは少し違って、私を解決しなかったし、それを交換しようとする前に、正規表現に対して各値をテスト：

var regEx = new RegExp(/^\$\d$/); 
var allElements = document.querySelectorAll("*"); 
     for (var i = 0; i < allElements.length; i++){ 
      var allElementsText = allElements[i].innerText; 
      var regExTest = regEx.test(allElementsText); 
      if (regExTest=== true) { 
        console.log(el[i]); 
       var newText = allElementsText.replace(regEx, '%'); 
       allElements[i].innerText=newText; 
     } 
} 

誰もがこれを持つ任意の潜在的な問題を見ていますか？

私が発見した1つの問題は、ページが読み込まれた後にページの一部がリフレッシュされても機能しないことです。ページ上に新しいコンテンツが生成されたときにスクリプトを再実行する方法はありますか？