連想配列のHTMLコンテンツをjqueryと置き換えます

Question

私の質問には謝りたいのですが、1日前にjqueryで始まったばかりです...少し馬鹿に聞こえるかもしれません。 私は内容の連想配列があります。私は

<p><span data-content="text1">key1</span>Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Proin vestibulum est non nunc feugiat, ut hendrerit dolor semper. 
<span data-content="Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, 
consectetur, adipisci velit...">key2</span> Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Proin vestibulum est non nunc feugiat, ut hendrerit 
dolor semper. etc.</p> 

：

var myContent = { 
    'key1' : 'text1', 
    'key2' : 'Neque porro quisquam est qui dolorem ipsum quia 
    dolor sit amet, consectetur, adipisci velit...' 
} 

とhtmlのテキスト：

<p>key1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin 
vestibulum est non nunc feugiat, ut hendrerit dolor semper. key2 Lorem ipsum 
dolor sit amet, consectetur adipiscing elit. Proin vestibulum est non nunc 
feugiat, ut hendrerit dolor semper. key1 and key2 Lorem ipsum dolor sit 
amet, consectetur adipiscing elit. Proin vestibulum est non nunc feugiat, ut 
hendrerit dolor semper. </p> 

私はこのようなHTMLでKEY1 & KEY2を交換したいの多くのことを試しましたが、期待される結果が得られませんでした：

$.each(myContent ,function(key,value) { 
    for (i = 0; i <= Object.keys(myContent).length; i++) { 
     var expr = new RegExp(key,'i'); 
     $("p").each(function() { 
      var text = $(this).text(); 
      text = text.replace(expr, '<span data-note=""> '+ expr + ' </span>'); 
      $(this).text(text); 
     }); 
    } 
}); 

これはテキストを生成し、HTMLを生成しようとするとエラーメッセージが表示され、少なくとも3〜4回スパンが再現されます。 初心者の間違いがすべてわかると思います。とにかくあなたの助けのための

おかげで...

Answer 1

これまであなたのjavascriptのコードを変更してください。

$.each(myContent, function(key, value) { 
     $("p:contains('" + key + "')").html(function(_, html) { 
      return html.split(key).join('<span data-content="' + value + '"> ' + key + ' </span>'); 
     }); 
    }); 

Jsfiddleリンクhttps://jsfiddle.net/aanair08/uzwpp5hk/

Answer 2

は、JavaScript Stringオブジェクトからreplace（）メソッドを使用することができます...ここで

$(document).ready(function() { 
    var myContent = { 
     'key1' : 'text1', 
     'key2' : 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...' 
    } 

    var newText = $('p').text(); 

    $.each(myContent, function(key,value) { 
     newText = newText.replace(key,'<span data-content="' + value + '">' + key + '</span>'); 
    }); 

    $('p').html(newText); 
}); 

あなたはバイオリンを持っている... https://fiddle.jshell.net/rigobauer/tqoh690L/

私はそれが助けてくれることを願っています

Answer 3

ほんの少しのel A.イグレシアスによって作られた以前の解決策よりも、しかし、それはまた動作します...

$('p').each(function() { 
    for (var i = 0; i < Object.keys(myContent).length; i++) { 
     var originalContent = this.innerHTML; 
     pattern = new RegExp(Object.keys(myContent)[i], 'g'); 
     var newText = originalContent.replace(pattern, '<span data-note="' + myContent[Object.keys(myContent)[i]] + '">' + Object.keys(myContent)[i] + '</span>'); 
    if (originalContent !== newText) { 
     this.innerHTML = newText; 
    } 
} 

}）;