[js高手之路]HTML標簽解釋成DOM節點

最近在封裝一個開源框架，已經寫了500行， 已經具備jquery的大多數常用功能，后面還會擴展大量的工具函數和MVVM雙向驅動等功能。跟jquery的使用方法完全一樣，jquery的選擇器，幾乎都能支持，為什么說這事，跟這篇文章的主題有毛關系呢？因為這篇文章要講的就是我在寫框架過程中碰到的一個問題，封裝jquery的after方法，支持DOM和html標簽兩種用法，html標簽傳參，我要把html解釋成DOM結構，用DOM的方法插入.

首先，我們寫個通用的html標簽:

<div onclick="test();" style="color:red;background:green;" name="test" id="test">this is a test string</div>

這個html包括了事件，樣式，屬性，內容.

我們接着用正則把這個html的每一部分匹配出來，我們需要的是：

1、標簽名， 因為創建dom節點的時候需要

2、屬性和內容都要單獨分離出來

為了便於創建dom,我們用一個json保存，比如這個標簽，我們要處理成的最終結果是:

{

id:"test

inner:"this is a test string

name:"test"

onclick:"test();"

style:"color:red;background:green;"

tag:"div"

}
如果有了這個結構，只要拿到對應的鍵和值，組裝成一個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 );

解釋思路已經明確，那么我們首先就要把html標簽的每部分用正則表達式匹配出來

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

恩，這就是我們匹配出來的結果，從圖中可以看出，

res[1]存儲的是標簽名稱，只需要把兩邊的空格去掉

res[2]存儲的是屬性和值，我們用split函數按空格切割一次，再用split函數按'='切割一次，就能分解出來了

res[4]存儲的就是字符串的內容

上面3部分，只要用循環和字符串稍加處理就可以得出目標結果了

那么完整的處理代碼就是：

        var re = /<(\w+\s*)(\w+[=][\'\"](.*)?[\'\"]\s*)*>(.*)?<\/\w+>/;
        var str = '<div onclick="test();" style="color:red;background:green;" 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 );

可以自行封裝一個函數，我相信你應該輕易就能封裝出來吧.