快捷導(dǎo)航

[js高手之路]HTML標(biāo)簽解釋成DOM節(jié)點(diǎn)的實(shí)現(xiàn)方法

更新時(shí)間：2017年08月31日 08:31:32 作者：ghostwu

下面小編就為大家?guī)?lái)一篇[js高手之路]HTML標(biāo)簽解釋成DOM節(jié)點(diǎn)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

最近在封裝一個(gè)開(kāi)源框架，已經(jīng)寫(xiě)了500行，已經(jīng)具備jquery的大多數(shù)常用功能，后面還會(huì)擴(kuò)展大量的工具函數(shù)和MVVM雙向驅(qū)動(dòng)等功能。跟jquery的使用方法完全一樣，jquery的選擇器，幾乎都能支持，為什么說(shuō)這事，跟這篇文章的主題有毛關(guān)系呢？因?yàn)檫@篇文章要講的就是我在寫(xiě)框架過(guò)程中碰到的一個(gè)問(wèn)題，封裝jquery的after方法，支持DOM和html標(biāo)簽兩種用法，html標(biāo)簽傳參，我要把html解釋成DOM結(jié)構(gòu)，用DOM的方法插入.

首先，我們寫(xiě)個(gè)通用的html標(biāo)簽:

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

這個(gè)html包括了事件，樣式，屬性，內(nèi)容.

我們接著用正則把這個(gè)html的每一部分匹配出來(lái)，我們需要的是：

1、標(biāo)簽名，因?yàn)閯?chuàng)建dom節(jié)點(diǎn)的時(shí)候需要

2、屬性和內(nèi)容都要單獨(dú)分離出來(lái)

為了便于創(chuàng)建dom,我們用一個(gè)json保存，比如這個(gè)標(biāo)簽，我們要處理成的最終結(jié)果是:

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

如果有了這個(gè)結(jié)構(gòu)，只要拿到對(duì)應(yīng)的鍵和值，組裝成一個(gè)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 );

解釋思路已經(jīng)明確，那么我們首先就要把html標(biāo)簽的每部分用正則表達(dá)式匹配出來(lái)

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);

恩，這就是我們匹配出來(lái)的結(jié)果，從圖中可以看出，

res[1]存儲(chǔ)的是標(biāo)簽名稱(chēng)，只需要把兩邊的空格去掉

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

res[4]存儲(chǔ)的就是字符串的內(nèi)容

上面3部分，只要用循環(huán)和字符串稍加處理就可以得出目標(biāo)結(jié)果了

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

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 );

可以自行封裝一個(gè)函數(shù)，我相信你應(yīng)該輕易就能封裝出來(lái)吧.

以上這篇[js高手之路]HTML標(biāo)簽解釋成DOM節(jié)點(diǎn)的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: