JS多种方法实现HTML代码转换为HTML实体编码（如将＜转为&lt；）

在 JavaScript 中，将 HTML 代码转换为 HTML 实体编码（如将<转为<）有多种方法。以下是几种常见实现及其对比：

方法一：使用 DOM API（推荐）

通过创建临时元素并设置textContent，利用浏览器自动编码的特性：javascript

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

// 示例
console.log(escapeHtmlUsingDom('<33></44>')); 
// 输出: &lt;33&gt;&lt;/44&gt;

方法二：正则表达式替换（高性能）

手动替换主要的 HTML 特殊字符：javascript

function escapeHtmlUsingRegex(html) {
    return html
        .replace(/&/g, '&')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}

// 示例
console.log(escapeHtmlUsingRegex('<33></44>')); 
// 输出: &lt;33&gt;&lt;/44&gt;

方法三：String.prototype.replace + 对象映射

使用对象映射更简洁地处理多个字符：javascript

function escapeHtmlUsingMap(html) {
    const entityMap = {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    
    return html.replace(/[&<>"']/g, char => entityMap[char]);
}

// 示例
console.log(escapeHtmlUsingMap('<33></44>')); 
// 输出: &lt;33&gt;&lt;/44&gt;

方法四：DOMPurify（安全净化 HTML）

如果需要同时净化 HTML（防止 XSS 攻击），可以使用DOMPurify：

// 需先引入DOMPurify库
const clean = DOMPurify.sanitize(html, { RETURN_DOM_FRAGMENT: true });
const escapedHtml = clean.textContent;

性能对比

完整示例javascript

// 选择一种方法使用
const escapeHtml = escapeHtmlUsingDom; // 或其他方法

// 使用示例
const originalText = '<script>alert("XSS")</script><33></44>';
const escapedText = escapeHtml(originalText);

console.log(escapedText); 
// 输出: &lt;script&gt;alert("XSS")&lt;/script&gt;&lt;33&gt;&lt;/44&gt;

// 显示在页面中（安全渲染）
document.getElementById('output').textContent = escapedText;

注意事项

1. 特殊字符范围：基本的 HTML 转义通常处理&, <, >, ", '。
2. 性能考虑：正则表达式方法在大量数据处理时性能最优。
3. 安全净化：如果需要防止 XSS 攻击，推荐结合 DOMPurify 使用。

根据您的具体需求选择合适的方法即可。