使用javascript正則表達式實現遍歷html字符串

最近在嘗試實現一個js模板引擎，其中涉及到使用js解析html字符串的功能。因爲我實現的這個模板不止是要能替換參數輸出html字符串，還要能夠解析出每一個dom元素的名稱及參數啥的。

網上找到了一個叫作t7(源碼地址)的模板。它的解析方式是逐個遍歷每一個字符，而後檢測是否遇到了"<"和">"來判斷當前是否遍歷到標籤內了。我大概測試了下逐個遍歷字符，主要是發現字符不少時，在IE11(以及用IE11開啓的IE8-10模式)下遍歷速度較慢。

通過一些嘗試以後，最終仍是選擇了用正則表達式實現。代碼以下：

<script id="tmpl1" type="text/tmp">
    <div>
        測試文本
        <section id="query_expend">
            <i class="icon-double-angle-down"></i>
            <article>測試文本</article>
            <span id="query_expend_text">測試文本</span>
        </section>
        <section id="tabs1"></section>
    </div>
</script>

var html = document.querySelector("#tmpl1").innerHTML;
html = html.replace(/<!--[\s\S]*?-->/g, '');  //去除html註釋
html = html.replace(/>\s+([^\s<]*)\s+</g, '>$1<').trim();  //去除html標籤間的多餘空白

var pattern = /([^>]*)(<([a-z/][-a-z0-9_:.]*)[^>/]*(\/*)>)([^<]*)/g,
    matchArr,
    start = Date.now();

while ((matchArr = pattern.exec(html))) {
    var textBefore = matchArr[1],  //獲取排在標籤前的文本
        elem = matchArr[2],        //獲取整個開標籤或閉標籤
        elemName = matchArr[3],    //獲取標籤名
        closeSign = matchArr[4],   //判斷是否爲自閉合標籤標記
        textAfter = matchArr[5];   //獲取排在標籤後的文本

    matchArr.forEach(function (o, i) {
        if (i > 0 && o !== "") {
            console.log(o);  //輸出各部分
        }
    }
}

console.log(Date.now() - start);

按照這個方法，若是要獲取html參數的話，得在循環中再使用正則從標籤中單獨獲取了。速度大概測了下還算挺快的，不過本人不是特擅長正則，應該還能夠優化。但願對你們有用，有問題歡迎幫我指出^_^