前端实现HTML标签转义及反转义，又吃螃蟹喽

背景：

最近在做一个输入memo之后保存到数据库，当时没注意，等到上线运行一段时间后发现&lt;p&gt;&lt;b&gt等字符很多，觉得有问题，就去试了一下，输入< @和html标签，我屮艸芔茻(戳)，居然给我转译存到db里面去了。后面发现在api里面有个插件对特殊的标签进行了转译。

解决方式：

既然保存成那个鬼样子了，我也吐了，那就硬来吧如下：

• html里的innerText和innerHTML其实可以实现相互转译
• 转译(把标签转译成特殊字符)

function htmlEncode(html) {
    var output=''
    if(html){
        var temp = document.createElement("div");
        temp.innerText = html
        output = temp.innerHTML;
    }   
    return output;
}

• 反转译(把特殊字符转移成标签)

function htmlDecode(text) {
    var output=''
    if(text){
        var temp = document.createElement("div"); 
        temp.innerHTML = text; 
        output = temp.innerText; 
    }
    return output; 
} 

• 测试

var htmlText = "<p><b>looper.zhuo</b></p> ";
var encodeText = htmlEncode(htmlText);
console.log(encodeText);//&lt;p&gt;&lt;b&gt;looper.zhuo&lt;/b&gt;&lt;/p&gt;

var text = "&lt;p&gt;&lt;b&gt;looper.zhuo&lt;/b&gt;&lt;/p&gt; ";
var decodeText = htmlDecode(text);
console.log(decodeText);//<p><b>looper.zhuo</b></p> ;

这样就可以解决一切转译出现的问题哦