如何在javascript中使用.html（）將html作為文本插入？

Question

在我的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() 。 如何插入帶有script標簽的字符串，使其看起來與頁面上的樣子完全一樣？ 我不希望它被執行。

謝謝

Answer 1

我使用這些輔助功能。

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

如果您不確定其他變量沒有任何可執行代碼，我也將對其進行轉義。

Answer 2

我用這個解決了：

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

Answer 3

我認為您需要將對象包裝在虛擬標簽中，然后才能從中檢索完整的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>"