Question

我有这行代码：

var newmsg = $('<div class="message msg_owner">' + 
"<span class='msg_date'>"+dateFormat(timesp)+
"</span><span class='msg_seperator'> | </span><span class='msg_name'>" +
pseudo + '</span> : <span class="msg"></span></div>');
newmsg.find(".msg").text(replaceEmoticons(msg));
$("#chatEntries").append(newmsg);

基本上创建div或类，然后找到名为.msg的类并在其中插入文本。 replaceEmoticons（MSG）;是一个查找表情符号（：D，:)，:(等等...）的所有字符集的函数，并将它们转换为类似：

<img src='http://example.com/public/images/smileys/laugh.png' id='chat_smls'/>

所以我最终得到的消息如下：

原文：

Hello how are you? :)

变成：

Hello how are you? <img src='http://example.com/public/images/smileys/happy.png' id='chat_smls'/>

然而，在行之后：

newmsg.find(".msg").text(replaceEmoticons(msg));

将代码作为文本返回，在聊天窗口中，它实际上显示为带有所有属性的html img标记。根据我的理解，这是因为.text？如果是这样，我怎么能修复它以剥离可能导致问题的所有JS和其他标签，但留下img？

Answer 1

您应该使用.text

，而不是使用.html

newmsg.find(".msg").html(replaceEmoticons(msg));

请注意，您的脚本可能容易受到跨网站脚本的攻击，因此您希望在replaceEmoticons

之前使用imgs替换表情符号时使用replace all html special characters with entities >

Answer 2

是的，这就是text方法的作用。如果我已正确理解了问题，您可以使用text和html方法：

newmsg.find(".msg").text(msg).html(function(_, currentContent) {
    return replaceEmoticons(currentContent);
});

text方法将所有适用的字符转换为HTML实体，html方法使用innerHTML函数的返回值设置replaceEmoticons属性。

JavaScript：剥离HTML实体但保留图像标记？

2 个答案: