Javascript替换函数，用于在HTML中的字符串周围添加标记标记

Question

我有一个可编辑的段落。我想在本段中标出一些词。这个单词通过从另一个页面返回的JSON响应来确定。响应的格式类似于吼叫。

HTML：

<p id="area" contenteditable>

</p>
<button class="btn dark" id="send">Send</button>

JS：

jQuery(document).ready(function() {
    $("#send").click(function() {
        var d = $("#area").text();
        $.post("responser.php", { str : d})
        .done(function( data ) {
            console.log(data);
            var obj = $.parseJSON(data);
            var words = obj.words;
            $.each( words, function( key, value ) {
                console.log(value.inLex);
                if(!value.inLex) {
                    d = d.replace(value.word, "<mark>"+value.word+"</mark>");
                }
            });
            $("#area").text(d);
        })
    });
});

JSON响应：

{"words":[
    {"key":0,"word":"hello","inLex":false},
    {"key":1,"word":"man","inLex":true},
    {"key":2,"word":"how","inLex":false},
    {"key":3,"word":"are","inLex":true},
    {"key":4,"word":"you","inLex":false},
    {"key":5,"word":"","inLex":true}
]}

问题是替换功能的行为与我的期望不同，并显示HTML标签，如文字，类似于波纹管。

Answer 1

$().text()设置元素内部文本节点的内容。

您正在寻找的是$().html()，它设置了元素的innerHTML。

尝试将$("#area").text(d);替换为$("#area").html(d);