您所在的位置:PHP培训学院 > php开发工具 > >JavaScript处理HTML的Encode(转码)和Decode(解码)

JavaScript处理HTML的Encode(转码)和Decode(解码)

2017-12-29 17:59:37 来源:互联网 浏览次数:

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

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.          return output; 
  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.          return output; 
  23.      } 
  24.  }; 

测试:

  1. var html = "<br>aaaaaa<p>bbbb</p>"
  2. var encodeHtml = HtmlUtil.htmlEncode(html); 
  3. alert("encodeHtml:" + encodeHtml); 
  4. var decodeHtml = HtmlUtil.htmlDecode(encodeHtml); 
  5. alert("decodeHtml:" + decodeHtml); 

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

JavaScript处理HTML的Encode(转码)和Decode(解码)

使用正则表达式也是一种常用的处理方式,实现原理就是使用替换的方式来实现转码和解码,转码时把<>,空格符,&,',""替换成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,"&amp;"); 
  7.          s = s.replace(/</g,"&lt;"); 
  8.          s = s.replace(/>/g,"&gt;"); 
  9.          s = s.replace(/ /g,"&nbsp;"); 
  10.          s = s.replace(/\'/g,"&#39;"); 
  11.          s = s.replace(/\"/g,"&quot;"); 
  12.          return s;   
  13.    }, 
  14.    /*2.用正则表达式实现html解码*/ 
  15.    htmlDecodeByRegExp:function (str){   
  16.          var s = ""
  17.          if(str.length == 0) return ""
  18.          s = str.replace(/&amp;/g,"&"); 
  19.          s = s.replace(/&lt;/g,"<"); 
  20.          s = s.replace(/&gt;/g,">"); 
  21.          s = s.replace(/&nbsp;/g," "); 
  22.          s = s.replace(/&#39;/g,"\'"); 
  23.          s = s.replace(/&quot;/g,"\""); 
  24.          return s;   
  25.    } 
  26. }; 

测试代码:

  1. var html = "<br>ccccc<p>aaaaa</p>"
  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.         return output; 
  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.         return output; 
  23.     }, 
  24.     /*3.用正则表达式实现html转码*/ 
  25.     htmlEncodeByRegExp:function (str){   
  26.          var s = ""
  27.          if(str.length == 0) return ""
  28.          s = str.replace(/&/g,"&amp;"); 
  29.          s = s.replace(/</g,"&lt;"); 
  30.          s = s.replace(/>/g,"&gt;"); 
  31.          s = s.replace(/ /g,"&nbsp;"); 
  32.          s = s.replace(/\'/g,"&#39;"); 
  33.          s = s.replace(/\"/g,"&quot;"); 
  34.          return s;   
  35.    }, 
  36.    /*4.用正则表达式实现html解码*/ 
  37.    htmlDecodeByRegExp:function (str){   
  38.          var s = ""
  39.          if(str.length == 0) return ""
  40.          s = str.replace(/&amp;/g,"&"); 
  41.          s = s.replace(/&lt;/g,"<"); 
  42.          s = s.replace(/&gt;/g,">"); 
  43.          s = s.replace(/&nbsp;/g," "); 
  44.          s = s.replace(/&#39;/g,"\'"); 
  45.          s = s.replace(/&quot;/g,"\""); 
  46.          return s;   
  47.    } 
  48. }; 

[免责声明]本文来源于网络转载,仅供学习交流使用,不构成商业目的。版权归原作者所有,如涉及作品内容、版权和其它问题请在30日内与本网联系,我们将在第一时进行处理

优就业官方微信

扫描二维码,即可与小
U亲密互动

优就业官方微博

扫码关注,更有精彩活动
等你参与

优就业官方QQ号

一键加好友

咨询电话:(9:00-22:00)

400-650-7353

优就业PHP培训学院(php.ujiuye.com)-中公优就业旗下PHP研究中心,是PHP培训机构,致力于培养系统实战型PHP精英人才。关注PHP技巧与PHP开发视野。优就业PHP培训学院-更好的PHP培训机构。

 
 
咨询中心
优就业微信扫一扫
微信扫一扫

400-650-7353

加入官方微博