你可能不需要这样的函数。由于您的代码已经在浏览器中*，您可以直接访问DOM，而不是生成和编码HTML，浏览器必须向后解码才能实际使用。

使用innerText属性可以安全地将纯文本插入到DOM中，并且比使用任何现有的转义函数快得多。甚至比将静态预编码字符串赋值给innerHTML还要快。

使用classList编辑类，使用dataset设置数据属性，使用setAttribute设置其他类。

所有这些都能帮你逃脱。更准确地说，不需要转义，也不需要在**下面执行编码，因为您正在处理HTML (DOM的文本表示)。

// use existing element var author = 'John "Superman" Doe <john@example.com>'; var el = document.getElementById('first'); el.dataset.author = author; el.textContent = 'Author: '+author; // or create a new element var a = document.createElement('a'); a.classList.add('important'); a.href = '/search?q=term+"exact"&n=50'; a.textContent = 'Search for "exact" term'; document.body.appendChild(a); // actual HTML code console.log(el.outerHTML); console.log(a.outerHTML); .important { color: red; } <div id="first"></div>

*此答案不适用于服务器端JavaScript用户(Node.js等)

** Unless you explicitly convert it to actual HTML afterwards. E.g. by accessing innerHTML - this is what happens when you run $('<div/>').text(value).html(); suggested in other answers. So if your final goal is to insert some data into the document, by doing it this way you'll be doing the work twice. Also you can see that in the resulting HTML not everything is encoded, only the minimum that is needed for it to be valid. It is done context-dependently, that's why this jQuery method doesn't encode quotes and therefore should not be used as a general purpose escaper. Quotes escaping is needed when you're constructing HTML as a string with untrusted or quote-containing data at the place of an attribute's value. If you use the DOM API, you don't have to care about escaping at all.

你可能不需要这样的函数。由于您的代码已经在浏览器中*，您可以直接访问DOM，而不是生成和编码HTML，浏览器必须向后解码才能实际使用。

使用innerText属性可以安全地将纯文本插入到DOM中，并且比使用任何现有的转义函数快得多。甚至比将静态预编码字符串赋值给innerHTML还要快。

使用classList编辑类，使用dataset设置数据属性，使用setAttribute设置其他类。

所有这些都能帮你逃脱。更准确地说，不需要转义，也不需要在**下面执行编码，因为您正在处理HTML (DOM的文本表示)。

// use existing element var author = 'John "Superman" Doe <john@example.com>'; var el = document.getElementById('first'); el.dataset.author = author; el.textContent = 'Author: '+author; // or create a new element var a = document.createElement('a'); a.classList.add('important'); a.href = '/search?q=term+"exact"&n=50'; a.textContent = 'Search for "exact" term'; document.body.appendChild(a); // actual HTML code console.log(el.outerHTML); console.log(a.outerHTML); .important { color: red; } <div id="first"></div>

*此答案不适用于服务器端JavaScript用户(Node.js等)

** Unless you explicitly convert it to actual HTML afterwards. E.g. by accessing innerHTML - this is what happens when you run $('<div/>').text(value).html(); suggested in other answers. So if your final goal is to insert some data into the document, by doing it this way you'll be doing the work twice. Also you can see that in the resulting HTML not everything is encoded, only the minimum that is needed for it to be valid. It is done context-dependently, that's why this jQuery method doesn't encode quotes and therefore should not be used as a general purpose escaper. Quotes escaping is needed when you're constructing HTML as a string with untrusted or quote-containing data at the place of an attribute's value. If you use the DOM API, you don't have to care about escaping at all.

我正在详细说明一下ok。的答案。

为此，您可以使用浏览器的DOM函数。

var utils = {
    dummy: document.createElement('div'),
    escapeHTML: function(s) {
        this.dummy.textContent = s
        return this.dummy.innerHTML
    }
}

utils.escapeHTML('<escapeThis>&')

这返回&lt;escapeThis&gt;&

它使用标准函数createElement创建一个不可见的元素，然后使用函数textContent将任何字符串设置为其内容，然后使用innerHTML获取其HTML表示形式中的内容。

值得一读: http://bigdingus.com/2007/12/29/html-escaping-in-javascript/

escapeHTML: (function() {
 var MAP = {
   '&': '&',
   '<': '&lt;',
   '>': '&gt;',
   '"': '&#34;',
   "'": '&#39;'
 };
  var repl = function(c) { return MAP[c]; };
  return function(s) {
    return s.replace(/[&<>'"]/g, repl);
  };
})()

注意:只运行一次。不要在已经编码的字符串上运行，例如&成为,amp;

我希望这能赢得比赛，因为它的性能和最重要的不是使用.replace('&'，'&').replace('<'，'<')的链式逻辑…

var mapObj = {
   '&':  "&",
   '<':  "&lt;",
   '>':  "&gt;",
   '"':  "&quot;",
   '\'': "&#039;"
};
var re = new RegExp(Object.keys(mapObj).join("|"), "gi");

function escapeHtml(str)
{
    return str.replace(re, function(matched)
    {
        return mapObj[matched.toLowerCase()];
    });
}

console.log('<script type="text/javascript">alert('Hello World');</script>');
console.log(escapeHtml('<script type="text/javascript">alert('Hello World');</script>'));

照章办事

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