使用 jQuery 转义 HTML 字符串
https://stackoverflow.com/questions/24816
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
有谁知道从字符串中转义 HTML 的简单方法 jQuery？我需要能够传递任意字符串并对其进行正确转义以在 HTML 页面中显示（防止 JavaScript/HTML 注入攻击）。我确信可以扩展 jQuery 来做到这一点，但目前我对框架的了解还不够多，无法实现这一点。
解决方案
由于你正在使用 jQuery ，你可以设置元素的 text 属性：
// before:
// <div class="someClass">text</div>
var someHtmlString = "<script>alert('hi!');</script>";
// set a DIV's text:
$("div.someClass").text(someHtmlString);
// after:
// <div class="someClass"><script>alert('hi!');</script></div>
// get the text in a string:
var escaped = $("<div>").text(someHtmlString).html();
// value:
// <script>alert('hi!');</script>
其他提示
var entityMap = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
'/': '/',
'`': '`',
'=': '='
};
function escapeHtml (string) {
return String(string).replace(/[&<>"'`=\/]/g, function (s) {
return entityMap[s];
});
}
$('<div/>').text('This is fun & stuff').html(); // "This is fun & stuff"
来源： http：// debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb
如果您正在逃避HTML，我只能想到三个非常必要的内容：
html.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
根据您的使用情况，您可能还需要执行"到"之类的操作。如果列表足够大，我只使用一个数组：
var escaped = html;
var findReplace = [[/&/g, "&"], [/</g, "<"], [/>/g, ">"], [/"/g, """]]
for(var item in findReplace)
escaped = escaped.replace(findReplace[item][0], findReplace[item][1]);
encodeURIComponent()只会针对网址转义，而不是针对HTML。
我写了一个很小的功能来做到这一点。它只能逃脱"，&，<和>（但通常这就是你所需要的）。它比早期提出的解决方案稍微优雅一点，因为它只使用一个 .replace()来完成所有转换。 （编辑2：降低代码复杂性使得功能更小更整洁，如果您对原始代码感到好奇，请参阅此答案的结尾。）
function escapeHtml(text) {
'use strict';
return text.replace(/[\"&<>]/g, function (a) {
return { '"': '"', '&': '&', '<': '<', '>': '>' }[a];
});
}
这是普通的Javascript，没有使用jQuery。
逃避/和'
编辑以响应 mklement 的评论。
上述功能可以轻松扩展为包含任何字符。要指定要转义的更多字符，只需将它们插入正则表达式中的字符类（即/[...]/g内），并作为chr对象中的条目。 （编辑2：也以同样的方式缩短了这个功能。）
function escapeHtml(text) {
'use strict';
return text.replace(/[\"&'\/<>]/g, function (a) {
return {
'"': '"', '&': '&', "'": ''',
'/': '/', '<': '<', '>': '>'
}[a];
});
}
注意上面使用'表示撇号（符号实体'可能已经被使用了<！>＃8211;它是用XML定义的，但最初没有包含在HTML规范中，因此可能不会所有浏览器都支持。请参阅：维基百科关于HTML字符编码的文章）。我还记得在某处读取使用十进制实体比使用十六进制更广泛支持，但我现在似乎无法找到它的来源。 （并且不存在很多不支持十六进制实体的浏览器。）
注意：将escapeHtml和<=>添加到转义字符列表中并不是很有用，因为它们在HTML中没有任何特殊含义，并且不需要 要转义。
原始<=>功能
编辑2：原始函数使用变量（<=>）来存储<=>回调所需的对象。这个变量还需要一个额外的匿名函数来限定它，使函数（不必要地）变得更大更复杂。
var escapeHtml = (function () {
'use strict';
var chr = { '"': '"', '&': '&', '<': '<', '>': '>' };
return function (text) {
return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
};
}());
我还没有测试过哪两个版本更快。如果您这样做，请随时在此处添加有关它的信息和链接。
我意识到我参加这个派对有多晚了，但我有一个非常简单的解决方案，不需要jQuery。
escaped = new Option(unescaped).innerHTML;
编辑：这不会逃避报价。引用需要转义的唯一情况是，内容是否将内联粘贴到HTML字符串中的属性。我很难想象这样做会很好的设计。
编辑2：如果性能至关重要，最高性能解决方案（约50％）仍然是一系列正则表达式替换。现代浏览器将检测到正则表达式不包含运算符，只包含字符串，并将所有运算符折叠为单个运算。
这是一个干净，清晰的JavaScript函数。它将转义文本，例如<！>几个<！> lt; <！>许多QUOT;进入<！>几个<！> amp; lt;许多QUOT <！>;
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, ''');
}
经过上次测试后，我可以推荐最快和完全跨浏览器兼容原生javaScript （DOM）解决方案：
function HTMLescape(html){
return document.createElement('div')
.appendChild(document.createTextNode(html))
.parentNode
.innerHTML
}
如果你重复多次，你可以用一次准备好的变量来做到这一点：
//prepare variables
var DOMtext = document.createTextNode("test");
var DOMnative = document.createElement("span");
DOMnative.appendChild(DOMtext);
//main work for each case
function HTMLescape(html){
DOMtext.nodeValue = html;
return DOMnative.innerHTML
}
尝试 Underscore.string lib，它适用于jQuery。
_.str.escapeHTML('<div>Blah blah blah</div>')
输出：
'<div>Blah blah blah</div>'
我已经增强了mustache.js示例，将escapeHTML()方法添加到字符串对象。
var __entityMap = {
"&": "&",
"<": "<",
">": ">",
'"': '"',
"'": ''',
"/": '/'
};
String.prototype.escapeHTML = function() {
return String(this).replace(/[&<>"'\/]/g, function (s) {
return __entityMap[s];
});
}
这样很容易使用"Some <text>, more Text&Text".escapeHTML()
escape()和unescape()旨在对URL进行编码/解码，而非HTML。
实际上，我使用以下代码片段来完成不需要任何框架的技巧：
var escapedHtml = html.replace(/&/g, '&')
.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/"/g, '"')
.replace(/'/g, ''');
如果您有underscore.js，请使用_.escape（比上面发布的jQuery方法更有效）：
_.escape('Curly, Larry & Moe'); // returns: Curly, Larry & Moe
如果你正在使用正则表达式路线，那么上面的tghw例子就会出错。
<!-- WON'T WORK - item[0] is an index, not an item -->
var escaped = html;
var findReplace = [[/&/g, "&"], [/</g, "<"], [/>/g,">"], [/"/g,
"""]]
for(var item in findReplace) {
escaped = escaped.replace(item[0], item[1]);
}
<!-- WORKS - findReplace[item[]] correctly references contents -->
var escaped = html;
var findReplace = [[/&/g, "&"], [/</g, "<"], [/>/g, ">"], [/"/g, """]]
for(var item in findReplace) {
escaped = escaped.replace(findReplace[item[0]], findReplace[item[1]]);
}
这是一个很好的安全例子......
function escapeHtml(str) {
if (typeof(str) == "string"){
try{
var newStr = "";
var nextCode = 0;
for (var i = 0;i < str.length;i++){
nextCode = str.charCodeAt(i);
if (nextCode > 0 && nextCode < 128){
newStr += "&#"+nextCode+";";
}
else{
newStr += "?";
}
}
return newStr;
}
catch(err){
}
}
else{
return str;
}
}
您可以使用vanilla js轻松完成。
只需在文档中添加文本节点即可。 它将被浏览器转义。
var escaped = document.createTextNode("<HTML TO/ESCAPE/>")
document.getElementById("[PARENT_NODE]").appendChild(escaped)
(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©"
function htmlEscape(str) {
var stringval="";
$.each(str, function (i, element) {
alert(element);
stringval += element
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(' ', '-')
.replace('?', '-')
.replace(':', '-')
.replace('|', '-')
.replace('.', '-');
});
alert(stringval);
return String(stringval);
}
2个简单的方法，需要NO JQUERY ...
您可以对字符串中的所有字符进行编码，如下所示：
function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}
或只是定位主角以担心&，换行符，<，>，"和'喜欢：
function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}
var myString='Encode HTML entities!\n"Safe" escape <script></'+'script> & other tags!';
test.value=encode(myString);
testing.innerHTML=encode(myString);
/*************
* \x26 is &ersand (it has to be first),
* \x0A is newline,
*************/<p><b>What JavaScript Generated:</b></p>
<textarea id=test rows="3" cols="55"></textarea>
<p><b>What It Renders Too In HTML:</b></p>
<div id="testing">www.WHAK.com</div>
普通的JavaScript转义示例：
function escapeHtml(text) {
var div = document.createElement('div');
div.innerText = text;
return div.innerHTML;
}
escapeHtml("<script>alert('hi!');</script>")
// "<script>alert('hi!');</script>"
function htmlDecode(t){
if (t) return $('<div />').html(t).text();
}
就像一个魅力
这个答案提供了jQuery和普通的JS方法，但这是最短的，不使用DOM：
unescape(escape("It's > 20% less complicated this way."))
转义字符串：It%27s%20%3E%2020%25%20less%20complicated%20this%20way.
如果逃脱的空间打扰你，请尝试：
unescape(escape("It's > 20% less complicated this way.").replace(/%20/g, " "))
转义字符串：It%27s %3E 20%25 less complicated this way.
不幸的是，escape()函数是在JavaScript 1.5版中弃用。 encodeURI()或encodeURIComponent()是替代方案，但是他们忽略'，所以最后一行代码会变成这样：
decodeURI(encodeURI("It's > 20% less complicated this way.").replace(/%20/g, " ").replace("'", '%27'))
所有主流浏览器仍然支持短代码，鉴于旧网站的数量，我怀疑它会很快改变。
如果您将此信息保存在 数据库, ，使用 a 来转义 HTML 是错误的 客户端 脚本，这应该在 服务器. 。否则很容易绕过 XSS 保护。
为了清楚地表明我的观点，这是一个使用答案之一的示例：
假设您正在使用 escapeHtml 函数从博客中的评论中转义 Html，然后将其发布到您的服务器。
var entityMap = {
"&": "&",
"<": "<",
">": ">",
'"': '"',
"'": ''',
"/": '/'
};
function escapeHtml(string) {
return String(string).replace(/[&<>"'\/]/g, function (s) {
return entityMap[s];
});
}
用户可以：
- 编辑 POST 请求参数并将注释替换为 javascript 代码。
- 使用浏览器控制台覆盖 escapeHtml 函数。
如果用户将此代码片段粘贴到控制台中，它将绕过 XSS 验证：
function escapeHtml(string){
return string
}
如果你不防止再次逃脱，所有的解决方案都是无用的，例如：大多数解决方案都会继续逃避& &。
escapeHtml = function (s) {
return s ? s.replace(
/[&<>'"]/g,
function (c, offset, str) {
if (c === "&") {
var substr = str.substring(offset, offset + 6);
if (/&(amp|lt|gt|apos|quot);/.test(substr)) {
// already escaped, do not re-escape
return c;
}
}
return "&" + {
"&": "amp",
"<": "lt",
">": "gt",
"'": "apos",
'"': "quot"
}[c] + ";";
}
) : "";
};
