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,则原样输出,但此时并没有执行。
转义字符:
提示:使用实体名而不是数字的好处是,名称易于记忆.不过坏处是,浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。