js实现htmlencode

HTML 编码的实现方法

在 JavaScript 中实现 HTML 编码（HTMLEncode）通常是为了防止 XSS（跨站脚本攻击），将特殊字符转换为对应的 HTML 实体。以下是几种常见的实现方式：

使用 innerHTML 和 textContent 进行编码

通过创建一个虚拟的 DOM 元素，利用 textContent 属性自动转义特殊字符，再通过 innerHTML 获取编码后的结果：

function htmlEncode(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

// 示例
const encoded = htmlEncode('<script>alert("xss")</script>');
// 输出: "&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;"

手动替换特殊字符

通过正则表达式或字符串替换，将关键字符转换为对应的 HTML 实体：

function htmlEncode(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

// 示例
const encoded = htmlEncode('Test "quote" & <tag>');
// 输出: "Test &quot;quote&quot; &amp; &lt;tag&gt;"

使用 encodeURIComponent 结合额外处理

encodeURIComponent 可以转义大部分特殊字符，但需额外处理单引号和斜杠：

function htmlEncode(str) {
  return encodeURIComponent(str)
    .replace(/'/g, '%27')
    .replace(/\//g, '%2F');
}

// 示例
const encoded = htmlEncode('<a href="/test">link</a>');
// 输出: "%3Ca%20href%3D%22%2Ftest%22%3Elink%3C%2Fa%3E"

使用第三方库

现代前端开发中，可以使用现成的库如 lodash 或 he 实现更全面的编码：

// 使用 he 库（需安装）
import he from 'he';
const encoded = he.encode('<div>Hello</div>');
// 输出: "&lt;div&gt;Hello&lt;/div&gt;"

注意事项

• 如果内容需要插入到 HTML 属性中，需额外转义单引号（'）和双引号（"）。
• 对于富文本内容（如用户输入的 HTML），需使用专门的净化库（如 DOMPurify）而非简单编码。
• 编码后的内容需根据使用场景决定是否配合其他安全措施（如 CSP）。