htmlの使われていない クラス名 を探す方法はないのでしょうか？

Question

htmlの使われていない クラス名 を探す方法はないのでしょうか？
使われていないcssを探す方法があるようですが、utilityがあるのとインスペクタ上で、ミニファイされたcssの使われていないものがわかっても、非常にわかりにくいですよね。

こちらは見つかりません。

Answer 1

求めていらっしゃるものと違ったら申し訳ないんですけど、

document.getElementsByClassName("クラス名").length
```の結果が0の場合そのクラスは使われてないということになります。(Chromeで動作確認済み)

Comments

[退会済みユーザー]

そんな方法があったのですねありがとうございます。
自分で見てこれは使われてなさそうだなと思ったものをインスペクタ上でひたすら行えばよいということですかね？

[Diawel]

はい。

[退会済みユーザー]

１と出た場合はどこかで使っているのですね。

[Diawel]

そういうことです。

[退会済みユーザー]

lengthプロパティ(中身が何個あるか)なので1なら一こどこかで使っているということなのですね。
つまり使っている数が0なら使っていないがそれ以外なら数値文使っているということですね。

[Diawel]

そうです。なので、
document.getElementsByClassName("クラス名").length>0
とかにすると使われている時だけtrueになります。

[退会済みユーザー]

ありがとうございます。ひとつづつやるのは骨が折れますが。参考になりました。

[Diawel]

よかったです(^^)

[退会済みユーザー]

もう少し待って、いっぺんに探せる方法がなければBAにさせてもらいます。ありがとうございました。またapp.cssをクラス名で検索する方法もありますね。

Answer 2

詳しくないので具体的なコードは分かりませんが、
0. html中から「id=」を探して、
0. その横の「"」から次の「"」の文字の間の文字列を取得。
0. 変数に放り込んでdocument.getElementsByClassName("クラス名").length>0に評価させる。
0. trueならStrings[]にでも順番に放り込む
0. 最後に、Alertか何かで配列に入れた文字列を順番に吐かせる。

といったカンジになるかと。

自分用にコードもどきを書いときます

/*

関数{
   //id名のリスト作成

   配列[]を定義

   i=0;
   while（次の文字列がなくなるまで）{
      「id="」を探す
      その横から次の「"」までの間にある文字列を取得
      取得した文字列（id名）を配列[i]に代入
      i++;
      }

   //id名の有無を調べる

   j = 配列のlength;
   k = 0;
   ループ（j>=0）{
      if（調べたい文字列==配列[j]）{k++;}
      j--;
      }
   Alert（"○○というid名は" + k + "個ありました。"）
      
   }
*/

こういう雰囲気になるのかなぁ

Comments

[退会済みユーザー]

ありがとうございます。JS初心者の私には敷居が高いですが、それだとひとつづつ入れなくてもバーッとチェックしてくれるのですね。