如何在 HTML 中查找所有类名的频率 [关闭]

Question

如何获取 DOM 中使用的所有类名的频率？

例如，

<div class='wrapper'>
  <div class='child first'></div>
  <div class='child second'></div>
</div>

可能会给我一个带有输出的对象、地图或数组：

result: {
  wrapper: 1,
  child:   2,
  first:   1,
  second:  1
}

---

到目前为止，我已经使用 devtools 来检查 DOM，看看是否可以找到任何多次使用的类名。

2021 年 8 月 24 日更新

我不明白这个问题是如何结束的，因为“这个问题似乎与帮助中心定义的范围内的编程无关......”。它可能有一些问题，但它绝对是关于编程的。我想要的只是一个脚本或可以帮助我解决这个问题的东西。

另外，我知道您通常应该尝试自己解决它并展示您以前的尝试，但我完全不知道从哪里开始。而且，正如我所说，我已经进行了一些手动尝试，但它们是不可持续的。

最后，我在 Jeremy 的帮助下解决了这个问题（谢谢）。如果问题再次被打开，我将发布我的解决方案，该解决方案的灵感来自 Jeremy 的。

Answer 1

我真的很想知道如何实现它，所以我试了一下。可能可以清理，但应该让你开始。

我决定不遍历 DOM，因为这可能是一个递归的噩梦，而是选择将页面 HTML 作为字符串并使用正则表达式从元素中提取类。

countClassFrequency = () => {
    const regex = /(class=['|"])([a-zA-Z\s-]*)(['|"])/g;
    let results = {};
    const html = document.documentElement.innerHTML;
    while ((match = regex.exec(html)) !== null) {
       let classes = match[2];
       classes = classes.split(' ');
       classes.forEach(c => {
          if (results[c]) {
             results[c]++;
          } else {
             results[c] = 1;
          }
       });
    }
    return results;
}

const output = countClassFrequency();

console.log(output);

<div class='wrapper'>
  <div class='child first'></div>
  <div class='child second'></div>
</div>