【前端面试题-20】js如何对输出内容进行HTML编码

在JavaScript中，对输出内容进行HTML编码通常是为了防止XSS攻击（跨站脚本攻击），即将特殊字符转换成HTML实体的形式，避免它们被浏览器解析为HTML或JavaScript代码。以下是一些常见的HTML编码方法：

使用内建函数 encodeURIComponent() 和 encodeURI()

虽然这两个函数主要用于编码URI组件而不是HTML内容，但在某些场景下也可以用来对HTML内容中的特殊字符进行编码，特别是对于属性值，推荐使用encodeURIComponent：

var str = '<script>alert("Hello, World!");</script>';
var encodedStr = encodeURIComponent(str);
console.log(encodedStr); // "%3Cscript%3Ealert(%22Hello%2C%20World%21%22)%3B%3C/script%3E"

// 注意：这会编码URI特殊字符，但不包括单引号、双引号和尖括号

使用自定义函数或库

为了对HTML内容进行全面的HTML实体编码，可以编写一个简单的函数，或者利用现成库的功能，例如：

自定义函数示例：

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

var rawStr = 'This is "<b>bold</b>" and "single \'quote".';
var encodedStr = htmlEncode(rawStr);
console.log(encodedStr); // "This is &quot;&lt;b&gt;bold&lt;/b&gt;&quot; and &quot;single &#39;quote&quot;."

使用库（例如 jQuery 提供的 $.fn.htmlPrefilter 或其他第三方库）：

// jQuery 示例（假设已引入jQuery库）
var unsafeStr = '<script>alert("Unsafe!");</script>';
var safeStr = $('<div />').text(unsafeStr).html(); // jQuery自动进行了转义
console.log(safeStr); // "&lt;script&gt;alert(&quot;Unsafe!&quot;);&lt;/script&gt;"

ES6+ 使用模板字符串配合DOM API

如果你有一个安全的上下文环境，例如在Vue.js或React等现代框架中，可以利用模板字符串结合DOM APIs（如textContent或innerText）来安全地插入HTML内容：

const unsafeStr = '<script>alert("Unsafe!");</script>';
const div = document.createElement('div');
div.textContent = unsafeStr; // 这里会自动进行适当的HTML转义
const safeHtml = div.innerHTML;
console.log(safeHtml); // "&lt;script&gt;alert(&quot;Unsafe!&quot;);&lt;/script&gt;"

总之，在实际应用中，选择哪种方式取决于具体需求和所使用的框架或库。如果是纯JavaScript环境且没有现成的安全插入机制，建议使用自定义函数来确保内容被正确地HTML编码。