[JS Master's Road] HTML tags interpreted as DOM nodes

The recent encapsulation of an open source framework, which has already written 500 lines, already has most of the common features of jquery, and later extends a number of functions such as tool functions and MVVM bidirectional drivers. Just like the way jquery is used, the jquery selector is almost always supported, why is it related to the subject of this article? Because this article is about me in the process of writing the framework of a problem, encapsulated jquery after method, support DOM and HTML tag two usages, HTML tag, I want to interpret HTML as a DOM structure, the DOM method is inserted.

First, let's write a generic HTML tag:

<div onclick= "Test ();" style= "Color:red;background:green;" name= "Test" id= "test" >this is a test string</div > This HTML includes events, styles, attributes, and content. We then use the regular to match each part of the HTML, what we need is: 1, the tag name, because the creation of the DOM node requires 2, attributes and content to separate out to facilitate the creation of the DOM, We use a JSON to save, for example, this tag, and the end result we're going to deal with is:{ID:"Test Inner:"This is a test string name:"Test" onclick:"Test ();" style:"Color:red;background:green;" tag:"div" }
If you have this structure, just get the corresponding key and value and assemble it into a DOM to get it done.

1         varo = document.createelement (obj[' tag '] );2o.innerhtml = obj[' inner '];3         Deleteobj[' inner '];4         Deleteobj[' tag '];5          for(varKeyinchobj) {6 O.setattribute (Key, Obj[key]);7         } 8Document.body.appendChild (o);

The explanation is clear, so let's first match each part of the HTML tag with a regular expression.

1         var re =/< (\w+\s*) (\w+[=][\ ' \ "] (. *)? [ \ ' \ ']\s*) *> (. *)? <\/\w+>/; 2         var str = ' <div onclick= ' Test (); "style=" Color:red;background:green; "name=" Test "id=" test ">this is a Test string</div> '; 3         var res = Str.match (re);

Well, this is the result of our match, as we can see,

RES[1] Stores the name of the tag, just remove the space on both sides

RES[2] is stored in the attribute and value, we use the Split function by the space cut once, and then by the split function by the ' = ' cut once, can be decomposed out

RES[4] Stores the contents of a string

The above 3 parts, as long as the loop and string with a little processing can be reached the target results

Then the complete processing code is:

1         varRe =/< (\w+\s*) (\w+[=][\ ' \ "] (. *)? [ \ ' \ ']\s*) *> (. *)? <\/\w+>/;2         varstr = ' <div onclick= ' Test (); "style=" Color:red;background:green; "name=" Test "id=" test ">this is a test string</ Div> ';3         varres =Str.match (re);4 5         varTagName =NULL, attrlist = [], arr = [], obj = {};6         if(res[1] ) {7TagName = res[1].trim ();8obj[' tag '] =TagName;9         }Ten         if(res[4] ) { Oneobj[' inner '] = res[4]; A         } -         if(res[2] ) { -Attrlist = Res[2].split (/\s+/ ); the              for(vari = 0, len = attrlist.length; i < Len; i++ ){ -arr = attrlist[i].split ("="); -                 //Console.log (arr); -Obj[arr[0]] = Arr[1].replace (/(^[\ ' \ "]+|[ \ ' \ ']$)/g,function(){ +                     return‘‘; -                 } ); +             } A         } at  -         varo = document.createelement (obj[' tag '] ); -o.innerhtml = obj[' inner ']; -         Deleteobj[' inner ']; -         Deleteobj[' tag ']; -          for(varKeyinchobj) { in O.setattribute (Key, Obj[key]); -         }  toDocument.body.appendChild (o);

You can encapsulate a function on your own, and I'm sure you should be able to encapsulate it easily.

[JS Master's Road] HTML tags interpreted as DOM nodes