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

最常见的做法是采用正则表达式替换的方法，将特殊字符如 < > & 等进行替换，htmlencode的时候这样替换还比较容易，但发过来htmldecode的时候就不一定好用了，因为需要反转的情况很多，出了常见的&lt;&gt;&amp;以外，还有&nbsp;&copy;&quot;&reg;等数十个字符实体，还有&#65;&#66;&#20013;&#25991;或者&#x4E2D;&#x6587;之类以字符的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('&lt;p&gt; &amp; &copy; &#65;&#66;&#67; &#20013;&#25991; &#x4E2D;&#x6587; &lt;/p&gt;'));  
}  

效果不错。 

应用实例：（TP5-由于不想使用ajax去获取数据，我是接收了后台php传过来的参数，所以html对json数据做了一些操作，所以要使用特定方法对这些数据进行转义处理），附后台代码

$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的值

<script>
    //转义方法
    function HTMLDecode (input)
    {
        var converter = document.createElement("DIV");
        converter.innerHTML = input;
        var output = converter.innerText;
        converter = null;
        return output;
    }
    //环形图数据
    var game_attr=JSON.parse(HTMLDecode("{$gameAttr}"));
    //折线图一周内日期(由远到今)
    var week=JSON.parse(HTMLDecode("{$week}"));
    //一周内的数据
    var weekdata=JSON.parse(HTMLDecode("{$weekdata}"));
</script>

htmldecode对入参有要求，如果入参不是合法的encode后的结果，可能无法得到预期结果。

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

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