Собственный JavaScript или ES6 способ кодирования и декодирования объектов HTML?

Есть ли собственный способ кодирования или декодирования HTML-объектов с использованием JavaScript или ES6? Например, < будет закодирован как <. Существуют библиотеки типа html-entities для Node.js, но похоже, что в JavaScript должно быть что-то встроенное в JavaScript, который уже справляется с этой общей потребностью.

Ответ 1

В JavaScript API нет встроенной функции, которая преобразует символы ASCII в эквивалент "html-entity". Вот начало решения и простой трюк, который вам может понравиться

Ответ 2

Хорошая функция, использующая es6 для выхода из HTML:

const escapeHTML = str => str.replace(/[&<>'"]/g, 
  tag => ({
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      "'": '&#39;',
      '"': '&quot;'
    }[tag] || tag));

Ответ 3

Чтобы декодировать html, я просто использую тег <pre> и эту функцию:

function convertHTML(str) {
    var entityPairs = [
        {character: '&', html: '&amp;'},
        {character: '<', html: '&lt;'},
        {character: '>', html: '&gt;'},
        {character: "'", html: '&apos;'},
        {character: '"', html: '&quot;'},
    ];

    entityPairs.forEach(function(pair){
        var reg = new RegExp(pair.character, 'g');
        str = str.replace(reg, pair.html);
    });
    return str;
}

//var or file.html from Ajax
var str = `
<head> 
  <title>OK</title>
</head>`; 
document.getElementById("preHtml").innerHTML = convertHTML(str);

<pre id="preHtml"></pre>

Ответ 4

Бросьте свой собственный ^{(caveat - use HE instead for most use cases)}

Для чистого JS без библиотеки вы можете кодировать и декодировать HTML-объекты, используя чистый Javascript, например:

let encode = str => {
  let buf = [];

  for (var i = str.length - 1; i >= 0; i--) {
    buf.unshift(['&#', str[i].charCodeAt(), ';'].join(''));
  }

  return buf.join('');
}

let decode = str => {
  return str.replace(/&#(\d+);/g, function(match, dec) {
    return String.fromCharCode(dec);
  });
}

Usages:

encode("Hello > © <") // "&#72;&#101;&#108;&#108;&#111;&#32;&#62;&#32;&#169;&#32;&#60;"
decode("Hello &gt; &copy; &#169; &lt;") // "Hello &gt; &copy; © &lt;"

Однако,, вы можете видеть, что у этого подхода есть пара недостатков:

Он кодирует даже безопасные символы H → H
Он может декодировать числовые коды (не в астральной плоскости), но ничего не знает о полном списке html-сущностей/именованных кодов символов, поддерживаемых браузерами, например >

Используйте библиотеку HE (HTML-объекты)

Поддержка всех стандартных именованных ссылок на символы
Поддержка юникода
Работает с неоднозначными амперсандами
Автор Матиас Биненс

Использование:

he.encode('foo © bar ≠ baz 𝌆 qux'); 
// Output : 'foo &#xA9; bar &#x2260; baz &#x1D306; qux'

he.decode('foo &copy; bar &ne; baz &#x1D306; qux');
// Output : 'foo © bar ≠ baz 𝌆 qux'