JavaScriptコードの一部が他のJavaScriptを壊しています

Question

私はソースコードにアクセスできないように、ホストされたソフトウェアのフォーラムを管理しています。

すべてのページの特定のテキストキーワードの最初のインスタンスをハイパーリンクに置き換えようとしています。私はまた、国コードに基づいてこれらのリンクを地理的にターゲット設定しています。

私はこのサイトの他の回答を読んで、以下のコードをまとめることができました。実際にはうまくいきます。しかし他のJavaScript（またはjQuery？）を台無しにしているようです。既にページに既にロードされています。

他のJavaScriptコードに影響するこのコードに間違っているものは誰でも見ることができますか？

var c = null; 
$.get("https://pro.ip-api.com/json/?key=XXXXXXXXXX", function(data) { 
    c = data.countryCode; 
    if (c == "GB") { 
    var thePage = $(".MessageList"); 
    thePage.html(thePage.html().replace('KEYWORD1 ', '<a href="http://www.exampleGBlink1.com">KEYWORD1</a> ')); 
    thePage.html(thePage.html().replace('KEYWORD2 ', '<a href="http://www.exampleGBlink2.com">KEYWORD2</a> ')); 
    } else { 
    var thePage = $(".MessageList"); 
    thePage.html(thePage.html().replace('KEYWORD1 ', '<a href="http://www.exampleELSElink1.com">KEYWORD1</a> ')); 
    thePage.html(thePage.html().replace('KEYWORD2 ', '<a href="http://www.exampleELSElink2.com">KEYWORD2</a> ')); 
    } 
    console.log(data.countryCode); 
}, "jsonp"); 

私はこのコードを持っているもう一つの問題：それはまた、私のHTMLコード内のキーワードのインスタンスを置き換えていますので、私はこれを回避するハッキングなどのキーワードの末尾に余分な空白を追加しました。

EDIT：

私は上記のコードの下に以下のコードを追加した場合、すべてが正常に動作し、私の問題が与えるもの、なくなっていますか？このファイルは存在しませんし、私は、コンソールのエラーを取得：「リソースの読み込みに失敗しました：ネット:: ERR_INSECURE_RESPONSE」

<script src="https://www.RandomDomain.com/test.js"></script> 

Answer 1

はすぐに呼び出された関数式（生命維持）であなたJavaScriptをラップ試してみてください。これにより、使用する変数がグローバル名前空間に登録されなくなります。あなたのページにロードされている縮小されたスクリプトによって、cのような変数名が使用される可能性は非常に高いです。

生命維持：私は見

(function() { 
    // Your JavaScript here. 
})(); 

Answer 2

一つの問題は、ページの内容を置き換えるために使用されている方法です。 "x.html（）"を使用してhtml要素を文字列として抽出すると、html要素が文字列形式になりますが、接続されているイベントハンドラはすべて含まれません。その後、thePage.html（updatedHtmString）を呼び出すことによってhtml要素を更新すると、html要素は予期したとおりに復元されますが、接続されているすべてのイベントハンドラが失われます。これは、イベントハンドラを大量に使用する多くのjs UIフレームワークを簡単に問題を引き起こす可能性があります。

個人的には、jqueryセレクタを使用してDOMツリーをトラバースし、htmlテキストコンテンツを持つ要素をそれらのキーワードで検索し、キーワードを新しく挿入された要素に置き換えます。

".MessageList" DOMツリー全体を置き換える代わりに、要素内のテキストを変更して新しい要素を追加するだけです。添付されたイベントは失われません。

FIDDLEの例と機能を以下に追加しました。フィドルでは、.htmlの使用がイベントハンドラをどのように削除しているかを見ることができます。以下の関数では、最初のオカレンスを '：first' jqueryセレクタを追加して変更するように調整しました。

JSFiddle Demo

// Ugly but functional function to do the replacement. 
function GoodReplaceOnlyFirstOccurence(findText, replaceWith) { 

    var $targElem = $(".MessageList1"); 

    $targElem.children().each(function() { 
     var $elem = $(this); 
     $(":contains('"+findText+"'):first", $elem).html(function() { 
      return $(this).html().replace(findText, replaceWith); 
     }); 
    }); 
}