Javascript正则表达式示例之基本观点
本日,我们来看一下,如何利用正则表达式,匹配HTML标签及干系信息。
为什么要加上干系信息呢?
由于,如果您想写一个HTML语法树解析库的时候,可能会用到。
下面内容用到的语法
|:表示或者,要么前面,要么后面
(?<=我前面涌现的内容)要匹配的内容:只匹配前面涌现的字符之后的内容。
可视图
要匹配的内容(?=我前面涌现的内容):只匹配后面涌现的字符之前的内容。
可视图
分组捕获:一对完全的小括号(),表示一个组。
\数字:你要利用那一个分组捕获到的内容。
.?:在正则表达式中,. 表示匹配任意字符, 表示匹配 0 到任意次的前一个字符,? 表示非贪婪匹配,即尽可能匹配最少的字符。因此,.? 表示匹配任意字符零次或多次,但尽可能匹配最少的字符。这个表达式常日用于匹配一个字符串中的所有内容,但是避免贪婪匹配导致的匹配缺点。
^: 表示匹配开始
[要匹配的字符]:只匹配括号中的字符。
比如[0-9]、[a-z]、[A-Z]、[0-9a-zA-Z]、[0-9abc]等等。
[^要匹配的字符]:[]中加^表示匹配不是“要匹配的字符”。
1、匹配所有HTML标签,并清空。实现innerText类似的功能。
<body><div id=34;left">left</div><div id="right">right</div></body>
const text = document.body.innerText;text = text.replace(/\n/g, '');console.log(text);//输出: leftright
假设没有innerText的功能呢?实现这个功能,利用正则表达式无疑是最方便的。
var text = document.body.innerHTML.replace(/<[^>]+>/g,'');text = text.replace(/\n/g, '');console.log(text);//输出: leftright
匹配结果
可视图
是的,这个正则表达式的意思是,查找<>并且包含他们之间不为>的一段字符串。
到这里,您以为就结束了吗?您在网上搜索匹配HTML标签,可能也会得到这么一个结果(例如:<[^>]+>、<.?>、等等),但实际上这只是开始,我们本着只假如程序就可能有bug的原则,以是我们来看下面一个例子。
const strHtml = '<span data-code=">">>是大于符号。</span>';const strRes = strHtml.replace(/<[^>]+>/g, '');console.log(strRes);// ">>是大于符号。
[可怜]bug涌现了,怎么办?别焦急,请看下一个知识点。
2、匹配HTML标签属性,是写一个HTML语法树要经历的事情。
2.1、首先,我们先办理第一点末了的bug。
const strHtml = '<span data-code=">">>是大于符号。</span>';// 一个小改动即可。const strRes = strHtml.replace(/<("[^"]"|[^>])+>/g, '');console.log(strRes);// >是大于符号。
可视图
完美[打脸] ,还没结束……
const strHtml = "<span data-code='>'>>是大于符号。</span>";const strRes = strHtml.replace(/<("[^"]"|[^>])+>/g, '');console.log(strRes);// '>>是大于符号。
甲:这不是我写的HTML不标准,是你的解析库兼容性不好,浏览器都可以识别,你为什么不可以?
已:……。
const strHtml = `<i code="<"><小于符号。</i><i code='>'>>大于符号。</i>`;// 连续改造const strRes = strHtml.replace(/<((["'])+.?\2|[^>])+>/g, '');console.log(strRes);// <小于符号。>大于符号。
匹配结果
可视图
是的,利用正则表达式分组捕获的语法,实现了上面的需求。
2.2 现在,我们来看看,如何找到某个标签的所有属性。
const strHtml = `<input type='text' disabled value="" class="txt txt-md" v-on:click="save('button')" />`;
上面的例子中,有多种情形,我们首先来整理出来。
属性1:type='text'
/[\w]+=(["'])+.?\1/
属性2:disabled
/[\w]+/
属性3:value=""
/[\w]+=(["'])+.?\1/
属性4:class="txt txt-md"
/[\w]+=(["'])+.?\1/
属性5:v-on:click="save('button')"
/[\w:]+=(["'])+.?\1/
其他情形:欢迎谈论。
把所有情形连起来之后。
const strHtml = `<input type='text' disabled value="" class="txt txt-md" v-on:click="save('button')" />`;const tagAttrs = strHtml.match(/(?<=\s)[\w:-]+(=(["']).?\2)/g) || [];console.log(tagAttrs);// ["type='text'", 'disabled', 'value=""', 'class="txt txt-md"', `v-on:click="save('button')"`]
匹配结果
可视图
人人为我,我为大家,欢迎您的浏览,我们一起加油吧。