使用jQuery转义HTML字符串

如果你转义HTML，只有三个我能想到，这将是真正必要的:

html.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");

根据您的用例，您可能还需要执行"到"之类的操作。如果列表足够大，我就使用数组:

var escaped = html;
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g, "&gt;"], [/"/g, "&quot;"]]
for(var item in findReplace)
escaped = escaped.replace(findReplace[item][0], findReplace[item][1]);

encodeURIComponent()只对url进行转义，对HTML不进行转义。

因为你使用的是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">&lt;script&gt;alert('hi!');&lt;/script&gt;</div>


// get the text in a string:
var escaped = $("<div>").text(someHtmlString).html();
// value:
// &lt;script&gt;alert('hi!');&lt;/script&gt;

$('<div/>').text('This is fun & stuff').html(); // "This is fun &amp; stuff"

来源:# EYZ0

如果你走的是正则表达式路线，上面tghw的例子中就有一个错误。

<!-- WON'T WORK -  item[0] is an index, not an item -->


var escaped = html;
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g,"&gt;"], [/"/g,
"&quot;"]]


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




<!-- WORKS - findReplace[item[]] correctly references contents -->


var escaped = html;
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g, "&gt;"], [/"/g, "&quot;"]]


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

escape()和unescape()用于为url编码/解码字符串，而不是HTML。

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

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

这是一个简洁明了的JavaScript函数。它将转义诸如“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, '&amp;')
.replace(/>/g, '&gt;')
.replace(/</g, '&lt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&apos;');
}

function htmlEscape(str) {
var stringval="";
$.each(str, function (i, element) {
alert(element);
stringval += element
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(' ', '-')
.replace('?', '-')
.replace(':', '-')
.replace('|', '-')
.replace('.', '-');
});
alert(stringval);
return String(stringval);
}

尝试Underscore.string lib，它与jQuery一起工作。

_.str.escapeHTML('<div>Blah blah blah</div>')

输出:

'<div>Blah blah blah</div>'

还有来自mustache.js的解决方案

var entityMap = {
'&': '&',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#39;',
'/': '&#x2F;',
'`': '&#x60;',
'=': '&#x3D;'
};


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

这个答案提供了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'))

所有主流浏览器仍然支持短代码，考虑到旧网站的数量，我怀疑这种情况很快就会改变。

这是一个很好的安全的例子……

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

我写了一个小函数来做这个。它只逃脱了"， &， <和>(但通常这就是你所需要的)。它比前面提出的解决方案稍微优雅一些，因为它只使用一个 .replace()来完成所有的转换。(编辑2:降低代码复杂度，使函数更小，更整洁，如果你对原始代码好奇，请参阅这个答案的末尾。)

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

这是纯Javascript，没有使用jQuery。

逃脱/和'

根据mklement的注释进行编辑。

上面的函数可以很容易地扩展到包括任何字符。要指定更多要转义的字符，只需将它们插入正则表达式中的字符类(即在/[...]/g中)和chr对象中的一个条目中。(用同样的方式缩短了这个函数。)

function escapeHtml(text) {
'use strict';
return text.replace(/[\"&'\/<>]/g, function (a) {
return {
'"': '&quot;', '&': '&amp;', "'": '&#39;',
'/': '&#47;',  '<': '&lt;',  '>': '&gt;'
}[a];
});
}

注意上面使用'表示撇号(符号实体'可能已经被使用了——它是在XML中定义的，但最初没有包含在HTML规范中，因此可能不是所有浏览器都支持。看:# EYZ2)。我还记得在某处读到过使用十进制实体比使用十六进制更广泛的支持，但我现在似乎找不到它的来源。(而且不支持十六进制实体的浏览器并不多。)

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

原始的escapeHtml函数

原始函数使用一个变量(chr)来存储.replace()回调所需的对象。这个变量还需要一个额外的匿名函数来限定它的范围，这使得函数(不必要地)变得更大更复杂。

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

我还没有测试这两个版本中哪个更快。如果你喜欢，请在这里添加相关信息和链接。

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

var __entityMap = {
"&": "&",
"<": "&lt;",
">": "&gt;",
'"': '&quot;',
"'": '&#39;',
"/": '&#x2F;'
};


String.prototype.escapeHTML = function() {
return String(this).replace(/[&<>"'\/]/g, function (s) {
return __entityMap[s];
});
}

这样就很容易使用"Some <text>, more Text&Text".escapeHTML()

(function(undefined){
var charsToReplace = {
'&': '&',
'<': '&lt;',
'>': '&gt;'
};


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({'©': '&copy;'})

结果是:

"some<tag>and&symbol©"

function htmlDecode(t){
if (t) return $('<div />').html(t).text();
}

效果非常好

经过最后的测试，我可以推荐最快和完全跨浏览器兼容原生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
}

看看我最后的表演比较 (栈的问题)。

很容易使用下划线:

_.escape(string)

下划线是一个实用库，它提供了很多原生js不提供的功能。还有lodash，它是与下划线相同的API，但被重写以提高性能。

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

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

你可以很容易地用香草js做到这一点。

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

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

为了让我的观点更清楚，这里有一个例子，使用其中的一个答案:

假设你正在使用函数escapeHtml来转义博客评论中的Html，然后将其发布到服务器上。

var entityMap = {
"&": "&",
"<": "&lt;",
">": "&gt;",
'"': '&quot;',
"'": '&#39;',
"/": '&#x2F;'
};


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

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 &ampersand (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>

我知道我来这个派对有多晚，但我有一个非常简单的解决方案，不需要jQuery。

escaped = new Option(unescaped).innerHTML;

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

编辑3:要获得最快的解决方案，请检查上面萨拉姆的答案。这个是最短的。

简单的JavaScript转义示例:

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


escapeHtml("<script>alert('hi!');</script>")
// "&lt;script&gt;alert('hi!');&lt;/script&gt;"

ES6内衬代替来自mustache.js的解决方案

const escapeHTML = str => (str+'').replace(/[&<>"'`=\/]/g, s => ({'&': '&amp;','<': '&lt;','>': '&gt;','"': '&quot;',"'": '&#39;','/': '&#x2F;','`': '&#x60;','=': '&#x3D;'})[s]);

一个速度优化版本:

function escapeHtml(s) {
let out = "";
let p2 = 0;
for (let p = 0; p < s.length; p++) {
let r;
switch (s.charCodeAt(p)) {
case 34: r = "&quot;"; break;  // "
case 38: r = "&amp;" ; break;  // &
case 39: r = "&#39;" ; break;  // '
case 60: r = '&lt;'  ; break;  // <
case 62: r = '&gt;'  ; break;  // >
default: continue;
}
if (p2 < p) {
out += s.substring(p2, p);
}
out += r;
p2 = p + 1;
}
if (p2 == 0) {
return s;
}
if (p2 < s.length) {
out += s.substring(p2);
}
return out;
}


const s = "Hello <World>!";
document.write(escapeHtml(s));
console.log(escapeHtml(s));

转义html特殊(UTF-8)

function htmlEscape(str) {
return str
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/\//g, '&#x2F;')
.replace(/=/g,  '&#x3D;')
.replace(/`/g, '&#x60;');
}

对于unescape html特殊(UTF-8)

function htmlUnescape(str) {
return str
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, "'")
.replace(/&lt;/g, '<')
.replace(/&gt;/g, '>')
.replace(/&#x2F/g, '/')
.replace(/&#x3D;/g, '=')
.replace(/&#x60;/g, '`');
}