原生JavaScript或ES6方式编码和解码HTML实体？

Question

是否存在使用JavaScript或ES6编码或解码HTML entities的本机方式？例如，<将被编码为<。 Node.js有像html-entities这样的库，但感觉应该有一些内置于JavaScript中的东西已经处理了这个常见的需求。

Answer 1

JavaScript API中没有将ASCII字符转换为其“html-entities”等效字符的本机函数。 这是您可能想要的beginning of a solution和easy trick

Answer 2

使用es6来转义html的不错功能：

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

Answer 3

滚动自己的^{（caveat-在大多数情况下，使用HE代替）}

对于不带库的纯JS，您可以这样Encode and Decode HTML entities using pure 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);
  });
}

用法：

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
• 它可以解码数字代码（不在星体平面中），但是对full list of html entities / named character codes supported by browsers一无所知，例如>

---

使用HE Library（HTML实体）

• 支持all standardized named character references
• 支持unicode
• 与ambiguous ampersands一起使用
• 由Mathias Bynens
撰写

用法：

he.encode('foo © bar ≠ baz ? qux'); 
// Output : 'foo © bar ≠ baz 𝌆 qux'

he.decode('foo © bar ≠ baz 𝌆 qux');
// Output : 'foo © bar ≠ baz ? qux'

相关问题

• How to convert characters to HTML entities using plain JavaScript
• Encode html entities in javascript
• Unescape HTML entities in Javascript?
• HTML Entity Decode
• What's the right way to decode a string that has special HTML entities in it?
• Strip HTML from Text JavaScript

Answer 4

对于unescape HTML实体，您的浏览器很聪明，将为您做到

方法1

_unescape(html: string) :string { 
   const divElement = document.createElement("div");
   divElement.innerHTML = html;
   return divElement.textContent || tmp.innerText || "";
}

方法2

_unescape(html: string) :string {
     let returnText = html;
     returnText = returnText.replace(/ /gi, " ");
     returnText = returnText.replace(/&/gi, "&");
     returnText = returnText.replace(/"/gi, `"`);
     returnText = returnText.replace(/&lt;/gi, "<");
     returnText = returnText.replace(/&gt;/gi, ">");
     return returnText;
}

您还可以使用underscore或lodash的unescape方法，但这会忽略 并仅处理&，<，> ，"和'个字符。