找到一个更好的解决方案是很有趣的:

var escapeHTML = function(unsafe) {
  return unsafe.replace(/[&<"']/g, function(m) {
    switch (m) {
      case '&':
        return '&amp;';
      case '<':
        return '&lt;';
      case '"':
        return '&quot;';
      default:
        return '&#039;';
    }
  });
};

我没有解析>，因为它没有破坏结果中的XML/HTML代码。

以下是基准测试:http://jsperf.com/regexpairs 此外，我还创建了一个通用转义函数:http://jsperf.com/regexpairs2

DOM元素支持通过赋值innerText将文本转换为HTML。innerText不是一个函数，但是给它赋值就好像文本被转义了一样。

document.querySelectorAll('#id')[0].innerText = 'unsafe " String >><>';

你可以使用jQuery的.text()函数。

例如:

http://jsfiddle.net/9H6Ch/

来自jQuery文档关于.text()函数:

我们需要意识到这种方法 转义提供的字符串 必须这样才能渲染 正确的HTML格式。为了做到这一点，它调用 DOM方法。createtextnode () 不会将字符串解释为HTML。

以前版本的jQuery文档是这样写的(强调添加):

我们需要知道这个方法在必要时转义提供的字符串，以便在HTML中正确呈现。为此，它调用DOM方法. createtextnode()，该方法将特殊字符替换为对应的HTML实体(例如&amplt表示<)。

照章办事

OWASP建议“[e]除字母数字字符外，[您应该]转义所有ASCII值小于256的字符，使用&#xHH;格式(或命名实体，如果可用)，以防止切换[一个]属性。

这里有一个函数可以做到这一点，并有一个用法示例:

不安全功能 return键unsafe replace(。 - [u0000 - u002F \ u003A \ u0040 u005B - u0060 \ u007B \ u00FF] / g, c => '&#' + (' 1000 +。’这是c . charCodeAt(+ 0)。切片(四)?” ） 的 querySelector(“div”)的文件。innerHTML = <span class= + escapeHTML(' faeclass ' onclick="alert " ("test") + > +。’” escapeHTML(“<脚本>alert”(“attributes检查员”)\u003C/脚本>' ”< /跨越> < div > < / div >

您应该亲自验证我提供的实体范围，以验证函数的安全性。你也可以使用这个正则表达式，它具有更好的可读性，应该涵盖相同的字符代码，但在我的浏览器中性能下降了10%:

/(?![0-9A-for-z]）[\u0000-\u00FF]/g

这是目前为止我见过的最快的方法。另外，它不需要在页面上添加、删除或更改元素。

function escapeHTML(unsafeText) {
    let div = document.createElement('div');
    div.innerText = unsafeText;
    return div.innerHTML;
}

这里有一个几乎适用于所有浏览器的解决方案:

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

如果你只支持现代浏览器(2020+)，那么你可以使用新的replaceAll函数:

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
}