javascript另类方法高效实现htmlencode()与htmldecode()函数，附带PHP请求完整操作

最常见的做法是采用正则表达式替换的方法，将特殊字符如 < > & 等进行替换，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 (){  
    //&lt;p&gt; &amp; &lt;/p&gt;  
    alert(htmlencode('<p> & </p>'));  
  
    //<p> & © ABC 中文 中文 </p>  
    alert(htmldecode('&lt;p&gt; &amp; &copy; &#65;&#66;&#67; &#20013;&#25991; &#x4E2D;&#x6587; &lt;/p&gt;'));  
}

效果不错。

应用实例：（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后的结果，可能无法得到预期结果。

声明：此博有部分内容为转载，版权归原作者所有～

参考地址：https://www.cnblogs.com/waw/p/8452764.html