原生 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

JavaScript API 中沒有將 ASCII 字符轉換為它們的“html-entities”等價物的本機函數。 這是您可能喜歡的解決方案和簡單技巧的開始

Answer 3

自己動手^{（警告 - 在大多數用例中使用 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 實體）

• 支持所有標准化命名字符引用
• 支持單碼
• 使用不明確的 & 符號
• 馬蒂亞斯·拜恩斯編劇的作品

用法：

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 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;
}

您也可以使用下划線或lodash的 unescape 方法，但這會忽略  並且只處理& ， < , > , " , 和' 字符。

Answer 5

@rasafel 提供的答案（編碼）的反向（解碼）：

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