Javascript 使用 jQuery 转义 HTML
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6020714/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Escape HTML using jQuery
提问by Michael Mior
I came up with a hack to escape HTML using jQuery and I'm wondering if anyone sees a problem with it.
我想出了一个使用 jQuery 转义 HTML 的技巧,我想知道是否有人发现它有问题。
$('<i></i>').text(TEXT_TO_ESCAPE).html();
The <i>
tag is just a dummy as jQuery needs a container to set the text of.
该<i>
标签只是一个虚拟对象,因为 jQuery 需要一个容器来设置其文本。
Is there perhaps an easier way to do this? Note that I need the text stored in a variable, not for display (otherwise I could just call elem.text(TEXT_TO_ESCAPE);
).
也许有更简单的方法来做到这一点?请注意,我需要将文本存储在变量中,而不是用于显示(否则我只能调用elem.text(TEXT_TO_ESCAPE);
)。
Thanks!
谢谢!
回答by mu is too short
That's a pretty standard way of doing it, my version used a <div>
though:
这是一种非常标准的做法,但我的版本使用了<div>
:
return $('<div/>').text(t).html();
This isn't technically 100% safe though as Mike Samuel notes but it is probably pretty safe in practice.
尽管正如 Mike Samuel 指出的那样,这在技术上并不是 100% 安全的,但在实践中它可能是相当安全的。
The current Prototype.js does this:
当前的 Prototype.js 这样做:
function escapeHTML() {
return this.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
}
But it used to use the "put text in a div and extract the HTML" trick.
但它曾经使用“将文本放入 div 并提取 HTML”技巧。
There's also _.escape
in Underscore, that does it like this:
还有_.escape
Underscore,它是这样的:
// List of HTML entities for escaping.
var htmlEscapes = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
'/': '/'
};
// Regex containing the keys listed immediately above.
var htmlEscaper = /[&<>"'\/]/g;
// Escape a string for HTML interpolation.
_.escape = function(string) {
return ('' + string).replace(htmlEscaper, function(match) {
return htmlEscapes[match];
});
};
That's pretty much the same approach as Prototype's. Most of the JavaScript I do lately has Underscore available so I tend to use _.escape
these days.
这与 Prototype 的方法几乎相同。我最近做的大部分 JavaScript 都有 Underscore 可用,所以我最近倾向于使用_.escape
。
回答by Mike Samuel
There is no guarantee that html()
will be completely escaped so the result might not be safe after concatenation.
无法保证html()
完全转义,因此连接后结果可能不安全。
html()
is based on innerHTML
, and a browser could, without violating lots of expectations, implement innerHTML
so that $("<i></i>").text("1 <").html()
is "1 <"
, and that $("<i></i>").text("b>").html()
is "b>"
.
html()
基于innerHTML
和浏览器可以在不违反很多的期待,实现innerHTML
让$("<i></i>").text("1 <").html()
是"1 <"
,那$("<i></i>").text("b>").html()
是"b>"
。
Then if you concatenate those two individually safe results, you get "1 <b>"
which will obviously not be the HTML version of the concatenation of the two plaintext pieces.
然后,如果您将这两个单独安全的结果连接起来,您得到的结果"1 <b>"
显然不是两个纯文本片段连接的 HTML 版本。
So, this method is not safe by deduction from first principles, and there's no widely followed spec of innerHTML
(though HTML5 does address it).
因此,从首要原则推断,这种方法并不安全,并且没有广泛遵循的规范innerHTML
(尽管 HTML5 确实解决了这个问题)。
The best way to check if it does what you want is to test corner cases like this.
检查它是否符合您的要求的最佳方法是测试这样的极端情况。
回答by Pointy
That should work. That's basically how the Prototype.js library does it, or at least how it used to do it. I generally do it with three calls to ".replace()" but that's mostly just a habit.
那应该工作。这基本上是 Prototype.js 库的工作方式,或者至少是过去的工作方式。我通常通过三个调用“.replace()”来做到这一点,但这主要是一种习惯。