Javascript processing of HTML Encode) and Decode (Decoding) Summary

Summary of encode and decode of HTML processed by JavaScript
The encode and decode of HTML are often handled in normal development. Here we summarize the common ways of using JavaScript to process the encode and decode of HTML
1、 Conversion with browser internal converter
1.1. HTML transcoding with browser internal converter
First, create a container tag element dynamically, such as div, then set the string to be converted to innerText (ie support) or textcontent (Firefox, Google support) of this element, and finally return the innerHTML of this element, that is to say, get the character string that has been HTML encoded and converted.
1.2. HTML decoding with browser internal converter
First, create a container tag element dynamically, such as div, then set the string to be converted to the innerHTML of the element (supported by ie, Firefox and Google), and finally return the innerText (supported by IE) or textcontent (supported by Firefox and Google) of the element to get the HTML decoded string.
1.3. Specific implementation code
Copy code
1 var HtmlUtil = {
2 / * 1. HTML transcoding with browser internal converter*/
3     htmlEncode:function (html){
4 / / 1. First, create a container label element dynamically, such as Div
5         var temp = document.createElement ("div");
6 / / 2. Then set the string to be converted to innerText (ie support) or textcontent (Firefox, Google support) of this element
7         (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
8 / / 3. Finally, return the innerHTML of this element, i.e. get the HTML encoded string
9         var output = temp.innerHTML;
10         temp = null;
11         return output;
12}
13 / * 2. HTML decoding with browser internal converter*/
14     htmlDecode:function (text){
15 / / 1. First, create a container label element dynamically, such as Div
16         var temp = document.createElement("div");
17 / / 2. Then set the string to be converted to the innerHTML of this element (supported by ie, Firefox and Google)
18         temp.innerHTML = text;
19 / / 3. Finally, return the innerText (ie support) or textcontent (Firefox, Google support) of this element to get the HTML decoded string.
20         var output = temp.innerText || temp.textContent;
21         temp = null;
22         return output;
23}
24};
Copy code
Test:
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);
Operation result:
2、 Transform with regular expression
Regular expression is also a commonly used processing method. The principle of implementation is to use the replacement method to realize transcoding and decoding. When transcoding, replace the characters of < >, space character, &amp;,, "" with HTML code. When decoding, replace the HTML code with the corresponding characters. The implementation code is as follows:
Copy code
1 var HtmlUtil = {
2 / * 1. HTML transcoding with regular expression*/
3     htmlEncodeByRegExp:function (str){ 
4          var s = "";
5          if(str.length == 0) return "";
6          s = str.replace(/&amp;/g,"&amp;");
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 decoding with regular expression*/
15    htmlDecodeByRegExp:function (str){
16          var s = "";
17          if(str.length == 0) return "";
18          s = str.replace(/&amp;/g,"&amp;");
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};
Copy code
Test code:
1 var html = "<br>ccccc<p>aaaaa</p>";
2 var encodeHTML = HtmlUtil.htmlEncodeByRegExp(html);
3 alert ("HTML transcoding with regular expression, encodehtml:" + encodehtml);
4 var decodehtml = htmlutil.htmldecodebyregexp ("HTML decoding with regular expression:" + encodehtml);
5 alert(decodeHTML);
Test results:
3、 Encapsulate htmlutil utility class
Two methods are used to encapsulate htmlutil tool class, which is convenient to use in development. The complete code is as follows:
Copy code
1 var HtmlUtil = {
2 / * 1. HTML transcoding with browser internal converter*/
3     htmlEncode:function (html){
4 / / 1. First, create a container label element dynamically, such as Div
5         var temp = document.createElement ("div");
6 / / 2. Then set the string to be converted to innerText (ie support) or textcontent (Firefox, Google support) of this element
7         (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
8 / / 3. Finally, return the innerHTML of this element, i.e. get the HTML encoded string
9         var output = temp.innerHTML;
10         temp = null;
11         return output;
12}
13 / * 2. HTML decoding with browser internal converter*/
14     htmlDecode:function (
15 / / 1. First, create a container label element dynamically, such as Div
16         var temp = document.createElement("div");
17 / / 2. Then set the string to be converted to the innerHTML of this element (supported by ie, Firefox and Google)
18         temp.innerHTML = text;
19 / / 3. Finally, return the innerText (ie support) or textcontent (Firefox, Google support) of this element to get the HTML decoded string.
20         var output = temp.innerText || temp.textContent;
21         temp = null;
22         return output;
23}
24 / * 3. HTML transcoding with regular expression*/
25     htmlEncodeByRegExp:function (str){
26          var s = "";
27          if(str.length == 0) return "";
28          s = str.replace(/&amp;/g,"&amp;");
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 decoding with regular expression*/
37    htmlDecodeByRegExp:function (str){
38          var s = "";
39          if(str.length == 0) return "";
40          s = str.replace(/&amp;/g,"&amp;");
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};