有人知道一个简单的方法来转义HTML从字符串在jQuery?我需要能够传递一个任意字符串，并有它正确转义显示在HTML页面(防止JavaScript/HTML注入攻击)。我确信可以通过扩展jQuery来实现这一点，但目前我对框架的了解还不够，无法实现这一点。
当前回答
我写了一个小函数来做这个。它只转义“，&，<和>(但通常这就是你所需要的)。它比前面提出的解决方案稍微优雅一些，因为它只使用一个.replace()来完成所有的转换。(编辑2:降低代码复杂度，使函数更小更整洁，如果你对原始代码感到好奇，请参阅答案末尾。)
function escapeHtml(text) {
'use strict';
return text.replace(/[\"&<>]/g, function (a) {
return { '"': '"', '&': '&', '<': '<', '>': '>' }[a];
});
}
这是纯Javascript，没有使用jQuery。
逃避/和“too”
编辑以回应mklement的评论。
上面的函数可以很容易地扩展到包括任何字符。要指定更多要转义的字符，只需将它们插入正则表达式中的字符类(即在/[…]/g中)和chr对象中的一个条目中。(编辑2:用同样的方式缩短了这个函数。)
function escapeHtml(text) {
'use strict';
return text.replace(/[\"&'\/<>]/g, function (a) {
return {
'"': '"', '&': '&', "'": ''',
'/': '/', '<': '<', '>': '>'
}[a];
});
}
Note the above use of ' for apostrophe (the symbolic entity ' might have been used instead – it is defined in XML, but was originally not included in the HTML spec and might therefore not be supported by all browsers. See: Wikipedia article on HTML character encodings). I also recall reading somewhere that using decimal entities is more widely supported than using hexadecimal, but I can't seem to find the source for that now though. (And there cannot be many browsers out there which does not support the hexadecimal entities.)
注意:将/和'添加到转义字符列表中并不是很有用，因为它们在HTML中没有任何特殊含义，也不需要转义。
原始escapeHtml函数
编辑2:原始函数使用一个变量(chr)来存储.replace()回调所需的对象。这个变量还需要一个额外的匿名函数来限定它的范围，这使得函数(不必要地)变得更大更复杂。
var escapeHtml = (function () {
'use strict';
var chr = { '"': '"', '&': '&', '<': '<', '>': '>' };
return function (text) {
return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
};
}());
我还没有测试这两个版本中哪个更快。如果你喜欢，请在这里添加相关信息和链接。
其他回答
(function(undefined){
var charsToReplace = {
'&': '&',
'<': '<',
'>': '>'
};
var replaceReg = new RegExp("[" + Object.keys(charsToReplace).join("") + "]", "g");
var replaceFn = function(tag){ return charsToReplace[tag] || tag; };
var replaceRegF = function(replaceMap) {
return (new RegExp("[" + Object.keys(charsToReplace).concat(Object.keys(replaceMap)).join("") + "]", "gi"));
};
var replaceFnF = function(replaceMap) {
return function(tag){ return replaceMap[tag] || charsToReplace[tag] || tag; };
};
String.prototype.htmlEscape = function(replaceMap) {
if (replaceMap === undefined) return this.replace(replaceReg, replaceFn);
return this.replace(replaceRegF(replaceMap), replaceFnF(replaceMap));
};
})();
没有全局变量，一些内存优化。 用法:
"some<tag>and&symbol©".htmlEscape({'©': '©'})
结果是:
"some<tag>and&symbol©"
你可以很容易地用香草js做到这一点。
只需在文档中添加一个文本节点。 它将被浏览器转义。
var escaped = document.createTextNode("<HTML TO/ESCAPE/>")
document.getElementById("[PARENT_NODE]").appendChild(escaped)
我写了一个小函数来做这个。它只转义“，&，<和>(但通常这就是你所需要的)。它比前面提出的解决方案稍微优雅一些，因为它只使用一个.replace()来完成所有的转换。(编辑2:降低代码复杂度，使函数更小更整洁，如果你对原始代码感到好奇，请参阅答案末尾。)
function escapeHtml(text) {
'use strict';
return text.replace(/[\"&<>]/g, function (a) {
return { '"': '"', '&': '&', '<': '<', '>': '>' }[a];
});
}
这是纯Javascript，没有使用jQuery。
逃避/和“too”
编辑以回应mklement的评论。
上面的函数可以很容易地扩展到包括任何字符。要指定更多要转义的字符，只需将它们插入正则表达式中的字符类(即在/[…]/g中)和chr对象中的一个条目中。(编辑2:用同样的方式缩短了这个函数。)
function escapeHtml(text) {
'use strict';
return text.replace(/[\"&'\/<>]/g, function (a) {
return {
'"': '"', '&': '&', "'": ''',
'/': '/', '<': '<', '>': '>'
}[a];
});
}
Note the above use of ' for apostrophe (the symbolic entity ' might have been used instead – it is defined in XML, but was originally not included in the HTML spec and might therefore not be supported by all browsers. See: Wikipedia article on HTML character encodings). I also recall reading somewhere that using decimal entities is more widely supported than using hexadecimal, but I can't seem to find the source for that now though. (And there cannot be many browsers out there which does not support the hexadecimal entities.)
注意:将/和'添加到转义字符列表中并不是很有用，因为它们在HTML中没有任何特殊含义，也不需要转义。
原始escapeHtml函数
编辑2:原始函数使用一个变量(chr)来存储.replace()回调所需的对象。这个变量还需要一个额外的匿名函数来限定它的范围，这使得函数(不必要地)变得更大更复杂。
var escapeHtml = (function () {
'use strict';
var chr = { '"': '"', '&': '&', '<': '<', '>': '>' };
return function (text) {
return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
};
}());
我还没有测试这两个版本中哪个更快。如果你喜欢，请在这里添加相关信息和链接。
如果你转义HTML，只有三个我能想到，这将是真正必要的:
html.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
根据您的用例，您可能还需要执行“to "”之类的操作。如果列表足够大，我就使用数组:
var escaped = html;
var findReplace = [[/&/g, "&"], [/</g, "<"], [/>/g, ">"], [/"/g, """]]
for(var item in findReplace)
escaped = escaped.replace(findReplace[item][0], findReplace[item][1]);
encodeURIComponent()只会对url进行转义，而不会对HTML进行转义。
这是一个简洁明了的JavaScript函数。它会将诸如"a few < many"这样的文本转义为"a few <许多”。
function escapeHtmlEntities (str) {
if (typeof jQuery !== 'undefined') {
// Create an empty div to use as a container,
// then put the raw text in and get the HTML
// equivalent out.
return jQuery('<div/>').text(str).html();
}
// No jQuery, so use string replace.
return str
.replace(/&/g, '&')
.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
