Как декодировать HTML-объекты с помощью jQuery?

без каких-либо 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-теги, все еще присутствующие в строке "encoded", будут автоматически закодированы браузером.

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()

_{* спасибо ЕСВ Penkman для ловли этой уязвимости.}

Как сказал Майк Сэмюэль, не используйте jQuery.формат HTML.)(text () для декодирования HTML-объектов, поскольку это небезопасно.

вместо этого используйте шаблон визуализации, как усы.js или decodeEntities из комментария @Вывит по.

подчеркивания.js утилита-пояс библиотека поставляется с escape и unescape методы, но они небезопасны для пользователя вход:

_.escape (string)

_.unescape (string)

Я думаю, что вы путаете текстовые и 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 содержание.

вторая кнопка пишет: вот HTML содержание.

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

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

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

можно использовать он библиотека, доступная из https://github.com/mathiasbynens/he

пример:

console.log(he.decode("Jörg &amp Jürgen rocked to & fro "));
// Logs "Jörg & Jürgen rocked to & fro"

Я бросил вызов автору библиотеки на вопрос о том, была ли какая-либо причина использовать эту библиотеку в клиентском коде в пользу <textarea> рубить в другие ответы здесь и в других местах. Он предоставил несколько возможных оправдания:

• если вы используете узел.JS serverside, используя библиотеку для кодирования/декодирования HTML, дает вам одно решение, которое работает как на стороне клиента, так и на стороне сервера.

• алгоритмы декодирования сущностей некоторых браузеров имеют ошибки или не поддерживают некоторые именованные ссылки на символы. Например, Internet Explorer будет декодировать и отображать неразрывные пробелы ( ) правильно, но сообщить их как обычные пробелы вместо неразрывных через элемент DOM innerText собственность, нарушая <textarea> hack (хотя и только в незначительной степени). Кроме того, IE 8 и 9 просто не поддерживают любая из новых именованных ссылок на символы, добавленных в HTML 5. Автор он также проводит тест поддержки именованных ссылок на символы в http://mathias.html5.org/tests/html/named-character-references/. в IE 8 он сообщает о более чем тысяче ошибок.

  если вы хотите быть изолированы от ошибок браузера, связанных с декодированием сущностей и/или иметь возможность обрабатывать полный спектр именованных ссылок на символы, вы не можете уйти с <textarea> hack; вам понадобится библиотека, как он.

• он просто чертовски хорошо чувствует, таким образом это менее замысловато.

encode:

$("<textarea/>").html('<a>').html();      // return '&lt;a&gt'

расшифрую:

$("<textarea/>").html('&lt;a&gt').val()   // return '<a>'

использовать

myString = myString.replace( /\&/g, '&' );

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

Поиск "JavaScript HTML entities", и вы можете найти несколько библиотек именно для этой цели, но они, вероятно, все будут построены вокруг приведенной выше логики - заменить, сущность на сущность.

вы должны сделать пользовательскую функцию для HTML-сущности:

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

мне просто нужно было иметь HTML entity charater ( ⇓ ) в качестве значения для кнопки 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());
    }

это снова отображает ⇓ в кнопке. Я надеюсь, что это может помочь кому-то.

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

наши роскошные каюты теплые, уютные и удобные

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

str и назначить обратно в

тег.

вот и все.

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

Ext.util.Format.htmlDecode(innerHtmlContent)

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

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

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

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

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

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

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

кроме того, есть библиотека для этого..

здесь https://cdnjs.com/libraries/he

npm install he                 //using node.js

<script src="js/he.js"></script>  //or from your javascript directory

использование выглядит следующим образом...

//to encode text 
he.encode('© Ande & Nonso® Company LImited 2018');  

//to decode the 
he.decode('© Ande & Nonso® Company Limited 2018');

ура.

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

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

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

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

чтобы декодировать 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" />

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

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