JavaScript:剥离 HTML 实体但保留图像标签？

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 的类并将文本插入其中。替换表情符号(消息)；是一个函数，它可以找到所有字符集的笑脸符号(: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？如果是这样，我该如何修复它以去除所有可能导致问题但保留该 img 的 JS 和其他标签？

Answer 1

你应该使用 .html 而不是使用 .text

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

请注意，您的脚本可能容易受到跨站点脚本攻击，因此您需要 replace all html special characters with entities 之前 用 imgs 替换笑脸，在你的 replaceEmoticons