html sql编码转换为字符串,javascript处理HTML的Encode(转码)和Decode(解码)总结

HTML的Encode(转码)和解码(Decode)在平时的开发中也是经常要处理的，在这里总结了使用javascript处理HTML的Encode(转码)和解码(Decode)的常用方式

一、用浏览器内部转换器实现转换

1.1.用浏览器内部转换器实现html转码

首先动态创建一个容器标签元素，如DIV，然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)，最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了。

1.2.用浏览器内部转换器实现html解码

首先动态创建一个容器标签元素，如DIV，然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)，最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。

1.3.具体实现代码

1 var HtmlUtil ={2 /*1.用浏览器内部转换器实现html转码*/

3 htmlEncode:function(html){4 //1.首先动态创建一个容器标签元素，如DIV

5 var temp = document.createElement ("div");6 //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)

7 (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText =html);8 //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了

9 var output =temp.innerHTML;10 temp = null;11 returnoutput;12 },13 /*2.用浏览器内部转换器实现html解码*/

14 htmlDecode:function(text){15 //1.首先动态创建一个容器标签元素，如DIV

16 var temp = document.createElement("div");17 //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)

18 temp.innerHTML =text;19 //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。

20 var output = temp.innerText ||temp.textContent;21 temp = null;22 returnoutput;23 }24 };

测试：

1 var html = "
aaaaaa

bbbb

";2 var encodeHtml =HtmlUtil.htmlEncode(html);3 alert("encodeHtml：" +encodeHtml);4 var decodeHtml =HtmlUtil.htmlDecode(encodeHtml);5 alert("decodeHtml：" + decodeHtml);

运行结果：

二、用正则表达式进行转换处理

使用正则表达式也是一种常用的处理方式，实现原理就是使用替换的方式来实现转码和解码，转码时把<>，空格符，&，'，""替换成html编码，解码就把html编码替换成对应的字符，实现代码如下：

1 var HtmlUtil ={2 /*1.用正则表达式实现html转码*/

3 htmlEncodeByRegExp:function(str){4 var s = "";5 if(str.length == 0) return "";6 s = str.replace(/&/g,"&");7 s = s.replace(//g,">");9 s = s.replace(/ /g," ");

10 s = s.replace(/\'/g,"'");11 s = s.replace(/\"/g,""");12 returns;13 },14 /*2.用正则表达式实现html解码*/

15 htmlDecodeByRegExp:function(str){16 var s = "";17 if(str.length == 0) return "";18 s = str.replace(/&/g,"&");19 s = s.replace(/</g,"");21 s = s.replace(/ /g," ");22 s = s.replace(/'/g,"\'");23 s = s.replace(/"/g,"\"");24 returns;25 }26 };

测试代码：

1 var html = "
ccccc

aaaaa

";2 var encodeHTML =HtmlUtil.htmlEncodeByRegExp(html);3 alert("用正则表达式进行html转码，encodeHTML：" +encodeHTML);4 var decodeHTML = HtmlUtil.htmlDecodeByRegExp("用正则表达式进行html解码：" +encodeHTML);5 alert(decodeHTML);

测试结果：

三、封装HtmlUtil工具类

将两种方式封装HtmlUtil工具类，方便在开发中使用，完整代码如下：

1 var HtmlUtil ={2 /*1.用浏览器内部转换器实现html转码*/

3 htmlEncode:function(html){4 //1.首先动态创建一个容器标签元素，如DIV

5 var temp = document.createElement ("div");6 //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)

7 (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText =html);8 //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了

9 var output =temp.innerHTML;10 temp = null;11 returnoutput;12 },13 /*2.用浏览器内部转换器实现html解码*/

14 htmlDecode:function(text){15 //1.首先动态创建一个容器标签元素，如DIV

16 var temp = document.createElement("div");17 //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)

18 temp.innerHTML =text;19 //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。

20 var output = temp.innerText ||temp.textContent;21 temp = null;22 returnoutput;23 },24 /*3.用正则表达式实现html转码*/

25 htmlEncodeByRegExp:function(str){26 var s = "";27 if(str.length == 0) return "";28 s = str.replace(/&/g,"&");29 s = s.replace(//g,">");31 s = s.replace(/ /g," ");

32 s = s.replace(/\'/g,"'");33 s = s.replace(/\"/g,""");34 returns;35 },36 /*4.用正则表达式实现html解码*/

37 htmlDecodeByRegExp:function(str){38 var s = "";39 if(str.length == 0) return "";40 s = str.replace(/&/g,"&");41 s = s.replace(/</g,"");43 s = s.replace(/ /g," ");44 s = s.replace(/'/g,"\'");45 s = s.replace(/"/g,"\"");46 returns;47 }48 };