博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript处理HTML的Encode(转码)和Decode(解码)总结
阅读量:6313 次
发布时间:2019-06-22

本文共 4158 字,大约阅读时间需要 13 分钟。

hot3.png

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.具体实现代码

var HtmlUtil = {     /*1.用浏览器内部转换器实现html转码*/     htmlEncode:function (html){         //1.首先动态创建一个容器标签元素,如DIV         var temp = document.createElement ("div");       //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐,google支持)         (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);        //3.最后返回这个元素的innerHTML,即得到经过HTML编码转换的字符串了        var output = temp.innerHTML;        temp = null;         return output;    },     /*2.用浏览器内部转换器实现html解码*/     htmlDecode:function (text){      //1.首先动态创建一个容器标签元素,如DIV       var temp = document.createElement("div");         //2.然后将要转换的字符串设置为这个元素的innerHTML(ie,火狐,google都支持)     temp.innerHTML = text;       //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐,google支持),即得到经过HTML解码的字符串了。         var output = temp.innerText || temp.textContent;      temp = null;         return output;  }};

测试:

var html = "
aaaaaa

bbbb

"; var encodeHtml = HtmlUtil.htmlEncode(html);alert("encodeHtml:" + encodeHtml);var decodeHtml = HtmlUtil.htmlDecode(encodeHtml); alert("decodeHtml:" + decodeHtml);

运行结果:

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

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

 var HtmlUtil = {    /*1.用正则表达式实现html转码*/    htmlEncodeByRegExp:function (str){           var s = "";         if(str.length == 0) return "";         s = str.replace(/&/g,"&");         s = s.replace(//g,">");         s = s.replace(/ /g," ");         s = s.replace(/\'/g,"'");         s = s.replace(/\"/g,""");         return s;     },   /*2.用正则表达式实现html解码*/   htmlDecodeByRegExp:function (str){           var s = "";         if(str.length == 0) return "";         s = str.replace(/&/g,"&");         s = s.replace(/</g,"<");         s = s.replace(/>/g,">");         s = s.replace(/ /g," ");         s = s.replace(/'/g,"\'");         s = s.replace(/"/g,"\"");         return s;     }};

测试代码:

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工具类,方便在开发中使用,完整代码如下:

var HtmlUtil = {    /*1.用浏览器内部转换器实现html转码*/    htmlEncode:function (html){        //1.首先动态创建一个容器标签元素,如DIV        var temp = document.createElement ("div");        //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐,google支持)        (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);        //3.最后返回这个元素的innerHTML,即得到经过HTML编码转换的字符串了        var output = temp.innerHTML;        temp = null;        return output;    },    /*2.用浏览器内部转换器实现html解码*/    htmlDecode:function (text){        //1.首先动态创建一个容器标签元素,如DIV        var temp = document.createElement("div");        //2.然后将要转换的字符串设置为这个元素的innerHTML(ie,火狐,google都支持)        temp.innerHTML = text;        //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐,google支持),即得到经过HTML解码的字符串了。        var output = temp.innerText || temp.textContent;        temp = null;        return output;    },    /*3.用正则表达式实现html转码*/    htmlEncodeByRegExp:function (str){           var s = "";         if(str.length == 0) return "";         s = str.replace(/&/g,"&");         s = s.replace(//g,">");         s = s.replace(/ /g," ");         s = s.replace(/\'/g,"'");         s = s.replace(/\"/g,""");         return s;     },   /*4.用正则表达式实现html解码*/   htmlDecodeByRegExp:function (str){           var s = "";         if(str.length == 0) return "";         s = str.replace(/&/g,"&");         s = s.replace(/</g,"<");         s = s.replace(/>/g,">");         s = s.replace(/ /g," ");         s = s.replace(/'/g,"\'");         s = s.replace(/"/g,"\"");         return s;     }};

转载于:https://my.oschina.net/gaoxadmin/blog/421052

你可能感兴趣的文章
input chrome下输入之后背景变为黄色的解决办法
查看>>
MySQL数据库的安装教程及相关问题
查看>>
MHDD检测电脑硬盘坏道
查看>>
PHP变量在内存中的存储方式
查看>>
Jupyter Notebook中让python2和python3内核共存
查看>>
pandas.read_csv() 报错 OSError: Initializing from file failed,报错原因分析和解决方法
查看>>
用例图简介(转)
查看>>
算法思想(一)理解复杂度
查看>>
MongoDB之安装部署
查看>>
准备工作——画具篇
查看>>
手动实现jQuery Tools里面tab功能
查看>>
用JAVA写的一个十进制转换任意进制数的程序
查看>>
GDOI2014 beyond(D2T3) exkmp
查看>>
O2O、C2C、B2B、B2C
查看>>
List接口实现类及其区别
查看>>
CCF201503-4 网络延时(100分)
查看>>
php密码对称encrypt加密
查看>>
OO5-7总结
查看>>
libqxt编译
查看>>
postgresql支持sys_guid()
查看>>