class名とid名を一覧化したい

直接プログラミングに関わる質問ではなくて申し訳ございません。

###前提・実現したいこと
サイト、ディレクトリ、ページ(HTML)のいずれかの単位で使用しているclass名とid名を抽出し、
テキストファイルやエクセルファイルなどで保存したいと思っています。
最終的には複数のページで使用しているclass名、id名すべてをドキュメントとして残したいです。

###試したこと
以下のサイトを使用してページ単位で使用しているclass名、id名はあらかた抽出できたのですが、
idとclass両方が指定されている要素は、class部分が無視されてしまいました。
http://extractcss.com/

何かいい方法やツールをご存知の方がいらっしゃいましたら、ご教示いただけますと大変助かります。
よろしくお願いいたします。

yambejp

2017/12/27 05:36

自ページ内に組み込んでいいなら、DOMとして認識できるので比較的カンタンにいけそうな気がします。別のページを解析したりテキストとしてコピペしてチェックする場合は文字列の評価になるので多少処理が面倒です。具体的などういうチェッカが希望でしょうか？

oimo014

2017/12/27 05:43

コメントいただきありがとうございます。最終的には複数のページで使用しているclass名、id名すべてをドキュメントとして残したいため、後者に当たるかと思います。質問にも追記してきます。

yambejp

2017/12/27 05:49

文字列からidやクラスを抜き出すのでしたらやはりjavascriptで正規表現をご利用になることだと思います。サーバーサイドの技術を使っていいなら言語に寄ってHTMLの解析ツールは用意されていたりライブラリが公開されていたりするでしょう。またクライアントのローカルで動く解析ツールいくつか公開されているようです

x_x

2018/01/02 08:04

動的にidやclassがつけられたりすると思うのですが、考えなくてもいいのでしょうか？

行動規範の内容に同意します

回答4件

単に列挙してはダメなのでしょうか？

JavaScript
1document.querySelectorAll('[class]').forEach(e=>console.log(e.className));
2document.querySelectorAll('[id]').forEach(e=>console.log(e.id));

投稿2018/01/02 08:21

x_x

総合スコア13749

退会済みユーザー

2018/01/02 10:20

どうせなら、e.classNameよりe.classListを使ったほうがいいかと。

x_x

2018/01/02 12:05

重複をなくしたほうがいいかなとかコピーしやすいようにウインドウ開いたほうがいいのかとかブックマークレットにしたほうがいいのかとか考えていろいろ書きなおしていたのですが、要件もはっきりしないのに凝ってもなーと思い直して今の形になってしまいました＞＜

行動規範の内容に同意します

ベストアンサー

正規表現

ローカルにファイルがある前提ですが、grepで検索してみてはいかがでしょうか。
'リモートにしかファイルが存在しないのなら、Webサイトを丸ごとダウンロードする必要があります。)

plain
1id\s*=\s*(?:"[^"]+"|'[^']+'|[^"'=<>\s]+)
2class\s*=\s*(?:"[^"]+"|'[^']+'|[^"'=<>\s]+)

抽出したログを正規表現の一括置換、Excelなどで整形します。

DOM

ページ単位なら、x_x さんが回答されているようにJavaScriptを使うのが楽です。
以下、未検証ですが、コードの流れを追うのに使って下さい。

JavaScript
1var idList = Array.prototype.map.call(document.querySelectorAll('[id]'), element => element.id);
2
3var classList = Array.prototype.reduce.call(document.querySelectorAll('[class]'), (classList, element) => (Array.prototype.push.apply(classList, element.classList), classList), []);