[Js master path] the HTML Tag is interpreted as the implementation method of DOM nodes, jsdom

[Js master path] the HTML Tag is interpreted as the implementation method of DOM nodes, jsdom

Recently, an open-source framework has been encapsulated and 500 lines have been written. Most common functions of jquery are available. A large number of tool functions and MVVM bidirectional drivers will be added later. Just like jquery's method of use, jquery's selector is almost all supported. Why does it have a rough relationship with the topic of this article? This article is about a problem I encountered during the framework writing process. It encapsulates jquery's after method and supports DOM and html Tag usage. parameters are transmitted using html tags, I want to interpret html as a DOM structure and insert it using the DOM method.

First, we will write a general html Tag:

<Div onclick = "test ();" name = "test" id = "test"> this is a test string </div>

This html contains events, styles, attributes, and content.

We then use the regular expression to match each part of the html. What we need is:

1. Tag name, because it is required during dom node Creation

2. Separate attributes and content

To facilitate dom creation, we use a json file to save it. For example, the final result of processing this tag is:

{id:"testinner:"this is a test stringname:"test"onclick:"test();"style:"color:red;background:green;"tag:"div"}

With this structure, you only need to get the corresponding keys and values and assemble them into a dom.

var o = document.createElement( obj['tag'] );  o.innerHTML = obj['inner'];  delete obj['inner'];  delete obj['tag'];  for( var key in obj ){   o.setAttribute( key, obj[key] );  }   document.body.appendChild( o );

The explanation is clear, so we must first match each part of the html tag with a regular expression.

var re = /<(\w+\s*)(\w+[=][\'\"](.*)?[\'\"]\s*)*>(.*)?<\/\w+>/;  var str = '<div onclick="test();" name="test" id="test">this is a test string</div>';  var res = str.match(re);

Well, this is the matching result. We can see that,

Res [1] stores the tag name. You only need to remove spaces on both sides.

Res [2] Stores attributes and values. We use the split function to cut the values by space and then use the split function to cut the values by '= '.

Res [4] stores the string content.

In the above three parts, you only need to use a loop and a string for a slight processing to get the target result.

The complete processing code is:

var re = /<(\w+\s*)(\w+[=][\'\"](.*)?[\'\"]\s*)*>(.*)?<\/\w+>/;  var str = '<div onclick="test();" name="test" id="test">this is a test string</div>';  var res = str.match(re);  var tagName = null, attrList = [], arr = [], obj = {};  if( res[1] ) {   tagName = res[1].trim();   obj['tag'] = tagName;  }  if( res[4] ) {   obj['inner'] = res[4];  }  if ( res[2] ) {   attrList = res[2].split( /\s+/ );   for( var i = 0, len = attrList.length; i < len; i++ ){    arr = attrList[i].split("=");    // console.log( arr );    obj[arr[0]] = arr[1].replace( /(^[\'\"]+|[\'\"]$)/g, function(){     return '';    } );   }  }  var o = document.createElement( obj['tag'] );  o.innerHTML = obj['inner'];  delete obj['inner'];  delete obj['tag'];  for( var key in obj ){   o.setAttribute( key, obj[key] );  }   document.body.appendChild( o );

You can encapsulate a function by yourself. I believe you can encapsulate it easily.

The above [js master path] HTML Tag is interpreted as the implementation method of DOM nodes, which is all the content shared by xiaobian. I hope to give you a reference, we also hope that you can support the customer's home.