js正则匹配html id,使用javascript正则表达式实现遍历html字符串

最近在尝试实现一个js模板引擎，其中涉及到使用js解析html字符串的功能。因为我实现的这个模板不止是要能替换参数输出html字符串，还要能够解析出每一个dom元素的名称及参数啥的。html

网上找到了一个叫作t7(源码地址)的模板。它的解析方式是逐个遍历每一个字符，而后检测是否遇到了""来判断当前是否遍历到标签内了。我大概测试了下逐个遍历字符，主要是发现字符不少时，在IE11(以及用IE11开启的IE8-10模式)下遍历速度较慢。git

通过一些尝试以后，最终仍是选择了用正则表达式实现。代码以下：github

测试文本

测试文本

测试文本

var html = document.querySelector("#tmpl1").innerHTML;

html = html.replace(//g, ''); //去除html注释

html = html.replace(/>\s+([^\s$1

var pattern = /([^>]*)(/]*(\/*)>)([^

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