显然，这比我想象的更难找到。它甚至是那么简单……
是否有与 PHP 的 htmlspecialchars 内置在 JavaScript 中的函数等效？我知道自己实现这一点相当容易，但使用内置函数（如果可用）会更好。
对于不熟悉 PHP 的人，htmlspecialchars 会将 <htmltag/> 之类的内容翻译成 <htmltag/>
我知道escape() 和encodeURI() 不能这样工作。
【问题讨论】：
标签： javascript html escaping html-encode
您的解决方案代码存在问题 - 它只会转义每个特殊字符的第一次出现。例如：
escapeHtml('Kip\'s <b>evil</b> "test" code\'s here');
Actual: Kip's <b>evil</b> "test" code's here
Expected: Kip's <b>evil</b> "test" code's here
下面是正常工作的代码：
function escapeHtml(text) {
return text
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
下面的代码将产生与上面相同的结果，但它的性能更好，尤其是在大文本块上（感谢jbo5112）。
function escapeHtml(text) {
var map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}
【讨论】：
这就是 HTML 编码。没有原生的 javascript 函数可以做到这一点，但你可以谷歌并得到一些做得很好的。
例如http://sanzon.wordpress.com/2008/05/01/neat-little-html-encoding-trick-in-javascript/
编辑：
这是我测试过的：
var div = document.createElement('div');
var text = document.createTextNode('<htmltag/>');
div.appendChild(text);
console.log(div.innerHTML);
输出：&lt;htmltag/&gt;
【讨论】：
encodeURIComponent 所做的，而不是 OP 所要求的。那你可以编辑吗？我似乎无法撤消我的 -1。
div 元素和文本节点。使用文本`` 创建一个文本节点只会创建一个文本节点，而不是img 元素。
值得一读： http://bigdingus.com/2007/12/29/html-escaping-in-javascript/
escapeHTML: (function() {
var MAP = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
var repl = function(c) { return MAP[c]; };
return function(s) {
return s.replace(/[&<>'"]/g, repl);
};
})()
注意：只运行一次。并且不要在已经编码的字符串上运行它，例如&amp;amp; 变为 &amp;amp;
【讨论】：
这是一个转义 HTML 的函数：
function escapeHtml(str)
{
var map =
{
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return str.replace(/[&<>"']/g, function(m) {return map[m];});
}
并解码：
function decodeHtml(str)
{
var map =
{
'&': '&',
'<': '<',
'>': '>',
'"': '"',
''': "'"
};
return str.replace(/&|<|>|"|'/g, function(m) {return map[m];});
}
【讨论】：
使用 jQuery 可以是这样的：
var escapedValue = $('<div/>').text(value).html();
来自相关问题Escaping HTML strings with jQuery
正如评论中提到的，双引号和单引号在此实现中保持原样。这意味着如果您需要将元素属性设为原始 html 字符串，则不应使用此解决方案。
【讨论】：
<!-- Caps rage begin --> 这个答案应该是负分，因为它甚至没有接近回答“HtmlSpecialChars 等价物”的问题。 <!-- Caps rage end --> it-does-not-escape-quotes-jesus-christ-and -其他神。 OMG 你 jquery 人。
Underscore.js为此提供了一个函数：
_.escape(string)
转义字符串以插入 HTML，替换 &、、" 和 ' 字符。
http://underscorejs.org/#escape
它不是内置的 JavaScript 函数，但如果您已经在使用 Underscore.js，如果要转换的字符串不太大，它比编写自己的函数更好。
【讨论】：
对此的另一种看法是完全放弃所有字符映射，而是将所有不需要的字符转换为它们各自的数字字符引用，例如：
function escapeHtml(raw) {
return raw.replace(/[&<>"']/g, function onReplace(match) {
return '&#' + match.charCodeAt(0) + ';';
});
}
注意，指定的 RegEx 仅处理 OP 想要转义的特定字符，但根据要使用转义 HTML 的上下文，这些字符可能不够用。 Ryan Grove 的文章There's more to HTML escaping than &, <, >, and " 是该主题的好读物。并且根据您的上下文，可能非常需要以下 RegEx 以避免 XSS 注入：
var regex = /[&<>"'` !@$%()=+{}[\]]/g
【讨论】：
用途：
String.prototype.escapeHTML = function() {
return this.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
示例：
var toto = "test<br>";
alert(toto.escapeHTML());
【讨论】：
您可能不需要这样的功能。由于您的代码已经在浏览器中*，您可以直接访问 DOM，而不是生成和编码必须由浏览器向后解码才能实际使用的 HTML。
使用innerText 属性将纯文本安全地插入到 DOM 中，并且比使用任何提供的转义函数快得多。甚至faster 也比将静态预编码字符串分配给innerHTML。
使用classList 编辑类，dataset 设置data- 属性，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，etc.）
** 除非您之后明确地将其转换为实际的 HTML。例如。通过访问innerHTML - 这就是您运行其他答案中建议的$('<div/>').text(value).html(); 时发生的情况。因此，如果您的最终目标是将一些数据插入到文档中，那么通过这种方式您将完成两次工作。您还可以看到，在生成的 HTML 中，并非所有内容都被编码，只有其有效所需的最小值。它是根据上下文完成的，这就是为什么这个 jQuery 方法不编码引号，因此不应该用作通用转义符。当您将 HTML 构造为字符串时，在属性值的位置使用不受信任或包含引号的数据时，需要引号转义。如果你使用 DOM API，你根本不用关心转义。
【讨论】：
el.textContent = str; el.innerHTML = el.innerHTML.replace(/\n/g, '<br>')），或者将 CSS white-space 属性设置为 pre 或 @987654338 @
innerText 而不是 textContent。虽然在读取属性时有点慢并且有一些other differences，但它更直观，因为它在分配给它时会自动替换<br>。
function htmlEscape(str){
return str.replace(/[&<>'"]/g,x=>'&#'+x.charCodeAt(0)+';')
}
此方案使用字符的数字编码，例如<替换为&#60;。
虽然性能比the solution using a map略差，但有优势：
【讨论】：
OWASP recommends 表示“[e]除了字母数字字符，[您应该] 使用&#xHH; 格式（或命名实体，如果可用）转义所有 ASCII 值小于 256 的字符，以防止切换出 [an ] 属性。”
所以这里有一个函数可以做到这一点，并带有一个用法示例：
function escapeHTML(unsafe) {
return unsafe.replace(
/[\u0000-\u002F\u003A-\u0040\u005B-\u0060\u007B-\u00FF]/g,
c => '&#' + ('000' + c.charCodeAt(0)).slice(-4) + ';'
)
}
document.querySelector('div').innerHTML =
'<span class=' +
escapeHTML('"fakeclass" onclick="alert("test")') +
'>' +
escapeHTML('<script>alert("inspect the attributes")\u003C/script>') +
'</span>'<div></div>您应该验证我提供的实体范围，以自己验证函数的安全性。你也可以使用这个正则表达式，它具有更好的可读性并且应该涵盖相同的字符代码，但在我的浏览器中性能降低了大约 10%：
/(?![0-9A-Za-z])[\u0000-\u00FF]/g
【讨论】：
对于 Node.js 用户（或在浏览器中使用 Jade 运行时的用户），您可以使用 Jade 的转义功能。
require('jade').runtime.escape(...);
如果有人在维护它，那么自己编写它没有任何意义。 :)
【讨论】：
我正在详细说明o.k.w.'s answer。
您可以为此使用浏览器的 DOM 函数。
var utils = {
dummy: document.createElement('div'),
escapeHTML: function(s) {
this.dummy.textContent = s
return this.dummy.innerHTML
}
}
utils.escapeHTML('<escapeThis>&')
这会返回&lt;escapeThis&gt;&amp;
它使用标准函数 createElement 创建一个不可见元素，然后使用函数 textContent 将任何字符串设置为其内容，然后使用 innerHTML 以 HTML 表示形式获取内容。
【讨论】：
function htmlspecialchars(str) {
if (typeof(str) == "string") {
str = str.replace(/&/g, "&"); /* must do & first */
str = str.replace(/"/g, """);
str = str.replace(/'/g, "'");
str = str.replace(/</g, "<");
str = str.replace(/>/g, ">");
}
return str;
}
【讨论】：
这与这个问题没有直接关系，但是可以通过以下方式在JS中完成相反的操作：
> String.fromCharCode(8212);
> "—"
这也适用于 TypeScript。
【讨论】：
我希望这能赢得比赛，因为它的性能和最重要的不是使用 .replace('&','&').replace('
var mapObj = {
'&': "&",
'<': "<",
'>': ">",
'"': """,
'\'': "'"
};
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>'));
【讨论】：
倒转一：
function decodeHtml(text) {
return text
.replace(/&/g, '&')
.replace(/</ , '<')
.replace(/>/, '>')
.replace(/"/g,'"')
.replace(/'/g,"'");
}
【讨论】：
&lt; 和&gr; 的第一个 个实例。
To write a greater than sign in HTML type &amp;gt;，它将错误地显示 &gt; 而不是 &gt;