javascript处理HTML的Encode(转码)和Decode(解码)总结
来源:互联网 发布:caliber软件 编辑:程序博客网 时间:2024/04/29 18:06
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 return output;12 },13 /*2.用浏览器内部转换器实现html解码*/14 htmlDecode:function (text){15 //1.首先动态创建一个容器标签元素,如DIV16 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);
运行结果:
二、用正则表达式进行转换处理
使用正则表达式也是一种常用的处理方式,实现原理就是使用替换的方式来实现转码和解码,转码时把<>,空格符,&,',""替换成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,"<"); 8 s = s.replace(/>/g,">"); 9 s = s.replace(/ /g," ");10 s = s.replace(/\'/g,"'");11 s = s.replace(/\"/g,""");12 return s; 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,"<");20 s = s.replace(/>/g,">");21 s = s.replace(/ /g," ");22 s = s.replace(/'/g,"\'");23 s = s.replace(/"/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.首先动态创建一个容器标签元素,如DIV16 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,"&");29 s = s.replace(/</g,"<");30 s = s.replace(/>/g,">");31 s = s.replace(/ /g," ");32 s = s.replace(/\'/g,"'");33 s = s.replace(/\"/g,""");34 return s; 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,"<");42 s = s.replace(/>/g,">");43 s = s.replace(/ /g," ");44 s = s.replace(/'/g,"\'");45 s = s.replace(/"/g,"\"");46 return s; 47 }48 };
0 0
- javascript处理HTML的Encode(转码)和Decode(解码)总结
- javascript处理HTML的Encode(转码)和Decode(解码)总结
- javascript处理HTML的Encode(转码)和Decode(解码)总结
- javascript处理HTML的Encode(转码)和Decode(解码)总结
- javascript处理HTML的Encode(转码)和Decode(解码)总结
- javascript处理HTML的Encode(转码)和Decode(解码)总结
- javascript处理HTML的Encode(转码)和Decode(解码)总结
- JavaScript处理HTML的Encode(转码)和Decode(解码)
- javascript处理HTML的Encode(转码)和Decode(解码)总结,避免js脚本注入问题
- javascript编码encode和解码decode等问题
- Java基础之字符串的编码(Encode)和解码(Decode)
- Python中的decode解码和encode编码
- 关于python的编解码(decode, encode)
- decode、encode、unicode解码
- asp对中文编码及解码,Decode和Encode中文网址处理
- good -- URLEncoder.encode 和 URLDecoder.decode 处理url的特点
- html Encode html Decode 的方法
- encode和decode的妙用
- oracle调用存储过程和函数返回结果集
- 面试题21:包含min函数的栈
- 日经春秋 20150531
- 机房重构之七层登录
- Java基础知识之IO(2)
- javascript处理HTML的Encode(转码)和Decode(解码)总结
- 日经社説 20150531 各国で鉄鋼過剰への対応を
- Redhat6.2升级为6.3之后再降级为Redhat6.2 (linux内核降级)
- mybatis连接mysql数据库实现的jdbc功能
- 跟我学Java反射——二步曲
- 个人发展(职业规划)
- Project Euler: Problem 17 Number letter counts
- 日经社説 20150531 G7は世界経済の安定へ責任を果たせ
- 文件创建、读写操作