使用 JavaScript 解码 HTML 实体

1. 使用 Vanilla JavaScript 解码 HTML 实体
2. 使用 he 库解码 HTML 实体

HTML 实体是一组字符代码，用于表示 HTML 保留的字符。它以与号&开头，以分号 ; 结尾。此图像为你提供 HTML 字符代码列表及其各自的实体名称。

本文将介绍如何使用 JavaScript 解码以下字符串。该字符串包含各种字符，如 a、b、c，以及 HTML 字符实体，如 &nbps;、<、' 等。

var str = 'Give&nbsp;us some&#39;<h2>time</h2>&#39; &amp; space <br> Please';

整个字符串存储在 str 变量中。有两种方法可以解码 HTML 实体。一种方法是使用 vanilla JavaScript，另一种方法是使用外部库。

我们将使用的外部库是 he 库。这是用于编码和解码 HTML 实体的最常用的库之一。

使用 Vanilla JavaScript 解码 HTML 实体

解码 HTML 实体的最简单方法之一是使用原生 JavaScript。用于实现此目的的标签是 textarea。

首先，我们将创建一个名为 decodeEntity() 的函数，它将字符串作为输入。我们将把 str 变量作为参数传递给这个函数。

在这个函数中，我们将首先使用 document.createElement() 创建一个 textarea 元素，然后将这个变量的引用存储在 textarea 变量中。

function decodeEntity(inputStr) {
  var textarea = document.createElement('textarea');
  textarea.innerHTML = inputStr;
  return textarea.value;
}
console.log(decodeEntity(str));

输出：

var str = "Give&nbsp;us some&#39;<h2>time</h2>&#39; &amp; space <br> Please";
var he = require('he');
console.log(he.decode(str));

我们将使用 innerHTML 属性将字符串 str 存储在 textarea 中。在这一步，浏览器会自动将 str 转换回其正确的 HTML 格式。所有的 HTML 实体都将被解码，所有的 HTML 标签都将被保留。

最后，使用 textarea.value，我们将返回解码后的字符串值。

使用 he 库解码 HTML 实体

he 是一个外部库，用于编码和解码用 JavaScript 编写的 HTML 实体。该库可以通过运行以下命令轻松下载。必须在你的系统上安装 node.js（任何版本）才能成功执行以下命令。

要了解有关 he 库的更多信息，请访问此链接。

npm install he

在我们安装完 he 库之后，我们可以使用 require 函数将该库导入到我们的 JavaScript 文件中，并将库的名称 he 作为字符串传递给该函数。

然后我们将把它的引用存储在一个名为 he 的变量中。你可以使用任何名称来表示此变量。

var str = 'Give&nbsp;us some&#39;<h2>time</h2>&#39; &amp; space <br> Please';
var he = require('he');
he.decode(str);

he 库有一个名为 decode() 的函数，它接受两个参数 html 和 options。

html 参数是一个由编码的 HTML 实体组成的字符串，必须传递。options 参数是可选的，它有两个值 isAttributeValue 和 strict。我们不需要第二个参数，所以我们不会使用它。

我们将上面提到的 str 变量传递给 he.decode() 函数，结果输出如下。

Give us some '<h2>time</h2>'&space<br>Please

使用外部 JavaScript 库很容易解码 HTML 实体。