使用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參數的話，得在循環中再使用正則從標簽中單獨獲取了。速度大概測了下還算挺快的，不過本人不是特擅長正則，應該還可以優化。希望對大家有用，有問題歡迎幫我指出^_