在 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;');
}