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

Question

是否有使用 JavaScript 或 ES6 编码或解码 HTML 实体的本机方法？例如，

<

将被编码为

<

。 Node.js 有像

html-entities

这样的库，但感觉 JavaScript 中应该内置一些东西来满足这种常见需求。

Answer 1

使用 es6 转义 html 的好函数：

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

Answer 2

自己动手^{（警告 - 在大多数用例中使用 HE 代替）}

对于没有库的纯 JS，您可以使用纯 Javascript 编码和解码 HTML 实体，如下所示：

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

• 它可以解码数字代码（不在星体层中），但不知道任何有关浏览器支持的html实体/命名字符代码的完整列表，例如

  >

---

使用 HE 库（Html 实体）

• 支持所有标准化命名字符引用
• 支持unicode
• 适用于不明确的＆符号
• 作者：马蒂亚斯·拜恩斯

用法：

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

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

相关问题

• 如何使用纯 JavaScript 将字符转换为 HTML 实体
• 在 javascript 中编码 html 实体
• 在 Javascript 中取消转义 HTML 实体？
• HTML 实体解码
• 解码包含特殊 HTML 实体的字符串的正确方法是什么？
• 从文本 JavaScript 中剥离 HTML

Answer 3

JavaScript API 中没有将 ASCII 字符转换为其等效的“html-entities”的本机函数。 这是一个解决方案的开始和一个您可能喜欢的简单技巧

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 方法，但这会忽略  

 并仅处理 

&

、

<

、

>

、

"

 和 

'

 字符。

Answer 5

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

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

Answer 6

简单的 htmlEncode 和 htmlDecode

HTML 编码功能

  function encodeHtml(str) {
    let buf = [];

    for (var i = str.length - 1; i >= 0; i--) {
      if (!(/^[a-zA-Z0-9]$/.test(str[i])))
        buf.unshift(['&#', str[i].charCodeAt(), ';'].join(''));
      else
        buf.unshift(str[i])
    }

    return buf.join('');
  }

HTML解码功能

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