Js怎麼實現HTML標籤轉義及反轉義[朗讀]

轉義中文及html的完整代碼。
$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 = {
"&lt;":"<&quot
"&gt;":">&quot
"&amp;":"&&quot
"&nbsp;":"&quot
"&quot;":"\"&quot
"&copy;":"&quot
// 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&quot
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 = "&quot
if (str.length == 0) return "&quot
s、str.replace(/&/g,"&amp;")。
s、s.replace(/</g,"&lt;")。
s、s.replace(/>/g,"&gt;")。
s、s.replace(/ /g,"&nbsp;")。
s、s.replace(/\'/g,"&#39;")。
s、s.replace(/\"/g,"&quot;")。
s、s.replace(/\n/g,"<br/>")。
return s
}
function html_decode(str)。
{
var s = "&quot
if (str.length == 0) return "&quot
s、str.replace(/&amp;/g,"&")。
s、s.replace(/&lt;/g,"<")。
s、s.replace(/&gt;/g,">")。
s、s.replace(/&nbsp;/g,"")。
s、s.replace(/&#39;/g,"\'")。
s、s.replace(/&quot;/g,"\"")。
s、s.replace(/<br\/>/g,"\n")。
return s
}
console.log(html_decode('&lt;div&gt;123&lt;/div&gt;'))。
console.log(html_encode(html_decode('&lt;div&gt;123&lt;/div&gt;')))。

轉義分為escapehtml和unescapehtml,先看兩個函數的實現。
js代碼。
/**。
* @function escapehtml 轉義html腳本 <>&"&#39。
* @param a -。
* 字符串。
*/。
escapehtml:function(a){
a、quot;"+ a
return a.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&apos;")。
}
/**。
* @function unescapehtml 還原html腳本 <>&"&#39。
* @param a -。
* 字符串。
*/。
unescapehtml:function(a){
a、quot;"+ a
return a.replace(/&lt;/g,"<").replace(/&gt;/g,">").replace(/&amp;/g,"&").replace(/&quot;/g,'"').replace(/&apos;/g,"'")。
}
1,escapehtml將<>&「 『轉成字符實體。
使用場景。
（1）用戶在頁面中錄入（比如輸入框）,js將該內容提交給後端保存。
（2）顯示時,後端將字符串返回前端;js接收到之後。
a、使用escapehtml,將字符串轉為 <script>alert(2);</script>此時,瀏覽器將能正確解析,因為瀏覽器接收到實體字符後,轉成對應的尖括號等。
b、不使用escapehtml,瀏覽器一看到<,便認為是html標籤的開始,直接把剛才的字符串當腳本執行了,這就是xss漏洞。
2,unescapehtml將字符實體轉成<>&「 『。
使用場景:
後端將已經轉義後的內容顯示到頁面;比如<script>alert(2);</script&gt
js收到後。
a、前端進行unescapehtml,則可以直接dom操作,將標籤顯示到頁面。
b、前端沒有unescapehtml,則原樣輸出,但此時並沒有執行。
轉義字符:
提示:使用實體名而不是數字的好處是,名稱易於記憶.不過壞處是,瀏覽器也許並不支持所有實體名稱（對實體數字的支持卻很好）。