Encode (transcoding) and decode (decoding) Summary of JavaScript processing HTML

HTML encode (transcoding) and decoding (Decode) are often dealt with in normal development, summarizing the common ways of using JavaScript to process HTML encode (transcoding) and decoding (Decode).

First, using the browser internal converter to achieve the conversion 1.1. HTML transcoding with browser internal converters

First, dynamically create a container tag element, such as a Div, and then set the string to be converted to this element's innertext (ie support) or textcontent (Firefox, Google support), and finally return the innerHTML of this element, That is, the HTML-encoded strings are converted.

1.2. HTML decoding with browser internal translator

First, dynamically create a container tag element, such as Div, and then set the string to be converted to this element of the innerHTML (ie, Firefox, Google support), and finally return this element of innertext (ie support) or textcontent (Firefox, Google support), you get the HTML decoded string.

1.3. Specific implementation Code

var htmlutil = {    /*1. html transcoding with the browser internal translator *    /htmlencode:function (HTML) {        //1. A container tag element, such as Div var, is created dynamically first        temp = document.createelement ("div");        2. Then set the string to be converted to this element of innertext (ie support) or textcontent (Firefox, Google support)        (temp.textcontent! = undefined)? (temp.textcontent = html): (Temp.innertext = html);        3. Finally returns the InnerHTML of this element, that is, the string converted by HTML encoding is        var output = temp.innerhtml;        temp = null;        Return output    ,    /*2. HTML decoding with the browser internal translator *    /htmldecode:function (text) {        //1. First, dynamically create a container label element, such as div        var temp = document.createelement ("div");        2. Then set the string to be converted to this element of the InnerHTML (ie, Firefox, Google are supported)        temp.innerhtml = text;        3. Finally return this element of the innertext (ie support) or textcontent (Firefox, Google support), that is, the HTML decoded string.        var output = Temp.innertext | | temp.textcontent;        temp = null;        return output;    }};

View Code

Test:

1 var html = "<br>aaaaaa<p>bbbb</ P > "; 2 var encodehtml = Htmlutil.htmlencode (HTML); 3 alert (" encodehtml: "+ encodehtml); 4 var decodehtml = Htmlutil.htmlde Code (encodehtml), 5 alert ("decodehtml:" + decodehtml);

View Code

Operation Result:

　　

Second, the conversion processing with regular expressions

The use of regular expressions is also a common method of processing, the implementation of the principle is to use the substitution of the way to achieve transcoding and decoding, transcoding when the <>, space, &, ', "" replaced with HTML encoding, Decoding the HTML code to replace the corresponding characters, the implementation code is as follows:

var htmlutil = {/*1. Implement HTML transcoding with regular expressions */htmlencodebyregexp:function (str) {var s = "";         if (Str.length = = 0) return ""; s = str.replace (/&/g, "&amp;"); s = s.replace (/</g, "&lt;"); s = s.replace (/>/g, "&gt;"); s = s.replace (//g, "&nbsp;");         s = s.replace (/\ '/g, "& #39;"); s = s.replace (/\ "/g,"&quot;");     return s;         },/*2. Implement HTML decoding with regular expressions */htmldecodebyregexp:function (str) {var s = "";         if (Str.length = = 0) return ""; s = str.replace (/&amp;/g, "&"); s = s.replace (/&lt;/g, "<"); S= S.replace (/&gt;/g, ">"); s = s.replace (/&nbsp;/g, "");         s = s.replace (/& #39;/g, "\ '"); s = s.replace (/&quot;/g, "\" ");     return s; }};

View Code

Test code:

1 var html = "<br>ccccc<p>aaaaa</ P > "; 2 var encodehtml = htmlutil.htmlencodebyregexp (HTML); 3 alert (" HTML transcoding with regular expressions, encodehtml: "+ encodehtml); 4 var decodehtml = htmlutil.htmldecodebyregexp ("HTML decoding with regular expressions:" + encodehtml); 5 alert (decodehtml);

View Code

Test results:

　　

Three, package Htmlutil tool class

The Htmlutil tool class is encapsulated in two ways for ease of use in development and the complete code is as follows:

var htmlutil = {/*1. html transcoding with the browser internal translator */Htmlencode:function (HTML) {//1. A container tag element, such as div var temp, is created dynamically first        = Document.createelement ("div"); 2. Then set the string to be converted to this element of innertext (ie support) or textcontent (Firefox, Google support) (temp.textcontent! = undefined)?        (temp.textcontent = html): (Temp.innertext = html);        3. Finally returns the InnerHTML of this element, that is, the string converted by HTML encoding is var output = temp.innerhtml;        temp = null;    return output; },/*2. Implement HTML decoding with the browser internal translator */htmldecode:function (text) {//1. First, dynamically create a container tag element, such as div var temp = Document.cre        Ateelement ("div");        2. Then set the string to be converted to this element of the InnerHTML (ie, Firefox, Google are supported) temp.innerhtml = text;        3. Finally return this element of the innertext (ie support) or textcontent (Firefox, Google support), that is, the HTML decoded string. var output = Temp.innertext | |        Temp.textcontent;        temp = null;    return output;         },/*3. Implement HTML transcoding with regular expressions */htmlencodebyregexp:function (str) {var s = "";         if (Str.length = = 0) return ""; s = StR.replace (/&/g, " &amp;"); s = s.replace (/</g, "&lt;"); s = s.replace (/>/g, "&gt;"); s = s.replace (//g, "&nbsp;");         s = s.replace (/\ '/g, "& #39;"); s = s.replace (/\ "/g,"&quot;");     return s;         },/*4. Implement HTML decoding with regular expressions */htmldecodebyregexp:function (str) {var s = "";         if (Str.length = = 0) return ""; s = str.replace (/&amp;/g, "&"); s = s.replace (/&lt;/g, "<"); S= S.replace (/&gt;/g, ">"); s = s.replace (/&nbsp;/g, "");         s = s.replace (/& #39;/g, "\ '"); s = s.replace (/&quot;/g, "\" ");     return s; }};

View Code

JavaScript handles HTML encode (transcoding) and decode (decoding) Summary