Экранирование текста с помощью jQuery append?

Question

Я знаю, что могу использовать $.html для установки содержимого HTML-объекта и $.text для задания содержимого (и это исключает HTML).

К сожалению, я использую $.append, который не экранирует HTML.

У меня есть что-то вроде этого:

function onTimer() {
    $.getJSON(url, function(data) {
        $.each(data, function(i, item) {
           $('#messages').append(item);
        }
    }
}

... где url возвращает массив строк. К сожалению, если одна из этих строк (например,) <script>alert('Hello')</script>, это выполняется.

Как мне получить его, чтобы избежать HTML?

Answer 1

Посмотрите, как это делает jQuery:

text: function( text ) {
    if ( typeof text !== "object" && text != null )
        return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );

    var ret = "";

    jQuery.each( text || this, function(){
        jQuery.each( this.childNodes, function(){
            if ( this.nodeType != 8 )
                ret += this.nodeType != 1 ?
                    this.nodeValue :
                    jQuery.fn.text( [ this ] );
        });
    });

    return ret;
},

Так что-то вроде этого должно сделать это:

$('#mydiv').append(
    document.createTextNode('<b>Hey There!</b>')
);

РЕДАКТИРОВАТЬ : Что касается вашего примера, это так просто, как:

$('#messages').append(document.createTextNode(item));

Answer 2

Вы добавляете элемент, который уже имеет контент? Или вы добавляете контент после добавления? В любом случае вам все равно нужно сделать .text (...) для этого элемента.

Если вы используете append и передаете HTML в качестве аргумента, попробуйте сначала создать элемент и передать его для добавления.

Ex:

$('<div/>').text('your content here').appendTo('div#someid')

Answer 3

Если вы действительно хотите, чтобы jQuery экранировал некоторый текст во фрагмент HTML, и не хотите непосредственно касаться document, следующий чистый jQuery может экранировать текст в HTML для вас (но только в контексте HTML) :

jQuery('<p/>').text('v & M_FLAG == M_FLAG').html()

Это может быть использовано для добавления текста довольно неэффективно:

jQuery('#message').append(jQuery('<p/>').text(item).html());

Не будет добавлен дополнительный элемент <p/>, потому что .html() возвращает содержимое элемента в формате HTML, за исключением самого элемента.

Исходя из отсутствия в jQuery встроенного способа создания экземпляров текстовых узлов, авторы jQuery ожидают, что пользователи будут напрямую использовать document.createTextNode(), как показано в более раннем ответе .