Javascript 转义 HTML

在Web开发中，我们经常需要将一些特殊字符转义为HTML实体，以便在HTML页面中正确地显示它们。比如：

| 字符 | 实体名称 | 实体编号 | | ---- | -------- | -------- | | " | " | " | | & | & | & | | < | < | < | | > | > | > | | ' | ' | ' |

在javascript中，我们可以使用一些函数来将字符串中的这些字符转义为对应的HTML实体。

escapeHtml函数

这是一个简单的函数，可以将字符串中的双引号、单引号、大于号、小于号和和符号转义为HTML实体。代码如下：

function escapeHtml(str) {
  return str.replace(/[\u00A0-\u9999<>&'"]/gim, function(i) {
    return '&#'+i.charCodeAt(0)+';';
  });
}

使用示例：

const html = '<p>"Hello World!"</p>';
const escapedHtml = escapeHtml(html);
console.log(escapedHtml); // 输出: '&lt;p&gt;&quot;Hello World!&quot;&lt;/p&gt;'

使用第三方库

除了手写函数，我们还可以使用许多第三方库来进行HTML转义。常用的库有：

• lodash.escape
• he

这些库已经为我们实现了复杂和完备的HTML实体转义，可以直接使用。例如，lodash.escape的用法示例如下：

const lodash = require('lodash');

const html = 'Testing "double quotes" and \'single quotes\'';
const escapedHtml = lodash.escape(html);
console.log(escapedHtml); // 输出: 'Testing "double quotes" and 'single quotes''

注意事项

在使用HTML实体时，需要注意以下几点：

• 要将转义后的HTML实体插入到HTML代码中，需要使用innerHTML或textContent属性
• 不要使用“+”符号将HTML实体字符串与其它字符串连接，而应该使用字符串模板或拼接数组
• 注意不要在HTML中插入恶意脚本或标签，否则可能会产生安全漏洞

综上所述，HTML转义是Web开发中的常见需求，我们可以使用手写函数或第三方库来实现。在使用HTML实体时，需要注意安全和性能问题，在前端工程化和Web安全等领域，有许多深入的研究和实践值得我们学习。