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

  2. 貼士文章
  3. JavaScript 貼士
  4. 在 JavaScript 中編碼 HTML 實體的簡單解決方案
Muhammad Muzammil Hussain 2023年1月30日 2022年5月11日
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;');
}