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

问题是 replace 函数的行为与我的预期不同，它显示了像文本这样的 HTML 标签，如下所示。

Answer 1

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

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

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