使用 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 實體。