当前页面中使用了多少种html标签

如题，

1、想到的第一个方法，使用JavaScript

document.getElementByTagName("*")，根据元素标签名获取元素，当参数为* 时，表示所有元素。document.querySelectorAll("*")，返回与指定的选择器组匹配的文档中的元素列表，当参数是*时，表示所有标签。

但是，别的解决方式呢？？

2、正则

写个正则表达式，匹配当前.html中的所有 HTML标签，，该去重去重，该干嘛干嘛。。。

2.1 表达式

var pt=/\<([a-zA-Z0-9]{1,n})/g

2.2 匹配当前页面

正则表达式匹配的是个字符串，如何将当前页面转换为字符串呢？

document.documentElement.outerHTML返回时，内容包含描述元素及其后代的序列化HTML片段。

2.3 匹配并返回结果

const pt=/\<([a-zA-Z0-9]{1,})/g; const htmls=document.documentElement.outerHTML; const bb=htmls.match(pt); console.log(bb);

可以看到这个结果和预期中有差距啊。。。。 小括号()中的内容并没有匹配出来。

其实这样也可以得到结果。。。去重。。。。去掉标签前的<就可以了

const pt = /\<([a-zA-Z0-9]{1,})/g; const htmls = document.documentElement.outerHTML; const bb = htmls.match(pt); let result = []; if (bb) { result = [...new Set(bb)]; } for (let i = 0; i < result.length; i++) { result[i] = result[i].substr(1) } console.log(bb); console.log(result)

好吧，这就和正则中的 g、match、matchAll的用法有关了

2.4 改写正则，重新匹配

const pattern = /\<([a-zA-Z0-9]{1,})/g; const htmls = document.documentElement.outerHTML; const bb = [...htmls.matchAll(pattern)]; let result = []; for (let item of bb) { if (item) { if (result.indexOf(item[1]) == -1) { result.push(item[1]) } } } console.log(bb); console.log(result, '0000000')

好了，这样也是可以的

3、正则中match、matchAll 和g 的用法

3.1 match和matchAll的区别

match，返回值是一个数组，当没有任何匹配项时，返回nullmatch，匹配到第一个匹配项后就停止匹配。matchAll，返回一个迭代器，想要查看需要遍历迭代器。将其扩展到数组中，然后遍历器遍历数组matchAll，匹配字符中出现的所有匹配项matchAll，匹配时必须使用g。否则报错

match示例

var xxx="aaa111bbb222ccc333"; var out=/([a-zA-Z]{1,})/; var hhh=xxx.match(out); console.log(hhh)

matchAll 示例

var xxx="aaa111bbb222ccc333"; var out=/([a-zA-Z]{1,})/g; var hhh=[...xxx.matchAll(out)]; console.log(hhh)

3.2 正则中的g

g，表示全局搜索/匹配。如果表达式中有g修饰符，返回所有匹配项。 没有则返回第一个匹配的 结果

3.3 match 和 g的关系

对于match来说，如果正则中有g修饰符，结果中返回所有与正则表达式匹配的项。捕获项()会被忽略对于match来说，如果正则中没有g修饰符，返回结果中返回第一个匹配项， 还有捕获项()

3.4 matchAll 和g的关系

试了几次，matchAll匹配的正则如果没有g，会报错啊 浏览器：Chrome 版本 86.0.4240.80（正式版本） (x86_64)