在 JavaScript 中編碼 HTML 實體的簡單解決方案

  2. 貼士文章
  3. JavaScript 貼士
  4. 在 JavaScript 中編碼 HTML 實體的簡單解決方案
Muhammad Muzammil Hussain 2023年10月12日
JavaScript JavaScript Encode
  1. 使用 String.prototype.toHtmlEntities() 將字串編碼為 HTML 實體
  2. 使用 String.fromHtmlEntities() 對來自 HTML 實體的字串進行編碼
  3. 在 JavaScript 中使用 unescapeHTML() 函式編碼 HTML 實體
在 JavaScript 中編碼 HTML 實體的簡單解決方案

本文介紹了在 JavaScript 中對 HTML 實體進行編碼的最佳解決方案。下面的示例程式碼將任何字串轉換為 HTML 實體並返回字串原型。

使用 String.prototype.toHtmlEntities() 將字串編碼為 HTML 實體

在以下 JavaScript 程式碼中，

  • String.prototype.toHtmlEntities = function() 在 .replace() 方法的幫助下返回一個包含 HTML 實體的字串。
  • .replace() 查詢給定字串的值並將其更改為新的所需/指定值。
  • .prototype 是 JavaScript 中的一個物件。預設情況下，它與函式和物件相關聯。
  • String.charCodeAt() 返回在字串中描述索引的字元的 Unicode。
/**
 * Conversion of string to HTML entities
 */
String.prototype.toHtmlEntities = function() {
  return this.replace(/./gm, function(s) {
    // return "&#" + s.charCodeAt(0) + ";";
    return (s.match(/[a-z0-9\s]+/i)) ? s : '&#' + s.charCodeAt(0) + ';';
  });
};

使用 String.fromHtmlEntities() 對來自 HTML 實體的字串進行編碼

在以下 JavaScript 語句中，我們建立了：

  • String.fromHtmlEntities = function(string) 接收任何包含 HTML 實體的 string。
  • 在示例中，.replace() 中給定的字串值是 /&#\d+;/gm，它被替換為一個 function(s)，返回字串 String.fromCharCode。
  • String.fromCharCode 是一種返回由序列生成的字串的方法。
/**
 * Creation of string from HTML entities
 */
String.fromHtmlEntities = function(string) {
  return (string + '').replace(/&#\d+;/gm, function(s) {
    return String.fromCharCode(s.match(/\d+/gm)[0]);
  })
};

之後，使用如下功能。

  • 這是一個變數 var str，它被初始化為一個包含特殊字元的字串 (†®¥¨©˙∫ø…ˆƒ∆...)。
  • 函式 .toHtmlEntities 使用這個特殊字串 var str 被呼叫。
  • console.log 是 JavaScript 的預設函式，用於在日誌框中顯示值。
var str = "Dummy Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést".toHtmlEntities();
console.log("Entities:", str);
console.log("String:", String.fromHtmlEntities(str));

控制檯的輸出如下。

"Entities:"
"Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést"
"String:"
"Dummy Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést"

在 JavaScript 中使用 unescapeHTML() 函式編碼 HTML 實體

你可以線上或離線在 JavaScript 編譯器上檢查這些函式。它可以幫助你顯示 string 而無需瀏覽器讀取其 HTML. 這可以用另一種方式來完成。你可以建立 HTML 實體的物件。

  • 變數 var htmlEntities 包含特殊字元和符號的物件。
  • unescapeHTML(str) 函式在 .replace() 條件的幫助下接收字串和返回值。
var htmlEntities = {
  nbsp: ' ',
  cent: '¢',
  pound: '£',
  yen: '¥',
  euro: '€',
  copy: '©',
  reg: '®',
  lt: '<',
  gt: '>',
  quot: '"',
  amp: '&',
  apos: '\''
};

function unescapeHTML(str) {
  return str.replace(/\&([^;]+);/g, function(entity, entityCode) {
    var match;

    if (entityCode in htmlEntities) {
      return htmlEntities[entityCode];
      /*eslint no-cond-assign: 0*/
    } else if (match = entityCode.match(/^#x([\da-fA-F]+)$/)) {
      return String.fromCharCode(parseInt(match[1], 16));
      /*eslint no-cond-assign: 0*/
    } else if (match = entityCode.match(/^#(\d+)$/)) {
      return String.fromCharCode(~~match[1]);
    } else {
      return entity;
    }
  });
};

JavaScript 中沒有任何原生版本的 HTML 實體。如果你只需要基礎知識，以便瀏覽器不會將其解釋為 HTML。PHP.js 專案 是一項將每個 PHP 的本地能力移植到 JavaScript 的任務，也包含一個模型。沿著這些思路，我一直保持直截了當，並利用了下面的內容：

function EntitiesHtml(string) {
  return String(string)
      .replace(/&/g, '&amp;')
      .replace(/>/g, '&gt;')
      .replace(/</g, '&lt;')
      .replace(/"/g, '&quot;');
}