大家好，我是PrvtSite。PrvtSite一个主要分享网站制作及相关资源的网站，网站由自建PrvtCMS工具制作。

上一节，我们提到了如何使用分组捕获，匹配HTML标签及标签属性。今天，我们来更进一步的使用它。

匹配HTML标签及标签属性

1、匹配HTML标签

const reg_tags = /<((["'])+.*?\2|[^>])+>/g;

匹配结果

2、匹配HTML标签属性

const reg_tagAttrs = /(?<=\s)[\w:-]+(=(["']).*?\2)*/g;

匹配结果

老样子，学习新的内容前，我们来看一下其它实例。

3、了解ES6的解构，感受语法之美。

假设我们有一个对象，我们要取出其中的属性值，创建新的变量来记住他们。

var person = {	name: 'king',	age: 10000,}

传统的写法

var name = person.name;var age = person.age;console.log(name, age);// king 10000

ES6解构的写法

var {name, age} = obj;console.log(name, age);// king 10000

假设我们有一个数组，我们要取出其中的值，创建新的变量来记住他们。

var datas = ['king', 10000];

传统的写法

var name = datas[0];var age = datas[1];console.log(name, age);// king 10000

ES6解构的写法

var [name,age] = datasconsole.log(name, age);// king 10000

到此，我们简单的了解了解构的用法，之后专门出一篇文章来聊它，现在我们回到正则表达式。

4 、获取标签的名称

var strStart = '<div id="main" class="container">';var strEnd = '</div>';

获取开始标签与结束标签中的“div”。

\w+

一般写法

var reg = /\w+/;var [strStartTagName] = strStart.match(reg) || [];var [strEndTagName] = strEnd.match(reg) || [];

加判断，加容错，防止输入BUG。比如：< id="container"> < div id="container">等等。

// 必须是<或者</开始，并且以>或者非标签属性名称结尾。

var reg = /(?<=<[\/\s]*)\w+(?=(\s+(?![\s=])|>))/;

匹配结果

RegExp.$1-$9 方式

非标准: 该特性是非标准的，请尽量不要在生产环境中使用它！

var strStart = '<div id="main" class="container">';var reg = /(?<=<[\/\s]*)(\w+)(?=(\s+(?![\s=])|>))/;// 是否匹配成功var isNull = reg.test(strStart) == false;// if(isNull) return '语法错误：' + strStart;//标签名称var strStartTagName = RegExp.$1;

前面，我们看到可通过/(?<=\s)[\w:-]+(=(["']).*?\2)*/g，获取所有标签属性。现在我们来获取属性名称与属性值。

举例：onclick="save('submit')"

属性名：=等号之前内容。

属性值：一对引号（"或者'）里面的内容

/(^[^=]+|(?<=(['"])).*?(?=\2))/g;

var reg = /(^[^=]+|(?<=(['"])).*?(?=\2))/g;

匹配结果

var reg = /(^[^=]+|(?<=(['"])).*?(?=\2))/g;var attr = `onclick="save('submit')"`;var [key,value] = attr.match(reg) || [];console.log(key,value);

合并上述正则及代码，一个HTML语法树正在向您招手。

// **.d.tsinterface IHtml {  tagName?: string,  nodeType: string,  text?:string  attr?:any}

人人为我，我为人人，谢谢您的浏览，我们一起加油吧。