☰

在 BASH 中查找 HTML 文档中使用的所有 ID 和 CLASS

tag-icon • tag-icon linux bash html css
在 BASH 中查找 HTML 文档中使用的所有 ID 和 CLASS

我有一段 HTML，需要从中提取所有 ID 和 CLASS。我想列出这些内容，以便可以开始精简超出需要的 CSS 文档 (173k)。

我会隔离 HTML 代码块并将其放入其自己的文件中，但必须浏览并记录使用的所有 ID 和 CLASS，这相当耗时。

我想使用 bash 脚本来处理这个问题，将所有 ID 写入一个文件，然后将所有 CLASS 写入另一个文件，或者同一个文件，只要它区分 ID 的结束位置和 CLASS 的开始位置。

谁能帮我？

提前致谢。

答案1

我需要找到所有的类等来找出一些 CSS 选择器试图匹配的内容 - 我使用了以下快速方法（适用于 Fedora 21 版本的 Bash）：

grep -Eoih class\=\"[^\"]*\" index.html | sed -e 's/"//g' -e 's/class=//g' | tr " " "\n" | sort -u

替换class为idID

哪个：

  • grep -E- 扩展正则表达式（可能不需要），-o- 仅显示匹配的，-i不区分大小写，-h不打印文件名（对于多个文件）。
  • 在class\=\"和之间"，匹配所有不是"
  • sed- 删除"并'class="
  • tr- 用换行符替换空格
  • sort- 按顺序排序并删除重复项

但它非常有限（例如，它是为使用"引号的东西设计的）。

为了删除多余的 CSS，我建议使用uncss，它会删除未使用的 CSS，这样您就不必手动执行此操作。您可以通过 安装它npm install -g uncss，并像这样使用它（要获得更多选项，请使用uncss --help）：

  uncss ./index.html > new-css.css

注意，它会处理 HTML 等文件来查找所使用的 javascript、类和 id，因此您需要提供 HTML 作为输入。

答案2

虽然这不是一个 bash 解决方案，但我认为这是一个使用 JavaScript 的非常简单的解决方案：

(function (){
    var all = document.getElementsByTagName("*");
    var ids = [];
    var classes = [];

    for (var i=0, max=all.length; i < max; i++) {
        var elem = all[i];
         if(elem.id) {
            ids.push(elem.id);
         }

         if(elem.className) {
            var classList = elem.className.split(" ");
            Array.prototype.push.apply(classes, classList);
         }
    }


    console.log("Ids:");
    ids.forEach(function(e){
        console.log(e);
    });

    console.log("Classes:");
    classes.forEach(function(e){
        console.log(e);
    });
})();

如果您将其复制并粘贴到浏览器的 JavaScript 控制台中，您将获得类和 ID 的列表。可以改进它以删除重复项并进行排序，但这是一个很好的开始。

相关内容