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

【问题标题】：Native JavaScript or ES6 way to encode and decode HTML entities?编码和解码 HTML 实体的原生 JavaScript 或 ES6 方式？
【发布时间】：2016-10-26 13:37:16
【问题描述】：

是否有使用 JavaScript 或 ES6 编码或解码 HTML entities 的本地方法？例如，&lt; 将被编码为&lt;。 Node.js 有类似 html-entities 这样的库，但感觉应该有一些内置在 JavaScript 中的东西已经可以处理这种常见需求。

【问题讨论】：

没有原生的 JavaScript 工具。 JavaScript 这种编程语言与 HTML 并没有太大的关系，尽管在 String 原型上有愚蠢的 API。
@Pointy 我认为一般来说你是对的。感觉就像 JavaScript 在 Web 上如此广泛使用，而 HTML 实体是 Web 开发的一个共同特征，在过去的十年中，类似的东西会进入该语言。
我认为这个问题将受益于明确包括浏览器和nodejs标准库中存在这样的功能。

标签： javascript node.js html-entities

【解决方案1】：

一个很好的使用 es6 转义 html 的函数：

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

【讨论】：

+1 既美观又简单，并且无需依赖某些 3rd-party 代码即可工作......尽管由于正则表达式，后备是不必要的

【解决方案2】：

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

【讨论】：

感谢我想要的东西不存在的答案（尽管可能很不方便）。你可以发布一个不同的解决方案吗？或者只是删除解决方案链接？该链接解决方案既不解码 HTML 实体，也不处理 &amp; 与数字编码。

【解决方案3】：

滚动你自己的^{（警告 - 在大多数用例中使用 HE）}

对于没有lib的纯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 → &#72;
它可以解码数字代码（不在星光层），但对full list of html entities / named character codes supported by browsers 一无所知，例如&gt;

使用HE Library（Html 实体）

支持all standardized named character references
支持unicode
适用于ambiguous ampersands
作者Mathias Bynens

用法：

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'

相关问题

【讨论】：

【解决方案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(/&nbsp;/gi, " ");
     returnText = returnText.replace(/&amp;/gi, "&");
     returnText = returnText.replace(/&quot;/gi, `"`);
     returnText = returnText.replace(/&lt;/gi, "<");
     returnText = returnText.replace(/&gt;/gi, ">");
     return returnText;
}

您也可以使用underscore 或lodash 的unescape 方法，但这会忽略&nbsp; 并仅处理&amp;、&lt;、&gt;、&quot; 和&#39; 字符。

【讨论】：

【解决方案5】：

@rasafel 提供的答案（编码）的反向（解码）：

const decodeEscapedHTML = (str) =>
  str.replace(
    /&(\D+);/gi,
    (tag) =>
      ({
        '&amp;': '&',
        '&lt;': '<',
        '&gt;': '>',
        '&#39;': "'",
        '&quot;': '"',
      }[tag]),
  )

【讨论】：

滚动你自己的（警告 - 在大多数用例中使用 HE）

使用HE Library（Html 实体）

相关问题

滚动你自己的^{（警告 - 在大多数用例中使用 HE）}