js实现htmlencode

HTML 编码的实现方法

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

方法一：使用原生 DOM 方法

通过创建文本节点并获取其 innerHTML 实现编码：

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

方法二：字符替换

手动替换关键字符：

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

方法三：使用 TextEncoder API

现代浏览器支持的编码方式：

function htmlEncode(str) {
  const encoder = new TextEncoder();
  const encoded = encoder.encode(str);
  return Array.from(encoded, byte => `&#${byte};`).join('');
}

方法四：使用第三方库

例如使用 lodash 的 _.escape 方法：

// 需先引入 lodash
const encodedStr = _.escape('要编码的字符串');

注意事项

1. 对于用户输入内容显示在 HTML 中时，必须进行编码
2. 编码后的内容如果需要在 JavaScript 中使用，可能需要额外处理
3. 不同场景可能需要不同的编码级别，例如属性值需要额外编码引号

性能比较

对于高频使用的场景，方法二的字符替换通常性能最优。方法一虽然简洁但涉及 DOM 操作，方法三兼容性较新。根据实际需求选择合适方案。