如何在 javascript 中使用 .html(） 将 html 作为文本插入

How to insert html as text using .html() in javascript?

本文关键字：html 插入 文本 javascript      更新时间：2023-09-26

在我的javascript应用程序中，我使用以下代码插入用户消息：

var displayMessages = function(response, onBottom) {
    var user = GLOBAL_DATA.user;
    var acc = '';
    for(var i=0; i<response.length; i+=1) {
        var obj = response[i];
        var acc_temp = "";
        acc_temp += '<div class="message ' + (obj['user_id']==user['id'] ? 'message-right' : 'message-left') + '">';
        acc_temp += '<div>' + Autolinker.link($(obj['message']).text()) + '</div>';
        if (obj['user_id']!=user['id']) {
            acc_temp += '<div class="message-details">' + obj['first_name'] + ' ' + obj['last_name'] + '</div>';
        }
        acc_temp += '<div class="message-details">' + obj['date_sent'] + '</div>';
        acc_temp += '</div>';
        acc = acc_temp + acc;
    }
    addMessage(acc, onBottom);
};

问题是，如果obj['message'] = "<script>alert(1);</script>";那么打印在屏幕上的内容"alert(1);"因为我使用 .text() .如何插入带有脚本标签的字符串，使其在页面上看起来完全一样？我不希望它被执行。

谢谢

我使用这些辅助函数。

function htmlEncode(value){
  return $('<div/>').text(value).html();
}
function htmlDecode(value){
  return $('<div/>').html(value).text();
}

如果您不确定其他变量是否没有任何可执行代码，我也会对其进行转义。

我用这个解决了它：

function escapeHTML(str) {
    return $("<p></p>").text(str).html();
}

我认为您需要将对象包装在一个虚拟标签中，然后您可以从中检索完整的html。

但是，您

会遇到问题，因为您使用的是脚本标记，该标记将被评估。

obj['message'] = "<script>alert(1);</script>";
>
$(obj['message']).text();
> "alert(1);"
$(obj['message']).html();
> "alert(1);"
$(obj['message']).wrapAll('<div>').text();
// alerts with 1
> "alert(1);"

不使用脚本标记将起作用。

obj['message'] = "<span>alert(1);</span>";
>
$(obj['message']).wrapAll('<div>').text();
> "<span>alert(1);</span>"
相关文章：