关于javascript：使用jQuery转义HTML字符串

Escaping HTML strings with jQuery

有谁知道一种简单的方法来从jQuery中的字符串中转义HTML？我需要能够传递任意字符串并正确地对其进行转义以显示在HTML页面中(防止JavaScript / HTML注入攻击)。我敢肯定可以扩展jQuery来做到这一点，但是目前我对框架的了解还不够。

mustache.js也提供了解决方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

由于使用的是jQuery，因此只需设置元素的text属性即可：

1
2
3
4
5
6
7
8
9
10
11
12
13

// before:
// text
var someHtmlString ="alert('hi!');";

// set a DIV's text:
$("div.someClass").text(someHtmlString);
// after:
// alert('hi!');

// get the text in a string:
var escaped = $("").text(someHtmlString).html();
// value:
// alert('hi!');

1	$('').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，那么我认为只有三点是真正必要的：

1	html.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");

根据您的用例，您可能还需要执行诸如"到"的操作。如果列表足够大，我将使用一个数组：

1
2
3
4

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进行转义。

易于使用的下划线：

1	_.escape(string)

Underscore是一个实用程序库，提供了许多本机js不提供的功能。还有lodash，它与下划线是相同的API，但被重写以提高性能。

我写了一个小小的函数来做到这一点。它仅转义"，&，<和>(但通常无论如何都是这样)。它比早期提出的解决方案稍微好一点，因为它仅使用一个.replace()进行所有转换。 (编辑2：降低了代码复杂度，使函数变得更小，更整洁，如果您对原始代码感到好奇，请参阅此答案的结尾。)

1
2
3
4
5
6

function escapeHtml(text) {
'use strict';
return text.replace(/[\"&<>]/g, function (a) {
return { '"': '"', '&': '&', '<': '<', '>': '>' }[a];
});
}

这是纯Javascript，未使用jQuery。

也转义/和'

根据mklement的评论进行编辑。

上述功能可以轻松扩展为包括任何字符。要指定更多要转义的字符，只需将它们插入正则表达式的字符类中(即/[...]/g内部)，并作为chr对象中的条目。 (编辑2：同样也缩短了此功能。)

1
2
3
4
5
6
7
8
9

function escapeHtml(text) {
'use strict';
return text.replace(/[\"&'\\/<>]/g, function (a) {
return {
'"': '"', '&': '&',"'": '',
'/': '', '<': '<', '>': '>'
}[a];
});
}

请注意，上面将用于撇号(可能已使用符号实体 –它是用XML定义的，但最初并未包含在HTML规范中，因此可能不受所有浏览器的支持。请参阅：维基百科有关HTML字符编码的文章。我还记得在某个地方读到，使用十进制实体比使用十六进制更受支持，但是我现在似乎找不到该源。 (并且那里不存在许多不支持十六进制实体的浏览器。)

注意：将/和'添加到转义字符列表并不是很有用，因为它们在HTML中没有任何特殊含义，也不需要转义。

原始escapeHtml函数

编辑2：原始函数使用变量(chr)来存储.replace()回调所需的对象。此变量还需要一个额外的匿名函数来对其进行范围划分，从而(不必要地)使该函数更大，更复杂。

1
2
3
4
5
6
7

var escapeHtml = (function () {
'use strict';
var chr = { '"': '"', '&': '&', '<': '<', '>': '>' };
return function (text) {
return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
};
}());

我尚未测试两个版本中哪个更快。如果您愿意，请随时在此处添加信息和有关它的链接。

我意识到我参加这个聚会有多晚，但是我有一个非常简单的解决方案，不需要jQuery。

1	escaped = new Option(unescaped).innerHTML;

编辑：这不会转义引号。唯一需要转义引号的情况是将内容内联粘贴到HTML字符串中的属性上。对于我来说，很难想象这样做会是一个好的设计。

编辑3：为获得最快的解决方案，请从Saram检查以上答案。这是最短的。

这是一个干净清晰的JavaScript函数。它将诸如"几<许多"的文本转义为"几<许多"。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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('').text(str).html();
}

// No jQuery, so use string replace.
return str
.replace(/&/g, '&')
.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/"/g, '"')
.replace(/'/g, '');
}

经过最后的测试后，我可以推荐最快和完全跨浏览器兼容的本机JavaScript(DOM)解决方案：

1
2
3
4
5
6

function HTMLescape(html){
return document.createElement('div')
.appendChild(document.createTextNode(html))
.parentNode
.innerHTML
}

如果您重复多次，则可以使用一次准备好的变量进行操作：

1
2
3
4
5
6
7
8
9
10

//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一起使用。

1	_.str.escapeHTML('Blah blah blah')

输出：

1	'Blah blah blah'

escape()和unescape()用于对URL(而非HTML)的字符串进行编码/解码。

