HTML Entity Decode

Как мне кодировать и декодировать HTML-объекты, используя JavaScript или JQuery?

var varTitle = "Chris' corner";

Я хочу, чтобы это было:

var varTitle = "Chris' corner";
Источник

18 ответов

Решение

Вы можете попробовать что-то вроде:

var Title = $('<textarea />').html("Chris&apos; corner").text();
console.log(Title);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JS Fiddle.

Более интерактивная версия:

$('form').submit(function() {
  var theString = $('#string').val();
  var varTitle = $('<textarea />').html(theString).text();
  $('#output').text(varTitle);
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
  <fieldset>
    <label for="string">Enter a html-encoded string to decode</label>
    <input type="text" name="string" id="string" />
  </fieldset>
  <fieldset>
    <input type="submit" value="decode" />
  </fieldset>
</form>

<div id="output"></div>

JS Fiddle.

Источник

Я рекомендую не использовать код JQuery, который был принят в качестве ответа. Хотя он не вставляет строку для декодирования на страницу, он вызывает создание таких вещей, как сценарии и элементы HTML. Это намного больше кода, чем нам нужно. Вместо этого я предлагаю использовать более безопасную и оптимизированную функцию.

var decodeEntities = (function() {
  // this prevents any overhead from creating the object each time
  var element = document.createElement('div');

  function decodeHTMLEntities (str) {
    if(str && typeof str === 'string') {
      // strip script/html tags
      str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
      str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
      element.innerHTML = str;
      str = element.textContent;
      element.textContent = '';
    }

    return str;
  }

  return decodeHTMLEntities;
})();

http://jsfiddle.net/LYteC/4/

Чтобы использовать эту функцию, просто позвоните decodeEntities("&amp;") и он будет использовать те же базовые методы, что и версия jQuery, но без накладных расходов jQuery и после очистки HTML-тегов во входных данных. См . Комментарий Майка Самуэля о принятом ответе о том, как отфильтровать теги HTML.

Эту функцию можно легко использовать как плагин jQuery, добавив следующую строку в ваш проект.

jQuery.decodeEntities = decodeEntities;
Источник

Как сказал Роберт К., не используйте jQuery.html(). Text() для декодирования html-сущностей, поскольку это небезопасно, поскольку пользовательский ввод никогда не должен иметь доступа к DOM. Читайте о XSS, почему это небезопасно.

Вместо этого попробуйте библиотеку утилитарных поясов http://underscorejs.org/, которая поставляется с методами escape и unescape:

_.escape (строка)

Экранирует строку для вставки в HTML, заменяя &, <, >, ", `, а также ' персонажи.

_.escape('Curly, Larry & Moe');
=> "Curly, Larry &amp; Moe"

_.unescape (строка)

Противоположность побега, заменяет &amp;, &lt;, &gt;, &quot;, &#96; а также &#x27; с их неуправляемыми коллегами.

_.unescape('Curly, Larry &amp; Moe');
=> "Curly, Larry & Moe"

Чтобы поддержать декодирование большего количества символов, просто скопируйте метод Underscore unescape и добавьте больше символов на карту.

Источник

Это мой любимый способ декодирования символов HTML. Преимущество использования этого кода в том, что теги также сохраняются.

function decodeHtml(html) {
    var txt = document.createElement("textarea");
    txt.innerHTML = html;
    return txt.value;
}

Пример: http://jsfiddle.net/k65s3/

Входные данные:

Entity:&nbsp;Bad attempt at XSS:<script>alert('new\nline?')</script><br>

Выход:

Entity: Bad attempt at XSS:<script>alert('new\nline?')</script><br>
Источник

Вот быстрый метод, который не требует создания div и декодирует наиболее распространенные экранированные символы HTML:

function decodeHTMLEntities(text) {
    var entities = [
        ['amp', '&'],
        ['apos', '\''],
        ['#x27', '\''],
        ['#x2F', '/'],
        ['#39', '\''],
        ['#47', '/'],
        ['lt', '<'],
        ['gt', '>'],
        ['nbsp', ' '],
        ['quot', '"']
    ];

    for (var i = 0, max = entities.length; i < max; ++i) 
        text = text.replace(new RegExp('&'+entities[i][0]+';', 'g'), entities[i][1]);

    return text;
}
Источник

Вот другая версия:

function convertHTMLEntity(text){
    const span = document.createElement('span');

    return text
    .replace(/&[#A-Za-z0-9]+;/gi, (entity,position,text)=> {
        span.innerHTML = entity;
        return span.innerText;
    });
}

console.log(convertHTMLEntity('Large &lt; &#163; 500'));

Источник

Вдохновленная решением Роберта К., эта версия не снимает HTML-теги и так же безопасна.

var decode_entities = (function() {
    // Remove HTML Entities
    var element = document.createElement('div');

    function decode_HTML_entities (str) {

        if(str && typeof str === 'string') {

            // Escape HTML before decoding for HTML Entities
            str = escape(str).replace(/%26/g,'&').replace(/%23/g,'#').replace(/%3B/g,';');

            element.innerHTML = str;
            if(element.innerText){
                str = element.innerText;
                element.innerText = '';
            }else{
                // Firefox support
                str = element.textContent;
                element.textContent = '';
            }
        }
        return unescape(str);
    }
    return decode_HTML_entities;
})();
Источник

JQuery предоставляет способ кодирования и декодирования HTML-объектов.

Если вы используете тег

, он удалит все html.

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

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

Если вы используете тег "