检测 html 代码上未使用的 class 名称

Question

存在任何方法或工具来检测 html 代码上未使用的 class 名称。

我有一些带有旧引导程序的 html 代码； jquery 和个性化 css 样式如下：

<div class="clear fot-her likes tab-sub">content</div>

但如果fot-her class 名称不适用任何样式，我需要清除未使用的内容，将其添加到列表中并显示并提醒。

我只找到这个，但我可以获得 class 名称：

var style = window.getComputedStyle(element [, pseudoElt]);

这只能通过给定的 class 名称获取元素：

var elements = document.getElementsByClassName(names);

脚本

function checkClassCSS() {
    let doc = document.all;
    let style = document.styleSheets;
    var listofClases = []
    Object.entries(doc).forEach(([key, element]) => {
        let classes = element.className.split(/\s+/);
        let new_classes = []
        classes.forEach((cl) => {
            if (cl != '') {
                new_classes = new_classes.concat(['.' + cl]);
            }
        });
        listofClases = listofClases.concat(new_classes);
    });
    listofClases = listofClases.filter(v => v != '');
    listofClases = Array.from(new Set(listofClases));
    var SelectorClass = []
    Object.entries(style).forEach(([key, node]) => {
        let rule = node.cssRules;
        Object.entries(rule).forEach(([key, cssSelector]) => {
            SelectorClass = SelectorClass.concat([cssSelector.selectorText]);
        });
    });
    SelectorClass = SelectorClass.filter(v => v != '');
    SelectorClass = Array.from(new Set(SelectorClass));
    var missing = [];
    listofClases.filter(function(x) {
        if (!SelectorClass.includes(x)) {
            missing.push(x);
        }
    })
    console.log(missing);
}

我无法正确获取未使用的 class 名称，例如： col-lg-4可能在 html 代码中使用，但它仍然出现在missing的变量中。

Answer 1

获取document.all并查找tagName=="STYLE" 。
在所有这些（如果有的话）中，查找sheet.cssRules和每个selectorText 。
这些应该是类 - 将它们收集到一个数组中。
然后， go 遍历所有其他document.all ，查找classList 。
将它们与数组进行比较 - 如果在数组中找到，则很好，如果不是：警告。
祝你好运！