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.具体实现代码
1var HtmlUtil = {
2/*1.⽤浏览器内部转换器实现html转码*/
3 htmlEncode:function (html){
pdf转html4//1.⾸先动态创建⼀个容器标签元素，如DIV
5var temp = ateElement ("div");
6//2.然后将要转换的字符串设置为这个元素的innerText(ie⽀持)或者textContent(⽕狐，google⽀持)
7 (Content != undefined ) ? (Content = html) : (temp.innerText = html);
8//3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
9var output = temp.innerHTML;
10 temp = null;
11return output;
12 },
13/*2.⽤浏览器内部转换器实现html解码*/
14 htmlDecode:function (text){
15//1.⾸先动态创建⼀个容器标签元素，如DIV
16var temp = ateElement("div");
17//2.然后将要转换的字符串设置为这个元素的innerHTML(ie，⽕狐，google都⽀持)
18 temp.innerHTML = text;
19//3.最后返回这个元素的innerText(ie⽀持)或者textContent(⽕狐，google⽀持)，即得到经过HTML解码的字符串了。
20var output = temp.innerText || Content;
21 temp = null;
22return output;
23 }
24 };
测试：
1var html = "<br>aaaaaa<p>bbbb</p>";
2var encodeHtml = HtmlUtil.htmlEncode(html);
3 alert("encodeHtml：" + encodeHtml);
4var decodeHtml = HtmlUtil.htmlDecode(encodeHtml);
5 alert("decodeHtml：" + decodeHtml);
运⾏结果：
⼆、⽤正则表达式进⾏转换处理
使⽤正则表达式也是⼀种常⽤的处理⽅式，实现原理就是使⽤替换的⽅式来实现转码和解码，转码时把<>，空格符，&，'，""替换成html编码，解码就把html编码替换成对应的字符，实现代码如下：
1var HtmlUtil = {
2/*1.⽤正则表达式实现html转码*/
3 htmlEncodeByRegExp:function (str){
4var s = "";
5if(str.length == 0) return "";
6 s = place(/&/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,""");
12return s;
13 },
14/*2.⽤正则表达式实现html解码*/
15 htmlDecodeByRegExp:function (str){
16var s = "";
17if(str.length == 0) return "";
18 s = place(/&/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,"\"");
24return s;
25 }
26 };
测试代码：
1var html = "<br>ccccc<p>aaaaa</p>";
2var encodeHTML = HtmlUtil.htmlEncodeByRegExp(html);
3 alert("⽤正则表达式进⾏html转码，encodeHTML：" + encodeHTML);
4var decodeHTML = HtmlUtil.htmlDecodeByRegExp("⽤正则表达式进⾏html解码：" + encodeHTML);
5 alert(decodeHTML);
测试结果：
三、封装HtmlUtil⼯具类
将两种⽅式封装HtmlUtil⼯具类，⽅便在开发中使⽤，完整代码如下：
1var HtmlUtil = {
2/*1.⽤浏览器内部转换器实现html转码*/
3 htmlEncode:function (html){
4//1.⾸先动态创建⼀个容器标签元素，如DIV
5var temp = ateElement ("div");
6//2.然后将要转换的字符串设置为这个元素的innerText(ie⽀持)或者textContent(⽕狐，google⽀持)
7 (Content != undefined ) ? (Content = html) : (temp.innerText = html);
8//3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
9var output = temp.innerHTML;
10 temp = null;
11return output;
12 },
13/*2.⽤浏览器内部转换器实现html解码*/
14 htmlDecode:function (text){
15//1.⾸先动态创建⼀个容器标签元素，如DIV
16var temp = ateElement("div");
17//2.然后将要转换的字符串设置为这个元素的innerHTML(ie，⽕狐，google都⽀持)
18 temp.innerHTML = text;
19//3.最后返回这个元素的innerText(ie⽀持)或者textContent(⽕狐，google⽀持)，即得到经过HTML解码的字符串了。20var output = temp.innerText || Content;
21 temp = null;
22return output;
23 },
24/*3.⽤正则表达式实现html转码*/
25 htmlEncodeByRegExp:function (str){
26var s = "";
27if(str.length == 0) return "";
28 s = place(/&/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,""");
34return s;
35 },
36/*4.⽤正则表达式实现html解码*/
37 htmlDecodeByRegExp:function (str){
38var s = "";
39if(str.length == 0) return "";
40 s = place(/&/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,"\"");
46return s;
47 }
48 };
发布评论