[Method] JS JS achieve Html escape and unescape (html coding and decoding) summary

1, JS achieve escape and unescape html There are two main ways:

1), realized utilizing the escape html browser internal converter;

2), with a regular expression to achieve escape html;

2, encapsulated tools JS:

. 1      var HtmlUtil = {
 2          / * 1. html code implemented by a browser inside converter (escape) * / 
. 3          htmlEncode: function {(html)
 . 4              // 1. Create a dynamically first container label element, such as the DIV 
. 5              var = document.createElement the TEMP ( "div" );
 6              // 2. then the string to be converted to this element innerText or textContent 
7              (temp.textContent = undefined!) (temp.textContent = HTML): (the TEMP? = .innerText HTML);
 . 8              // 3. Finally, the element returns innerHTML, i.e. to give the string of the converted HTML encoded 
. 9              var Output = temp.innerHTML;
 10              TEMP =null ;
 . 11              return Output;
 12 is          },
 13 is          / * 2. html achieve decoding (reverse sense) converter internal browser * / 
14          HtmlDecode: function (text) {
 15              // 1. Create a first container label dynamically element as the dIV 
16              var TEMP = document.createElement ( "div" );
 . 17              // 2. then be converted to the innerHTML string element (IE, Firefox, Google support) 
18 is              temp.innerHTML = text;
 . 19              // 3. Finally textContent return innerText or the element, i.e., to obtain a decoded string via HTML. 
20 is              var Output = temp.innerText || temp.textContent;
 21 is             temp = null;
22             return output;
23         },
24         /*3.用正则表达式实现html编码（转义）*/
25         htmlEncodeByRegExp:function (str){  
26              var temp = "";
27              if(str.length == 0) return "";
28              temp = str.replace(/&/g,"&");
29              temp = temp.replace(/</g,"&lt;");
30              temp = temp.replace(/>/g,"&gt;");
31              temp = temp.replace(/\s/g,"&nbsp;");
32              temp = temp.replace(/\'/g,"&#39;");
33              temp = temp.replace(/\"/g,"&quot;");
34              return temp;
35         },
36         /*4.用正则表达式实现html解码（反转义）*/
37         htmlDecodeByRegExp:function (str){  
38              var temp = "";
39              if(str.length == 0) return "";
40              temp = str.replace(/&amp;/g,"&");
41              temp.replace = TEMP (/ & lt; / G, "<" );
 42 is               TEMP = temp.replace (/ & gt; / G, ">" );
 43 is               TEMP = temp.replace (/ & nbsp; / G, "" );
 44 is               TEMP = temp.replace (/ & # 39; / G, "\ '" );
 45               TEMP = temp.replace (/ & quot; / G, "\" " );
 46 is               return TEMP;  
 47          },
 48          / * 5. regular expression html coding (escape) (another way) * / 
49          html2Escape: function (SHTML) {
 50               return sHtml.replace (/ [<> & "] / G,function(c){return{ '<': '& lt;', '>': '& gt;', '&': '& amp;', ' "': '& quot;' } [C];});
 51 is          },
 52 is          / * 6. using regular expression html decoding (reverse sense) (another way) * / 
53 is          escape2Html: function (STR) {
 54 is               var arrEntities = { 'lt': '<', 'gt': '>' , 'nbsp': '', 'amp': '&', 'quot': ' "' };
 55               return str.replace (/ & (lt | gt | nbsp | amp | quot); / IG, function ( All, T) { return arrEntities [T];});
 56 is          }
 57 is      };

3, testing and results:

1), html Code:

 1 <div>&</div>
 2 <div>&amp;</div>
 3 <div id="testdiv"></div>
 4 <div id="testdiv1"></div>
 5 <div id="testdiv2"></div>
 6 
 7 <div id="regdiv"></div>
 8 <div id="regdiv1"></div>
 9 <div id="regdiv2"></div>
10 
11 <div id="regdiv3"></div>
12 <div id="regdiv4"></div>
13 <div id="regdiv5"></div>

2), js test code:

 1     var strHtml='<div style="color:blue">符号：&amp;<div>';
 2     document.getElementById("testdiv").innerHTML=strHtml;
 3 
 4     var encodedHtml= HtmlUtil.htmlEncode(strHtml);// "&lt;div style="color:blue"&gt;符号：&amp;amp;&lt;div&gt;"
 5     document.getElementById("testdiv1").innerHTML=encodedHtml;
 6 
 7     var decodedHtml=HtmlUtil.htmlDecode(encodedHtml);// '<div style="color:blue">符号：&amp;<div>'
 8     document.getElementById("testdiv2").innerHTML=decodedHtml;
 9 
10     var strHtml_1='<div style="color:red">符号：&amp;<div>';
11     document.getElementById("regdiv").innerHTML=strHtml_1;
12 
13     var encodedHtml_1 =HtmlUtil.htmlEncodeByRegExp(strHtml_1);// "&lt;div style="color:red"&gt;符号：&amp;amp;&lt;div&gt;"
14     document.getElementById("regdiv1").innerHTML=encodedHtml_1;
15 
16     var decodedHtml_1 =HtmlUtil.htmlDecodeByRegExp(encodedHtml_1);// '<div style="color:blue">符号：&amp;<div>'
17     document.getElementById("regdiv2").innerHTML=decodedHtml_1;
18 
19     var strHtml_2='<div style="color:green">符号：&amp;<div>';
20     document.getElementById("regdiv3").innerHTML=strHtml_2;
21 
22     var encodedHtml_2 =HtmlUtil.htmlEncodeByRegExp(strHtml_2);// "&lt;div style="color:green"&gt;符号：&amp;amp;&lt;div&gt;"
23     document.getElementById("regdiv4").innerHTML=encodedHtml_2;
24 
25     var decodedHtml_2 =HtmlUtil.htmlDecodeByRegExp(encodedHtml_2);// '<div style="color:green">符号：&amp;<div>'
26     document.getElementById("regdiv5").innerHTML=decodedHtml_2;

3), renderings:

 

——————————————————————————————————