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

HTML's Encode (transcoding) and decoding (Decode) are also frequently processed during normal development. Here we summarize how to use javascript to process HTML's Encode (transcoding) and decoding (Decode) common method 1. Use a browser internal converter to achieve conversion 1. 1. use a browser internal converter to implement html transcoding first, dynamically create a container tag element, such as DIV, and then set the string to be converted to the innerText (ie supported) or textContent (Firefox, (supported by google). Finally, the innerHTML of this element is returned to obtain the HTML-encoded string. 1. 2. use a browser internal converter to implement html Decoding first dynamically create a container tag element, such as DIV, and then set the string to be converted to the innerHTML (ie, Firefox, and google support) of this element ), finally, the innerText (ie supported) or textContent (Firefox, google supported) of this element is returned to obtain the HTML decoded string. 1. 3. specific implementation code replication code 1 var HtmlUtil = {2/* 1. use a browser internal converter to implement html transcoding */3 htmlEncode: function (html) {4 // 1. first, dynamically create a container label element, such as DIV 5 var temp = document. createElement ("div"); 6 // 2. then set the string to be converted to the innerText (ie supported) or textContent (Firefox, google supported) 7 (temp. textContent! = Undefined )? (Temp. textContent = html): (temp. innerText = html); 8 // 3. finally, the innerHTML of this element is returned, that is, the string converted by HTML encoding is 9 var output = temp. innerHTML; 10 temp = null; 11 return output; 12}, 13/* 2. use a browser internal converter to implement html Decoding */14 htmlDecode: function (text) {15 // 1. first, dynamically create a container label element, such as DIV16 var temp = document. createElement ("div"); 17 // 2. then set the string to be converted to the innerHTML (ie, Firefox, and google Support) 18 temp of this element. innerHTML = text; 19 // 3. finally, the innerText (ie supported) or t of this element is returned. ExtContent (Firefox, supported by google) is used to obtain the HTML-decoded string. 20 var output = temp. innerText | temp. textContent; 21 temp = null; 22 return output; 23} 24}; copy the code to test: 1 var html = "<br> aaaaaa <p> bbbb </p> "; 2 var encodeHtml = HtmlUtil.html Encode (html); 3 alert ("encodeHtml:" + encodeHtml); 4 var decodeHtml = HtmlUtil.html Decode (encodeHtml); 5 alert ("decodeHtml: "+ decodeHtml); running result: 2. Using Regular Expressions for conversion is also a common processing method. The principle is to use a replacement method for transcoding and decoding, during transcoding, replace <>, space character, &, ', "with html encoding, and decode htm. L encode with the corresponding characters. The implementation code is as follows: Copy code 1 var HtmlUtil = {2/* 1. use regular expressions to implement html transcoding */3 htmlEncodeByRegExp: function (str) {4 var s = ""; 5 if (str. length = 0) return ""; 6 s = str. replace (/&/g, "& amp;"); 7 s = s. replace (/</g, "& lt;"); 8 s = s. replace (/>/g, "& gt;"); 9 s = s. replace (// g, "& nbsp;"); 10 s = s. replace (/\ '/g, "& #39;"); 11 s = s. replace (/\ "/g," & quot; "); 12 return s; 13}, 14/* 2. use regular expressions to implement html Decoding */15 htmlDecodeByRegE Xp: function (str) {16 var s = ""; 17 if (str. length = 0) return ""; 18 s = str. replace (/& amp;/g, "&"); 19 s = s. replace (/& lt;/g, "<"); 20 s = s. replace (/& gt;/g, ">"); 21 s = s. replace (/& nbsp;/g, ""); 22 s = s. replace (/& #39;/g, "\ '"); 23 s = s. replace (/& quot;/g, "\" "); 24 return s; 25} 26}; copy the code to test the Code: 1 var html = "<br> ccccc <p> aaaaa </p>"; 2 var encodeHTML = HtmlUtil.html EncodeByRegExp (html); 3 alert ("convert html with regular expressions Code, encodeHTML: "+ encodeHTML); 4 var decodeHTML = HtmlUtil.html DecodeByRegExp (" use a regular expression for html Decoding: "+ encodeHTML); 5 alert (decodeHTML); Test Result: 3. encapsulate the HtmlUtil tool class. encapsulate the HtmlUtil tool class in two ways to facilitate development. The complete code is as follows: Copy code 1 var HtmlUtil = {2/* 1. use a browser internal converter to implement html transcoding */3 htmlEncode: function (html) {4 // 1. first, dynamically create a container label element, such as DIV 5 var temp = document. createElement ("div"); 6 // 2. then, set the string to be converted to the innerText (ie supported) or textContent (Firefox, google supported) of this element. Hold) 7 (temp. textContent! = Undefined )? (Temp. textContent = html): (temp. innerText = html); 8 // 3. finally, the innerHTML of this element is returned, that is, the string converted by HTML encoding is 9 var output = temp. innerHTML; 10 temp = null; 11 return output; 12}, 13/* 2. use a browser internal converter to implement html Decoding */14 htmlDecode: function (text) {15 // 1. first, dynamically create a container label element, such as DIV16 var temp = document. createElement ("div"); 17 // 2. then set the string to be converted to the innerHTML (ie, Firefox, and google Support) 18 temp of this element. innerHTML = text; 19 // 3. finally, the innerText (ie supported) or t of this element is returned. ExtContent (Firefox, supported by google) is used to obtain the HTML-decoded string. 20 var output = temp. innerText | temp. textContent; 21 temp = null; 22 return output; 23}, 24/* 3. use regular expressions to implement html transcoding */25 htmlEncodeByRegExp: function (str) {26 var s = ""; 27 if (str. length = 0) return ""; 28 s = str. replace (/&/g, "& amp;"); 29 s = s. replace (/</g, "& lt;"); 30 s = s. replace (/>/g, "& gt;"); 31 s = s. replace (// g, "& nbsp;"); 32 s = s. replace (/\ '/g, "& #39;"); 33 s = s. replace (/\ "/g," & quot; "); 34 return s; 35}, 36/* 4. use regular expressions to implement html Decoding */37 htmlDecodeByRegExp: function (str) {38 var s = ""; 39 if (str. length = 0) return ""; 40 s = str. replace (/& amp;/g, "&"); 41 s = s. replace (/& lt;/g, "<"); 42 s = s. replace (/& gt;/g, ">"); 43 s = s. replace (/& nbsp;/g, ""); 44 s = s. replace (/& #39;/g, "\ '"); 45 s = s. replace (/& quot;/g, "\" "); 46 return s; 47} 48 };