如何在javascript中使用.html（）将html作为文本插入？(How to insert html as text using .html() in javascript?)

如何在javascript中使用.html（）将html作为文本插入？(How to insert html as text using .html() in javascript?)

在我的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() 。 如何使用脚本标记插入字符串，以使其看起来与页面上的字符串完全相同？ 我不希望它被执行。

谢谢

In my javascript app, I insert a user message using the code:

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

The problem is that, if obj['message'] = "<script>alert(1);</script>"; then what gets printed on the screen is "alert(1);" because I use .text(). How can I insert the string with the script tags, so that it looks exactly like that on the page? I don't want it to get executed.

Thanks

最满意答案

我使用这些辅助函数。

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

如果你不确定它们没有任何可执行代码，我也会逃避其他变量。

I use these helper functions.

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

I would escape the other variables as well if you are not sure that they will not have any executable code.