- ベストアンサー
JavaScriptでHTMLのclass名取得
- JavaScriptを使用してHTMLのclass名を取得する方法について説明します。
- HTMLのclass名を大文字で始まる単語で区切り、配列に格納する方法を紹介します。
- キャメルケースで単語が繋がっている場合のHTMLのclass名の取得方法について質問しています。
- 山 まこと（@yama-maron）
- お礼率75% (82/109)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
正規表現で大文字を変換すればいいのでは？ _とか任意の文字に変換してからsplitする。 キャメルケースとスネークケースの変換は以下の http://blog.kengo-toda.jp/entry/20081130/1228026182 や http://qiita.com/ryo0301/items/7c7b3571d71b934af3f8 が参考になると思います。
その他の回答 (2)
- sanzero
- ベストアンサー率56% (58/102)
JavaScriptでHTMLのclass名を取得し、配列に入れたいと思っております。 何をするためでしょうか？
お礼
sanzero様 ご回答いただきまして、ありがとうございます。 HTML上に商品の一覧を表示させておりまして、商品の名前や値段等を商品ごとに囲っている<li>タグのクラスに設定し、それを元に表示・非表示や並び替えを行いたいと思っております。 例としまして、以下のようなHTMLとなります。 <li class="商品A 1,000円 家電"> 半角スペースで1つの商品に対して複数のクラスを設定しており、1つ目のクラスは商品名、2つ目は値段、3つ目はカテゴリ、といった形でユーザがどの条件で調べたいか指定した際、何番目のクラス名を元に絞り込み等をすればよいか、クラス名をそれぞれ配列に入れて以降プログラムで処理をする必要があるかと思っておりました。 ご質問させていただきました件につきまして、キャメルケースからスネークケースへの変換を行い、対応することができました。 ご回答いただきまして、ありがとうございました。
- think49
- ベストアンサー率59% (285/482)
lowerCamelCase を単語分割するなら split が使えますね。 http://jsfiddle.net/xxqpeaL6/ ただ、class="test Test" にすれば classList で参照できますし、class="test-Test" にすれば [class|=Test] のセレクタで参照できるので、特別な理由がなければその管理法はお勧めしませんが…。 # Re: yama-maronさん
お礼
think49様 ご回答いただきまして、ありがとうございます。 わざわざ別ページにてソースコードをご提示いただきまして、 大変恐縮です。 ご質問させていただきました件につきまして、 キャメルケースを一度スネークケースに変換し、それからプログラムで処理をする流れで解決することができましたが、私が書いたソースよりもはるかに短く、分かり易いコードで勉強になりました。 ご教授いただきまして、ありがとうございました。
お礼
Hanagefactory様 ご回答いただきまして、ありがとうございます。 載せていただきました参考URLにつきまして、 とても参考になりました。 参考にしつつ、仰るとおりキャメルケースの状態からまずスネークケースへ変換を行い、 splitで配列に入れることで解決することができました。 迅速なご回答のほど、ありがとうございます。