Преобразование очищенного HTML обратно в отображаемый HTML

Question

Я получаю html-данные из базы данных, которая была очищена.

В основном то, что я получаю, выглядит примерно так:

<div class="someclass"><blockquote>
  <p>something here.</p>
</blockquote>

И так далее. Поэтому, если я пытаюсь отобразить его, он отображается как

<div class="someclass"><blockquote> <p>something here</p> </blockquote>

Я хочу преобразовать его в правильный HTML перед отображением, чтобы содержимое отображалось правильно, без тегов.

Какой самый простой способ сделать это с помощью JavaScript?

Просто хочу отметить, что я работаю в Adobe AIR. Так что у меня нет альтернатив.

Answer 1

Вы можете создать элемент, назначить закодированный HTML-код его innerHTML и извлечь nodeValue из текстового узла, созданного при вставке.

function htmlDecode(input){
  var e = document.createElement('div');
  e.innerHTML = input;
  return e.childNodes[0].nodeValue;
}

htmlDecode('<div class="someclass"><blockquote> <p>" ' +
           'something" here.</p>Q</blockquote>')

// returns :
// "<div class="someclass"><blockquote> <p>"something" here.</p>Q</blockquote>"

Обратите внимание, что этот метод должен работать со всеми символьными объектами HTML .

Answer 2

Это может помочь в одно мгновение:

String.prototype.deentitize = function() {
    var ret = this.replace(/>/g, '>');
    ret = ret.replace(/&lt;/g, '<');
    ret = ret.replace(/&quot;/g, '"');
    ret = ret.replace(/&apos;/g, "'");
    ret = ret.replace(/&amp;/g, '&');
    return ret;
};

Answer 3

https://lodash.com/docs/4.17.10#unescape

_.unescape('fred, barney, & pebbles');
// => 'fred, barney, & pebbles'

Answer 4

Пример из CMS, хотя и хороший, не принимает во внимание, что, например, «скриптовые» вещи будут анализироваться в div и затем вообще не возвращаться.

Итак, я написал следующее простое расширение для прототипа строк

if (!String.prototype.unescapeHTML) {
    String.prototype.unescapeHTML = function() {
        return this.replace(/&[#\w]+;/g, function (s) {
            var entityMap = {
                "&": "&",
                "&lt;": "<",
                "&gt;": ">",
                '&quot;': '"',
                '&#39;': "'",
                '&#x2F;': "/"
            };

            return entityMap[s];
        });
    };
}

Это сохранит "сценарии" в тексте и не удалит их

Пример

I will make things bad <b>because evil</b>

<script language="JavaScript">console.log('EVIL CODE');</script>

удалит часть «script» в стиле CMS, но со строкой unescapeHTML она сохранит ее

Answer 5

Я не уверен, почему вы захотите сделать это с JavaScript, если только это не JS на стороне сервера ... но в любом случае, вы можете просто заменить > и < их эквивалентами, используя замену строки функция.

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