js高手之路 HTML標籤解釋成DOM節點

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

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

this is a test string

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

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

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

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

為了便於建立dom,我們用乙個json儲存，比如這個標籤，我們要處理成的最終結果是:

如果有了這個結構，只要拿到對應的鍵和值，組裝成乙個dom就可以搞定了

1

var o = document.createelement( obj['tag'] );
2         o.innerhtml = obj['inner'];
3delete obj['inner'];
4delete obj['tag'];
5for( var key in
obj ) 
解釋思路已經明確，那麼我們首先就要把html標籤的每部分用正規表示式匹配出來
恩，這就是我們匹配出來的結果，從圖中可以看出，
res[1]儲存的是標籤名稱，只需要把兩邊的空格去掉
res[2]儲存的是屬性和值，我們用split函式按空格切割一次，再用split函式按'='切割一次，就能分解出來了
res[4]儲存的就是字串的內容
上面3部分，只要用迴圈和字串稍加處理就可以得出目標結果了
那麼完整的處理**就是：
1var re = /(.*)?/;
2var str = 'this is a test string';3
var res =str.match(re);45
var tagname = null, attrlist = , arr = , obj ={};
6if( res[1] ) 
10if( res[4] ) 
13if ( res[2] )  );21}
22}2324
var o = document.createelement( obj['tag'] );
25         o.innerhtml = obj['inner'];
26delete obj['inner'];
27delete obj['tag'];
28for( var key in
obj ) 
可以自行封裝乙個函式，我相信你應該輕易就能封裝出來吧.
				
HTML 標籤解釋大全
html標籤解釋大全 一 html標記 標籤 doctype 說明 指定了 html 文件遵循的文件型別定義 dtd 標籤 a 標籤 acronym 說明 標明縮寫詞。標籤 address 說明 在頁面上放置可執行內容。標籤 area 標籤 attribute 說明 以物件的形式代表了 html 元...
				
js過濾HTML標籤
function removehtmltag str 第乙個 g 在js中正規表示式是以 開頭的，後面的 g，含義是表示全域性模式，意思是在將匹配的模式應用於整個字串，而不是在第一次匹配上之後就停止匹配了。這個分開來解釋，其中第二個字元 是乙個轉移字元，用來轉移後面的 字元的。匹配0或1個正好在它之...
				
JS過濾HTML標籤
在前端開發中，我們很有必要過濾掉使用者輸入的文字中的html標籤以防範xss攻擊。我們可以用正規表示式來做到這個 var filterhtmltag function msg 可能還會需要驗證字串中是否存在某個子字串並獲取子字串，那麼我們可以用indexof 這個方法，如果返貨的下標大於0，那麼子字...