大家好，我是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] = datas
console.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;

5 、获取属性名与值

前面，我们看到可通过/(?<=\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.ts
interface IHtml {
  tagName?: string,
  nodeType: string,
  text?:string
  attr?:any
}

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