封装一个函数正则匹配获取当前页面中的class类名

这是一道刷到的面试题，感觉在某些框架里也看到过类似的用法，正则匹配类名，id什么的，当然不一定跟我写的一样，如有更好办法，欢迎分享。

function getClass() {
  var arr = [];
  var str2 = document.getElementsByTagName("html")[0].innerHTML;
  var reg = /class=['|"]?([\w+\s]+)['|"]?/g;
  var flag1 = str2.replace(reg, function ($0, $1) {
    arr.push($1);
  });
  return arr;
}
console.log(getClass());

言归正传，此题主要考察正则表达式。其中获取页面内容，使用的document.getElementsByTagName(“html”)[0].innerHTML。但这方法，会包括注释里的内容。

函数中正则是匹配class的内容，但是为什么写[‘|”]?呢？因为html中设置class有三种方式：class=”value” class=’value’ class=value ，所以使用非贪婪获取单引号，双引号，或者没有。真正需要的class的值使用小括号当做捕获组内容。然后因为一个元素可能含有多个类名，所以匹配字符和空格，并且是贪婪的（+）。

然后在接下来的replace函数中，将匹配的$1捕获组也就是匹配的小括号内容也就是class里的值添加到数组中，解释一下这里$0返回的是整个的class匹配，也就是正则对象的匹配内容class=”value”这样的。最后返回数组。

打赏