您当前位置: 南顺网络>> 官方资讯>> 建站知识

javascript对HTML字符转义与反转义

1.背景:在项目中,经常遇到一些字符需要进行转义后才能显示到界面上,如“&”,在界面中显示的是“&”,在html中书写“&”,显示在界面的中的依然是“&”。

这时候,就需要进行转义

 

2.解决方案

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<script>
 
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,"'");
 
       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;
 
    }
 
  };
 
</script>

使用方法:HtmlUtil.htmlDecodeByRegExp("&")

PS:使用正则

使用正则转码:

?

1
2
3
4
5
6
7
var value = document.getElementById('input').value.trim();
    //对用户输入进行转义
    value = value.replace(/&/g,"&");
    value = value.replace(/</g,"<");
    value = value.replace(/>/g,">");
    value = value.replace(/ /g," ");
    value = value.replace(/"/g,'"');

使用正则解码:

?

1
2
3
4
5
6
7
var value = e.target.innerText;
     // value = decodeURIComponent(value);
     value = value.replace(/&/g,"&");
     value = value.replace(/</g,"<");
     value = value.replace(/>/g,">");
     value = value.replace(/ /g," ");
     value = value.replace(/"/g,"'");


编辑:--龚凯