实际上，我使用以下代码片段来完成不需要任何框架的技巧：

1
2
3
4
5

var escapedHtml = html.replace(/&/g, '&')
.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/"/g, '"')
.replace(/'/g, '');

我已经增强了mustache.js示例，将escapeHTML()方法添加到字符串对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

这样，使用"Some , more Text&Text".escapeHTML()非常容易

如果您有underscore.js，请使用_.escape(比上面发布的jQuery方法更有效)：

1	_.escape('Curly, Larry & Moe'); // returns: Curly, Larry & Moe

这是一个很好的例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

如果您要使用正则表达式，则上述tghw的示例中有错误。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var escaped = html;
var findReplace = [[/&/g,"&"], [/</g,"<"], [/>/g,">"], [/"/g,
"""]]

for(var item in findReplace) {
escaped = escaped.replace(item[0], item[1]);
}



var escaped = html;
var findReplace = [[/&/g,"&"], [/</g,"<"], [/>/g,">"], [/"/g,"""]]

for(var item in findReplace) {
escaped = escaped.replace(findReplace[item[0]], findReplace[item[1]]);
}

您可以使用vanilla js轻松实现。

只需在文档中添加文本节点即可。
浏览器会将其转义。

1 2	var escaped = document.createTextNode("<HTML TO/ESCAPE/>") document.getElementById("[PARENT_NODE]").appendChild(escaped)

2个不需要JQUERY的简单方法...

您可以像这样对字符串中的所有字符进行编码：

1	function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}

或者只是针对主要字符来担心&，换行符，<，>，"和'，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function encode(r){
return r.replace(/[\\x26\\x0A\\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

var myString='Encode HTML entities!\
"Safe" escape </'+'script> & other tags!';

test.value=encode(myString);

testing.innerHTML=encode(myString);

/*************
* \\x26 is &ampersand (it has to be first),
* \\x0A is newline,
*************/

1
2
3
4
5
6
7
8
9
10
11

<p>
What JavaScript Generated:
</p>

<textarea id=test rows="3" cols="55"></textarea>

<p>
What It Renders Too In HTML:
</p>

www.WHAK.com

纯JavaScript转义示例：

1
2
3
4
5
6
7
8

function escapeHtml(text) {
var div = document.createElement('div');
div.innerText = text;
return div.innerHTML;
}

escapeHtml("alert('hi!');")
//"alert('hi!');"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

没有全局变量，一些内存优化。
用法：

1	"some<tag>and&symbol?".htmlEscape({'?': '©'})

结果是：

1	"some<tag>and&symbol©"

ES6一个来自mustache.js的解决方案的衬板

1	const escapeHTML = str => (str+'').replace(/[&<>"'`=\\/]/g, s => ({'&': '&','<': '<','>': '>','"': '"',"'": '','/': ' ','`': ' ','=': ' '})[s]);

1
2
3

function htmlDecode(t){
if (t) return $('').html(t).text();
}

奇迹般有效

这个答案提供了jQuery和普通的JS方法，但是最短的是不使用DOM：

1	unescape(escape("It's > 20% less complicated this way."))

转义字符串：It%27s%20%3E%2020%25%20less%20complicated%20this%20way.

如果转义空间困扰您，请尝试：

1	unescape(escape("It's > 20% less complicated this way.").replace(/%20/g,""))

转义字符串：It%27s %3E 20%25 less complicated this way.

不幸的是，JavaScript版本1.5中不推荐使用escape()函数。 encodeURI()或encodeURIComponent()是替代方法，但是它们忽略了'，因此最后一行代码将变为：

1	decodeURI(encodeURI("It's > 20% less complicated this way.").replace(/%20/g,"").replace("'", '%27'))

所有主要的浏览器仍然支持短代码，并且鉴于旧网站的数量，我怀疑这种情况很快会改变。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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);
}

如果要将这些信息保存在数据库中，则使用客户端脚本来转义HTML是错误的，这应该在服务器中完成。否则，它很容易绕过您的XSS保护。

为了阐明我的观点，以下是使用其中一个答案的示例：

假设您正在使用功能escapeHtml来从博客中的注释中转义Html，然后将其发布到服务器上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var entityMap = {
"&":"&",
"<":"<",
">":">",
'"': '"',
"'": '',
"/": ' '
};

function escapeHtml(string) {
return String(string).replace(/[&<>"'\\/]/g, function (s) {
return entityMap[s];
});
}

用户可以：

编辑POST请求参数，并将注释替换为javascript代码。
使用浏览器控制台覆盖escapeHtml函数。

如果用户将此代码段粘贴到控制台中，它将绕过XSS验证：

1
2
3

function escapeHtml(string){
return string
}

如果您不防止再次逃脱，例如大多数解决方案会一直将&转义为&。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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] +";";
}
) :"";
};