簡單說一下業務場景，前台使用者通過input輸入内容，在離開焦點時，将内容在div中顯示。
這時遇到一個問題，如果使用者輸入了html标簽，則在div顯示中，标簽被解析。
由于是純前端操作，不涉及後端，是以需要通過js對輸入内容進行轉義。
這裡提供一個非常簡單有效的轉義方案，利用了innerHTML和innerText
注：火狐不支援innerText，需要使用 textContent 屬性，而IE早期版本不支援此屬性，為了同時相容IE及火狐，需要進行判斷操作.
因為innerText(textContent)會擷取純文字内容，忽略html節點标簽，而innerHTML會顯示标簽内容，
是以我們先将需轉義的内容指派給innerText(textContent)，再擷取它的innerHTML屬性，這時擷取到的就是轉義後文本内容。
代碼如下：
//HTML轉義
function HTMLEncode(html) {
var temp = document.createElement("div");
(temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
var output = temp.innerHTML;
temp = null;
return output;
}
var tagText = "
123&456";
console.log(HTMLEncode(tagText));//<p><b>123&456</b></p>
通過測試結果，可以看到html标簽及&符都被轉義後儲存。
同理，反轉義的方法為先将轉義文本指派給innerHTML，然後通過innerText(textContent)擷取轉義前的文本内容
//HTML反轉義
function HTMLDecode(text) {
var temp = document.createElement("div");
temp.innerHTML = text;
var output = temp.innerText || temp.textContent;
temp = null;
return output;
}
var tagText = "
123&456";
var encodeText = HTMLEncode(tagText);
console.log(encodeText);//<p><b>123&456</b></p>
console.log(HTMLDecode(encodeText)); //
123&456當 HTMLDecode(‘1
下面是個人适合的轉義：
回目錄
用Javascript進行HTML轉義
http://blog.chinaunix.net/uid-20511797-id-3118652.html
衆所周知頁面上的字元内容通常都需要進行HTML轉義才能正确顯示，尤其對于Input，Textarea送出的内容，更是要進行轉義以防止javascript注入攻擊。
通常的HTML轉義主要是針對内容中的””，”&”，以及空格、單雙引号等。但其實還有很多字元也需要進行轉義。具體的可以參考這篇文章。
回目錄
1、HTML轉義
參考上面的提到的文章，基本上可以确定以下的轉義的範圍和方式。
1)對”\””、”&”、”‘“、””、空格(0x20)、0x00到0x20、0x7F-0xFF
以及0x0100-0x2700的字元進行轉義，基本上就覆寫的比較全面了。
用javascript的正規表達式可以寫為：
this.REGX_HTML_ENCODE = /“|&|’||[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g;
2)為保證轉義結果對浏覽器的無差别，轉義編碼為實體編号，而不用實體名稱。
3)空格(0x20)通常轉義為“ ”也就是“ ”。
轉義的代碼非常簡單：
this.encodeHtml = function(s){
return (typeof s != "string") ? s :
s.replace(this.REGX_HTML_ENCODE,
function($0){
var c = $0.charCodeAt(0), r = [""];
c = (c == 0x20) ? 0xA0 : c;
r.push(c); r.push(";");
return r.join("");
});
};
回目錄
2、反轉義
既然有轉義，自然需要反轉義。
1) 對“num;”實體編号的轉義，直接提取編号然後fromCharCode就可以得到字元。
2) 對于諸如“
this.HTML_DECODE = {
"<" : "
">" : ">",
"&" : "&",
" ": " ",
""": "\"",
"©": "©"
// Add more
};
由此我們可以有反轉義的正規表達式：
this.REGX_HTML_DECODE = /&\w+;|(\d+);/g;
反轉的代碼也很簡單，如下：
this.decodeHtml = function(s){
return (typeof s != "string") ? s :
s.replace(this.REGX_HTML_DECODE,
function($0,$1){
var c = this.HTML_ENCODE[$0]; // 嘗試查表
if(c === undefined){
// Maybe is Entity Number
if(!isNaN($1)){
c = String.fromCharCode(($1 == 160) ? 32 : $1);
}else{
// Not Entity Number
c = $0;
}
}
return c;
});
};
回目錄
3、一個有意思的認識
其實在用正規表達式轉義之前，我一直都是用周遊整個字元串，逐個比較字元的方式。直到有一天，看到一篇文章說，javascript正規表達式是C實作的，比自己用javascript周遊字元要快，于是我就試着改寫成上面這種方式。雖然代碼看起來的确顯得神秘而又牛叉，但遺憾的是，在我的Chrome 11 (FreeBSD 64 9.0)上，周遊字元轉義/反轉的方式要比上面正規表達式的代碼快2到3倍(字元串長度越長越明顯)。其實，想想也能明白為什麼。
回目錄
4、完整版本的代碼
$package("js.lang"); // 沒有包管理時，也可簡單寫成 js = {lang:{}};
js.lang.String = function(){
this.REGX_HTML_ENCODE = /"|&|'||[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g;
this.REGX_HTML_DECODE = /&\w+;|(\d+);/g;
this.REGX_TRIM = /(^\s*)|(\s*$)/g;
this.HTML_DECODE = {
"<" : "
">" : ">",
"&" : "&",
" ": " ",
""": "\"",
"©": ""
// Add more
};
this.encodeHtml = function(s){
s = (s != undefined) ? s : this.toString();
return (typeof s != "string") ? s :
s.replace(this.REGX_HTML_ENCODE,
function($0){
var c = $0.charCodeAt(0), r = [""];
c = (c == 0x20) ? 0xA0 : c;
r.push(c); r.push(";");
return r.join("");
});
};
this.decodeHtml = function(s){
var HTML_DECODE = this.HTML_DECODE;
s = (s != undefined) ? s : this.toString();
return (typeof s != "string") ? s :
s.replace(this.REGX_HTML_DECODE,
function($0, $1){
var c = HTML_DECODE[$0];
if(c == undefined){
// Maybe is Entity Number
if(!isNaN($1)){
c = String.fromCharCode(($1 == 160) ? 32:$1);
}else{
c = $0;
}
}
return c;
});
};
this.trim = function(s){
s = (s != undefined) ? s : this.toString();
return (typeof s != "string") ? s :
s.replace(this.REGX_TRIM, "");
};
this.hashCode = function(){
var hash = this.__hash__, _char;
if(hash == undefined || hash == 0){
hash = 0;
for (var i = 0, len=this.length; i < len; i++) {
_char = this.charCodeAt(i);
hash = 31*hash + _char;
hash = hash & hash; // Convert to 32bit integer
}
hash = hash & 0x7fffffff;
}
this.__hash__ = hash;
return this.__hash__;
};
};
js.lang.String.call(js.lang.String);
在實際的使用中可以有兩種方式：
1)使用js.lang.String.encodeHtml(s)和js.lang.String.decodeHtml(s)。
2)還可以直接擴充String的prototype
js.lang.String.call(String.prototype);
// 那麼
var str = "
&'\"中國abc def";
var ec_str = str.encodeHtml();
document.write(ec_str);
document.write(""); // CU的部落格線上編輯有bug,
放不上來！！！
var dc_str = ec_str.decodeHtml();
document.write(dc_str);
回目錄
其他
function html_encode(str)
{
var s = "";
if (str.length == 0) return "";
s = str.replace(/&/g, "&");
s = s.replace(/
s = s.replace(/>/g, ">");
s = s.replace(/ /g, " ");
s = s.replace(/\'/g, "'");
s = s.replace(/\"/g, """);
s = s.replace(/\n/g, "
");
return s;
}
function html_decode(str)
{
var s = "";
if (str.length == 0) return "";
s = str.replace(/&/g, "&");
s = s.replace(/</g, "
s = s.replace(/>/g, ">");
s = s.replace(/ /g, " ");
s = s.replace(/'/g, "\'");
s = s.replace(/"/g, "\"");
s = s.replace(/
/g, "\n");
return s;
}
console.log(html_decode('<div>123</div>'));
console.log(html_encode(html_decode('<div>123</div>')));
回目錄
【轉義字元】HTML 字元實體< >: &等
http://www.cnblogs.com/LiuLiangXuan/p/5212155.html
在開發中遇到javascript從背景擷取的url 會被轉義，如：http://localhost:8080/Home/Index?a=14&b=15&c=123，想把它轉成http://localhost:8080/Home/Index?a=14&b=15&c=123
網上找了半天的解決方案：
轉義分為escapeHTML和unescapeHTML，先看兩個函數的實作。
js代碼：
escapeHTML: function(a){
a = "" + a;
return a.replace(/&/g, "&").replace(//g, ">").replace(/"/g, """).replace(/'/g, "'");;
},
unescapeHTML: function(a){
a = "" + a;
return a.replace(/</g, "").replace(/&/g, "&").replace(/"/g, '"').replace(/'/g, "'");
},
1，escapeHTML将< > & “ ‘轉成字元實體
使用場景：
(1)使用者在頁面中錄入(比如輸入框) ， js将該内容送出給後端儲存
(2)顯示時，後端将字元串傳回前端；js接收到之後：
a, 使用escapeHTML，将字元串轉為 此時，浏覽器将能正确解析，因為浏覽器接收到實體字元後，轉成對應的尖括号等。
b, 不使用escapeHTML，浏覽器一看到
2，unescapeHTML将字元實體轉成< > & “ ‘
使用場景：
後端将已經轉義後的内容顯示到頁面；比如
js收到後：
a，前端進行unescapeHTML，則可以直接dom操作，将标簽顯示到頁面。
b，前端沒有unescapeHTML，則原樣輸出，但此時并沒有執行。
轉義字元：
提示：使用實體名而不是數字的好處是，名稱易于記憶。不過壞處是，浏覽器也許并不支援所有實體名稱(對實體數字的支援卻很好)。