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

Question

我正在尝试用图像替换文本。例如，abc:) 应该转换为 abc(以及相应的表情符号)。我正在使用 contenteditable 元素来做同样的事情。但是，似乎没有任何效果。我尝试过使用replace()和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] 而不是图像本身。

Answer 1

不要创建图像对象，而是用图像标记替换文本，如下所示。

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