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

秒客网

使用javascript正则表达式实现遍历html字符串

相关文章