我希望这能赢得比赛，因为它的性能和最重要的不是使用.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>'));

我希望这能赢得比赛，因为它的性能和最重要的不是使用.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>'));

值得一读: 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;

您的解决方案代码有一个问题——它只转义每个特殊字符的第一次出现。例如:

escapeHtml('Kip\'s <b>evil</b> "test" code\'s here');
Actual:   Kip&#039;s &lt;b&gt;evil</b> &quot;test" code's here
Expected: Kip&#039;s &lt;b&gt;evil&lt;/b&gt; &quot;test&quot; code&#039;s here

下面是正常工作的代码:

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

更新

下面的代码将产生与上面相同的结果，但它的性能更好，特别是在大块文本上(感谢jbo5112)。

function escapeHtml(text) {
  var map = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };
  
  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

你可能不需要这样的函数。由于您的代码已经在浏览器中*，您可以直接访问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.

反一:

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