Question

我想为我的问题道歉，但正如我刚刚开始在jquery ...它听起来有点愚蠢。我有一个带内容的关联数组：

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>

我想替换key1＆amp; key2 by html像这样：

<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>

所以我尝试了很多东西，但我没有得到预期的结果，例如：

$.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 Link 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

比A. Iglesias先前的解决方案稍微优雅一点，但它也有效......

$('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;
    }
}

}）;

用jquery用关联数组替换HTML内容

3 个答案: