jQuery.html () заменяет символ на имя объекта html [duplicate]

Без jQuery:

function decodeEntities(encodedString) {
    var textArea = document.createElement('textarea');
    textArea.innerHTML = encodedString;
    return textArea.value;
}

console.log(decodeEntities('1 & 2')); // '1 & 2'

Это работает так же, как принятый ответ , но безопасен для использования с ненадежным пользовательским вводом.

Проблемы безопасности в аналогичных подходах

Поскольку , отмеченный Майком Самуэлем , выполнение этого с помощью <div> вместо <textarea> с ненадежным вводом пользователя является уязвимостью XSS, даже если <div> никогда не добавляется в DOM:

function decodeEntities(encodedString) {
    var div = document.createElement('div');
    div.innerHTML = encodedString;
    return div.textContent;
}

// Shows an alert
decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">')

Однако эта атака невозможна против <textarea>, потому что нет элементов HTML, которые разрешены для содержимого <textarea> . Следовательно, любые HTML-теги, все еще присутствующие в «закодированной» строке, будут автоматически закодированы сущностью в браузере.

function decodeEntities(encodedString) {
    var textArea = document.createElement('textarea');
    textArea.innerHTML = encodedString;
    return textArea.value;
}

// Safe, and returns the correct answer
console.log(decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">'))

Выполнение этого с использованием jQuery .html() и .val() вместо использования .innerHTML и .value также небезопасны * для некоторых версий jQuery, даже при использовании textarea , Это связано с тем, что более старые версии jQuery преднамеренно и явно оценивали скрипты , содержащиеся в строке, переданной в .html(). Следовательно, такой код показывает предупреждение в jQuery 1.8:

// Shows alert
$('<textarea>').html('<script>alert(1337)</script>').text()

* Благодаря Эру Пенкман для обнаружения этой уязвимости.

Я думаю, вы смешиваете текст и методы HTML. Посмотрите на этот пример, если вы используете внутренний HTML-код элемента как текст, вы получите декодированные HTML-теги (вторая кнопка). Но если вы используете их как HTML, вы получите представление в формате HTML (первая кнопка).

<div id="myDiv">
    here is a <b>HTML</b> content.
</div>
<br />
<input value="Write as HTML" type="button" onclick="javascript:$('#resultDiv').html($('#myDiv').html());" />
&nbsp;&nbsp;
<input value="Write as Text" type="button" onclick="javascript:$('#resultDiv').text($('#myDiv').html());" />
<br /><br />
<div id="resultDiv">
    Results here !
</div>

Первая кнопка пишет: вот HTML-контент.

Вторая кнопка пишет: вот содержимое & lt; B> HTML & lt; / B>.

Кстати, вы можете увидеть плагин, который я нашел в плагине jQuery - HTML-декодирование и кодирование , который кодирует и декодирует строки HTML.

Вопрос ограничен «с помощью jQuery», но он может помочь некоторым узнать, что код jQuery, приведенный в лучшем ответе, здесь ниже: это работает с jQuery или без него:

function decodeEntities(input) {
  var y = document.createElement('textarea');
  y.innerHTML = input;
  return y.value;
}

Вы должны создать пользовательскую функцию для html-объектов:

function htmlEntities(str) {
return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g,'&gt;').replace(/"/g, '&quot;');
}

Чтобы декодировать HTML-объекты с помощью jQuery, просто используйте эту функцию:

function html_entity_decode(txt){
    var randomID = Math.floor((Math.random()*100000)+1);
    $('body').append('<div id="random'+randomID+'"></div>');
    $('#random'+randomID).html(txt);
    var entity_decoded = $('#random'+randomID).html();
    $('#random'+randomID).remove();
    return entity_decoded;
}

Как использовать:

Javascript:

var txtEncoded = "á é í ó ú";
$('#some-id').val(html_entity_decode(txtEncoded));

HTML:

<input id="some-id" type="text" />

Самый простой способ - установить селектор класса для ваших элементов, а затем использовать следующий код:

$(function(){
    $('.classSelector').each(function(a, b){
        $(b).html($(b).text());
    });
});

Больше ничего не нужно!

У меня была эта проблема, и я нашел это ясное решение, и он отлично работает.

Вот еще одна проблема: escape-строка не выглядит читаемой при назначении входного значения

var string = _.escape("<img src=fake onerror=alert('boo!')>");
$('input').val(string);

Exapmle: https://jsfiddle.net/kjpdwmqa/3/

Я думаю, что это полная противоположность выбранному решению.

var decoded = $("<div/>").text(encodedStr).html();

Расширить класс String:

String::decode = ->
  $('<textarea />').html(this).text()

и использовать как метод:

"<img src='myimage.jpg'>".decode()

Предположим, что у вас есть ниже String.

Наши каюты Deluxe являются теплыми, уютными и amp; удобный

var str = $("p").text(); // get the text from <p> tag
$('p').html(str).text();  // Now,decode html entities in your variable i.e 

.

вот оно.

В качестве значения для кнопки HTML я просто должен был использовать charater (& dArr;) для HTML. Код HTML хорошо выглядит с самого начала в браузере:

<input type="button" value="Embed & Share  &dArr;" id="share_button" />

Теперь я добавляю переключатель, который также должен отображать charater. Это мое решение

$("#share_button").toggle(
    function(){
        $("#share").slideDown();
        $(this).attr("value", "Embed & Share " + $("<div>").html("&uArr;").text());
    }

Это отображает & dArr; снова в кнопке. Надеюсь, это может помочь кому-то.

Для пользователей ExtJS, если у вас уже есть закодированная строка, например, когда возвращаемое значение библиотечной функции является содержимым innerHTML, рассмотрите эту функцию ExtJS:

Ext.util.Format.htmlDecode(innerHtmlContent)