上一节聊到正则表达式的简单应用，不足之处欢迎留言交流。

正则表达式示例之基本概念

今儿，咱来瞅一瞅，怎样运用正则表达式，去跟HTML标签以及相关信息进行匹配 。

为什么要加上相关信息呢？

要是，在您打算编写一个HTML语法树解析库之际，也许会用得上，那是因为 。

下面内容用到的语法

|：表示或者，要么前面，要么后面

(?的一段字符串。

至此，您会认为已然终结了吗？您于网络上搜寻匹配HTML标签之时，或许也会获取这样子一种结果（像之类：、、等等）sublime text 3 html，然而事实上那仅仅是开端，我们秉持着只要属于程序便兴许存在bug的准则，故而我们来瞧瞧接下来的一个实例。

const strHtml = '>是大于符号。';
在JavaScript中，有这样一个语句，它声明了一个常量，这个常量被命名为strRes，它的值是另外一个字符串，也就是str。<[^>]+>/g, '');
console.log(strRes);
// ">>是大于符号。

bug出现了，怎么办？别着急，请看下一个知识点。

2、匹配HTML标签属性是要做的事，这件事是写一个HTML语法树时会经历的 。

2.1、首先，我们先解决第一点最后的bug。

const strHtml = '>是大于符号。';
// 一个小改动即可。
const strRes = strHtml.replace(/<("[^"]*"|[^>])+>/g, '');
console.log(strRes);
// >是大于符号。

可视图

完美sublime text 3 html，还没结束……

const strHtml = ">是大于符号。";
const strRes = strHtml.replace(/<("[^"]*"|[^>])+>/g, '');
console.log(strRes);
// '>>是大于符号。

甲表示，这并非是自己所写的HTML存在不标准的情况，而是在于你的解析库，其兼容性欠佳，就连浏览器都能够进行识别，可你为何却不可以呢？ 。

已：……。

const strHtml = `<小于符号。>大于符号。`;
// 继续改造
const strRes = strHtml.replace(/<((["'])+.*?\2|[^>])+>/g, '');

console.log(strRes);
// <小于符号。>大于符号。

匹配结果

可视图

是的，利用正则表达式分组捕获的语法，实现了上面的需求。

2.2 现在，我们来看看，如何找到某个标签的所有属性。

const strHtml = `

`;

上面的例子中，有多种情况，我们首先来整理出来。

属性1：type='text'

/[\w]+=(["'])+.*?\1/

属性2：

/[\w]+/

属性3：value=""

/[\w]+=(["'])+.*?\1/

属性4：class="txt txt-md"

/[\w]+=(["'])+.*?\1/

5号属性：当点击时，执行名为save的函数，该函数传入的参数为一个空字符串 。

/[\w:]+=(["'])+.*?\1/

其他情况：欢迎讨论。

把所有情况连起来之后。

const strHtml = ``;
你提供的内容不完整，请补充完整以便我进行改写。<=\s)[\w:-]+(=(["']).*?\2)*/g) || [];
console.log(tagAttrs);
//  ["type='text'", 'disabled', 'value=""', 'class="txt txt-md"', `v-on:click="save('button')"`]

匹配结果

可视图

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

如有侵权请联系删除！