js轉義和反轉義html
本文地址： http://www.cnblogs.com/daysme/p/7100553.html
下面的代碼網上常用有，但不是想要的。
JS實現HTML標簽轉義及反轉義
http://blog.csdn.net/wangyuheng77/article/details/50315051
簡單說一下業務場景，前臺用戶通過input輸入內容，在離開焦點時，將內容在div中顯示。
這時遇到一個問題，如果用戶輸入了html標簽，則在div顯示中，標簽被解析。
由於是純前端操作，不涉及後端，因此需要通過js對輸入內容進行轉義。
這裏提供一個非常簡單有效的轉義方案，利用了innerHTML和innerText
因為innerText（textContent）會獲取純文本內容，忽略html節點標簽，而innerHTML會顯示標簽內容，
所以我們先將需轉義的內容賦值給innerText（textContent），再獲取它的innerHTML屬性，這時獲取到的就是轉義後文本內容。
代碼如下：
//HTML轉義
function HTMLEncode(html) {
var temp = document.createElement("div");
(temp.textContent != null 通過測試結果，可以看到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 = "<p><b>123&456</b></p>";
var encodeText = HTMLEncode(tagText);
console.log(encodeText);//<p><b>123&456</b></p>
console.log(HTMLDecode(encodeText)); //<p><b>123&456</b></p>
當 HTMLDecode(‘1<’) 時返回了 1< ，而我希望希望 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 = "<B>&‘\"中國</B>abc def";
var ec_str = str.encodeHtml();
document.write(ec_str);
document.write("<bt><bt>"); // 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(/</g, "<");
s = s.replace(/>/g, ">");
s = s.replace(/ /g, " ");
s = s.replace(/\‘/g, "'");
s = s.replace(/\"/g, """);
s = s.replace(/\n/g, "<br/>");
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(/<br\/>/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代碼：
/**
* @function escapeHTML 轉義html腳本 < > & " ‘
* @param a -
* 字符串
*/
escapeHTML: function(a){
a = "" + a;
return a.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/‘/g, "'");;
},
/**
* @function unescapeHTML 還原html腳本 < > & " ‘
* @param a -
* 字符串
*/
unescapeHTML: function(a){
a = "" + a;
return a.replace(/</g, "<").replace(/>/g, ">").replace(/&/g, "&").replace(/"/g, ‘"‘).replace(/'/g, "‘");
},
1，escapeHTML將< > & “ ‘轉成字符實體
使用場景：
（1）用戶在頁面中錄入（比如輸入框） ， js將該內容提交給後端保存
（2）顯示時，後端將字符串返回前端；js接收到之後：
a, 使用escapeHTML，將字符串轉為 <script>alert(2);</script>此時，瀏覽器將能正確解析，因為瀏覽器接收到實體字符後，轉成對應的尖括號等。
b, 不使用escapeHTML，瀏覽器一看到<，便認為是html標簽的開始，直接把剛才的字符串當腳本執行了，這就是xss漏洞。
2，unescapeHTML將字符實體轉成< > & “ ‘
使用場景：
後端將已經轉義後的內容顯示到頁面；比如<script>alert(2);</script>
js收到後：
a，前端進行unescapeHTML，則可以直接dom操作，將標簽顯示到頁面。
b，前端沒有unescapeHTML，則原樣輸出，但此時並沒有執行。
轉義字符：
提示：使用實體名而不是數字的好處是，名稱易於記憶。不過壞處是，瀏覽器也許並不支持所有實體名稱（對實體數字的支持卻很好）。
?js轉義和反轉義html