Answers:
由于您使用的是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>
$(element2).attr("some-attr", $(element1).html());
参见以下示例:jsbin.com/atibig/1/edit
var entityMap = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
'/': '/',
'`': '`',
'=': '='
};
function escapeHtml (string) {
return String(string).replace(/[&<>"'`=\/]/g, function (s) {
return entityMap[s];
});
}
'
是,它映射到十进制格式的实体,而/
使用十六进制格式。
\n
成<br>
什么指南?
$('<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
attr()
方法(如至少1.8.3的)确实其自己的编码,以使未编码的字符串可以通过直接 ; 例如:$('<div/>').attr('test-attr', '\'Tis "fun" & stuff')[0].outerHTML
$('<div/>')
创建一个div
未附加到DOM 的新元素。因此,它不会更改任何现有元素。jQuery如何使用相同的$()
函数来查找元素($('div')
)和创建元素,以及其他更多的东西,这让人有些困惑,... :)
如果您转义使用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进行转义。
var
声明item
;无论如何,for … in
遍历数组时根本不要使用循环!请改用普通for
循环。哦encodeURIComponent
,不是escapeURIComponent
。
é
;以下是html实体的列表,以供参考:w3schools.com/tags/ref_entities.asp
我写了一个小小的函数来做到这一点。它只是逃脱"
,&
,<
和>
(但通常这就是你所需要的是这样)。它比早期提出的解决方案稍微好一点,因为它只使用一个 .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];
});
}
请注意上述'
对单引号的用法('
可能已改为使用符号实体-它是用XML定义的,但最初并未包含在HTML规范中,因此可能不被所有浏览器支持。请参阅:有关HTML字符编码的维基百科文章)。我还记得在某个地方读到,使用十进制实体比使用十六进制更受支持,但是我现在似乎找不到其来源。(并且那里不存在很多不支持十六进制实体的浏览器。)
注意:在转义字符列表中添加/
和'
并不是很有用,因为它们在HTML中没有任何特殊含义,也不需要转义。
escapeHtml
功能编辑2:原始函数使用变量(chr
)存储.replace()
回调所需的对象。此变量还需要一个额外的匿名函数来对其进行范围划分,从而(不必要地)使该函数更大,更复杂。
var escapeHtml = (function () {
'use strict';
var chr = { '"': '"', '&': '&', '<': '<', '>': '>' };
return function (text) {
return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
};
}());
我尚未测试两个版本中哪个更快。如果您愿意,请随时在此处添加信息和有关它的链接。
mustache.js
和underscore.js
办呢?后者的发言:它只能识别数值实体(表示'
和/
“),在大写十六进制形式时未逸出。因此,文本转义为mustache.js
-奇怪地混合使用了十六进制。和十进制格式-在中无法正确取消转义underscore.js
。我不知道其他受欢迎的图书馆如何处理这一问题。
'
在XML中具有某种保留功能(因此,我想是XHTML,这是为什么?),这就是XML(而不是HTML)具有命名实体的原因'
。我不知道到底是为什么还是以什么方式“保留”它。– URL中的斜线是特殊的,但实际上并不能保证将其包含在转义HTML中(因为URL编码是完全不同的)。
/
不需要编码,但是编码'
对于安全处理编码字符串用作单引号中的属性值的情况似乎仍然有用。
我知道我参加这个聚会有多晚,但是我有一个非常简单的解决方案,不需要jQuery。
escaped = new Option(unescaped).innerHTML;
编辑:这不会转义引号。需要将引号转义的唯一情况是将内容内联粘贴到HTML字符串中的属性上。对于我来说,很难想象这样做会是一个好的设计。
编辑3:为获得最快的解决方案,请检查上面Saram的答案。这是最短的。
<
和>
,所以转义引号也没有任何好处,除非生成的内容的目的是进入属性。
这是一个干净清晰的JavaScript函数。它将诸如“几<许多”的文本转义为“几&lt;许多”。
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
}
var p = document.createElement('p'); p.textContent = html; return p.innerHTML;
textContent
只有Chrome 1 +,Firefox 2,IE9,Opera 9.64和Safari 3(后两个注解“可能更早”)才支持该功能。因此,这将打破OP的“完全跨浏览器兼容”的主张。
p.innerText = html; return p.innerHTML
尝试Underscore.string lib,它与jQuery一起使用。
_.str.escapeHTML('<div>Blah blah blah</div>')
输出:
'<div>Blah blah blah</div>'
_.escape()
实用程序功能。
我已经增强了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()
__entityMap
进入了函数本地范围。并将所有这些内容包装到if (typeof String.prototype.escapeHTML !== 'function'){...}
escape()
并且unescape()
旨在对URL(而非HTML)的字符串进行编码/解码。
实际上,我使用以下代码片段来完成不需要任何框架的技巧:
var escapedHtml = html.replace(/&/g, '&')
.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/"/g, '"')
.replace(/'/g, ''');
"
s,则需要至少添加'
和``。只有html元素中的字符串标记数据才真正需要这些标记。对于html数据本身(外部标签),仅需要前3个。
如果您要使用正则表达式,则上述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;
}
}
(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©"
2个不需要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 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);
}
这个答案提供了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'))
所有主要的浏览器仍然支持短代码,并且鉴于旧网站的数量,我怀疑这种情况很快会改变。
ES6一个来自mustache.js的解决方案的衬板
const escapeHTML = str => (str+'').replace(/[&<>"'`=\/]/g, s => ({'&': '&','<': '<','>': '>','"': '"',"'": ''','/': '/','`': '`','=': '='})[s]);
如果将此信息保存在数据库中,使用客户端脚本转义HTML是错误的,则应在服务器中完成此操作。否则,它很容易绕过您的XSS保护。
为了阐明我的观点,以下是使用其中一个答案的示例:
假设您正在使用功能escapeHtml从博客中的注释中转义Html,然后将其发布到服务器。
var entityMap = {
"&": "&",
"<": "<",
">": ">",
'"': '"',
"'": ''',
"/": '/'
};
function escapeHtml(string) {
return String(string).replace(/[&<>"'\/]/g, function (s) {
return entityMap[s];
});
}
用户可以:
如果用户将此代码段粘贴到控制台中,它将绕过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] + ";";
}
) : "";
};