使用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参数的话，得在循环中再使用正则从标签中单独获取了。速度大概测了下还算挺快的，不过本人不是特擅长正则，应该还可以优化。希望对大家有用，有问题欢迎帮我指出^_^

转载于:https://www.cnblogs.com/jesy/p/5221554.html