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

Source: Internet
Author: User
Tags html encode
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};

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.