javascript - 从Json值用JavaScript中的表情符号替换文本

我正在尝试用图像替换文本，例如，abc :)应该转换为abc（以及相应的图释）。并且我正在使用contenteditable元素来执行相同操作，但是似乎没有任何作用。 （）和html（）函数，但它们不起作用。

我的Codepen的链接是：Link

而且我不想使用正则表达式，因为我必须在json文件中添加更多内容。

HTML代码：

<div contenteditable="true" id='text-box'>
</div>

JS代码：

document.body.onkeyup=function(e){
            if(e.keyCode==32){
                var contenteditable = document.querySelector('[contenteditable]'),
                text = contenteditable.textContent;
                var word=getWord(text);
                console.log(word);
                console.log(data.value);
                if(word.includes(data.value)){
                    //alert("true");
                    var img=new Image();
                    img.src=data.image;
                    img.setAttribute("class","image");
                    //$("#text-box").append(img);
                    $("#text-box").html(function (_, html) {
     return html.replace(data.value , img );

                }
                //$("#text-box").html(text.replace(data.value,img));
            }
        }

        function getWord(text){
            var word=text.split(" ").pop();
            return word;
        }

JSON数据：

var data={
    "value":":)",
    "image":"persons-0016_large.png"
};

执行完代码后，我得到的输出为abc[object HTMLImageElement]而不是图像本身。

最佳答案

像这样创建图像对象，而不是用图像标签替换文本。

var data={
    "value":":)",
    "image":"persons-0016_large.png"
};


document.body.onkeyup=function(e){
    if(e.keyCode==32){
        var contenteditable = document.querySelector('[contenteditable]');
        var text = contenteditable.textContent;
        var word=getWord(text);
        console.log(word);
        console.log(data.value);
        if(word.includes(data.value)){
            //alert("true");
            //var img=new Image();
            //img.src=data.image;
            //img.setAttribute("class","image");

            var img = "<img src='" + img.src +"' class='image' /> ";
            //$("#text-box").append(img);
            $("#text-box").html(function (_, html) {
                return html.replace(data.value , img );
            } );
        //$("#text-box").html(text.replace(data.value,img));
        }
    };

};

function getWord(text){
    var word=text.split(" ").pop();
    return word;
}