html t转义,JavaScript对HTML字符转义与反转义（转码和解码）

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.首先动态创建一个容器标签元素，如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 = "
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(/

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 = "
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 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,"&");

29 s = s.replace(/

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 };