最常见的做法是采用正则表达式替换的方法,将特殊字符如 < > & 等进行替换,htmlencode的时候这样替换还比较容易,但发过来htmldecode的时候就不一定好用了,因为需要反转的情况很多,出了常见的<>&以外,还有 ©"®等数十个字符实体,还有AB中文或者中文之类以字符的Unicode编码的十进制或16进制表示的转义,难以全部列举,用逐个替换不仅代码冗长而且低效,还容易漏掉某些字符。
代码如下:
function htmlencode(s){ var div = document.createElement('div'); div.appendChild(document.createTextNode(s)); return div.innerHTML; } function htmldecode(s){ var div = document.createElement('div'); div.innerHTML = s; return div.innerText || div.textContent; }
相当简洁!
编码原理就是创建TextNode节点,附加到容器中,再取容器的innerHTML.
解码原理是将字符串赋給容器的innerHTML,再取innerText或textContent.
测试一下:
//测试 document.onclick = function (){ //<p> & </p> alert(htmlencode('<p> & </p>')); //<p> & © ABC 中文 中文 </p> alert(htmldecode('<p> & © ABC 中文 中文 </p>')); }
效果不错。
应用实例:(TP5-由于不想使用ajax去获取数据,我是接收了后台php传过来的参数,所以html对json数据做了一些操作,所以要使用特定方法对这些数据进行转义处理),附后台代码
1 $this->assign([
"sumdata"=>$sumdata,"title"=>$this->title,"gameAttr"=>json_encode($gameAttr),"week"=>json_encode($dateArr),"weekdata"=>json_encode($new_weekdata)
]);
由于后台传给前台,在js中接受php参数不能是数组,所以后台json_encode()进行json格式化,传给前台,然后在js中取php的值
1 <script> 2 //转义方法 3 function HTMLDecode (input) 4 { 5 var converter = document.createElement("DIV"); 6 converter.innerHTML = input; 7 var output = converter.innerText; 8 converter = null; 9 return output; 10 } 11 //环形图数据 12 var game_attr=JSON.parse(HTMLDecode("{$gameAttr}")); 13 //折线图一周内日期(由远到今) 14 var week=JSON.parse(HTMLDecode("{$week}")); 15 //一周内的数据 16 var weekdata=JSON.parse(HTMLDecode("{$weekdata}")); 17 </script>
htmldecode对入参有要求,如果入参不是合法的encode后的结果,可能无法得到预期结果。
声明:此博有部分内容为转载,版权归原作者所有~