實例講解HTML標籤解釋成DOM節點

下面小編就為大家帶來一篇[js高手之路]HTML標籤解釋成DOM節點的實作方法。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧

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

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

#d0799c75da08076971d14050ad36965ethis is a test string94b3e26ee717c64999d7867364b1b4a3

這個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:"p"
}

如果有了這個結構，只要拿到對應的鍵和值，組裝成一個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+[=][\&#39;\"](.*)?[\&#39;\"]\s*)*>(.*)?<\/\w+>/;
  var str = &#39;<p onclick="test();" name="test" id="test">this is a test string</p>&#39;;
  var res = str.match(re);

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

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

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

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

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

那麼完整的處理程式碼就是：

var re = /<(\w+\s*)(\w+[=][\&#39;\"](.*)?[\&#39;\"]\s*)*>(.*)?<\/\w+>/;
  var str = &#39;<p onclick="test();" name="test" id="test">this is a test string</p>&#39;;
  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[&#39;tag&#39;] );
  o.innerHTML = obj[&#39;inner&#39;];
  delete obj[&#39;inner&#39;];
  delete obj[&#39;tag&#39;];
  for( var key in obj ){
   o.setAttribute( key, obj[key] );
  } 
  document.body.appendChild( o );

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

以上是實例講解HTML標籤解釋成DOM節點的詳細內容。更多資訊請關注PHP中文網其他相關文章！