こんにちは、ライターのマサトです！
今回は、jQueryのセレクタ指定において正規表現や属性フィルタを使った手法について学習を進めていきましょう！
この記事では、
- 正規表現より簡単な属性フィルタとは？
- 「前方一致」でidを指定してみよう
- 「後方一致」で指定する方法
- 「部分一致」で指定する方法
- 「否定」で指定する方法
という属性フィルタについての基礎知識から学習を進めていき、セレクタを正規表現で複数指定する方法などの正規表現を活用した応用例に関して解説をしていきます。この記事で、セレクタ指定における正規表現・属性フィルタをしっかり学習して自分のスキルアップを目指しましょう！
正規表現より簡単な属性フィルタとは？
それでは、まず最初に正規表現よりも簡単にセレクタを指定できる属性フィルタから学習を始めましょう！そもそも、jQueryのセレクタは多種多様な指定方法ができるのが特徴なのですが、HTMLの属性を活用した指定方法がこれからご紹介する属性フィルタになります。
例えば、次のようなHTMLがあると想定してください。
<ul>
<li id="sample1">サンプルテキスト１</li>
<li id="sample2">サンプルテキスト２</li>
<li id="sample3">サンプルテキスト３</li>
<li id="sample4">サンプルテキスト４</li>
</ul>
jQueryの属性を使った指定方法として一般的な構文は次のとおりです！
HTML要素 [ 属性 = 属性名 ]
上記のような構文を使うことで、任意の属性を使ったセレクタ指定方法が可能になります。例えば、「id=sample2」の要素を取得したければ次のようになります。
var result = $('li[id="sample2"]');
console.log( result );
実行結果
[li#sample2......]
注目すべきポイントはセレクタの指定方法です。「li要素」のid属性名が「sample2」の要素を指定したいので、先ほどの構文に合わせて「li[id=”sample2″]」のように記述すれば良いわけです。
そして、この章のテーマである「属性フィルタ」は、「属性 = 属性名」の記述方法のことであり一般的に4つのパターンがあるのでまとめて解説していきます！
「前方一致」でidを指定してみよう
まずは1つ目のパターンである「前方一致」から学習しましょう！先ほどの例では「属性 = 属性名」と記述することで、任意の属性名が一致するHTML要素を取得しました。
「前方一致」は「属性 ^= 属性名」のように「^」を追加するだけで、属性名の先頭部分の文字列が一致するすべての要素を取得できるのです。次のサンプル例を見てください！
<body>
<ul>
<li id="sample1">サンプル１</li>
<li id="test1">テスト１</li>
<li id="sample2">サンプル２</li>
<li id="test2">テスト２</li>
</ul>
<script>
var result = $('li[id^="sample"]');
console.log( result );
</script>
</body>
実行結果
[li#sample1, li#sample2......]
この例では、id属性名が異なる「li要素」が配置されており、「id ^= “sample”」と記述することで属性名の先頭部分が「sample」で始まる要素をすべて抽出しています。
実行結果を見ると分かりますが、「smaple1, sample2」のそれぞれの要素が抽出されていますね。このように、前方一致は属性名の先頭にある文字列が部分的に一致していれば、すべて抽出することができる機能になります。
「後方一致」で指定する方法
次に、後方一致について解説します。これは先ほどの前方一致の反対という意味で考えると分かりやすいのですが、属性名の末尾にある文字列が部分的に一致する要素をすべて抽出するという機能になります。
記述方法は、「属性 $= 属性名」のように「$」を追加するだけです。次のサンプル例を見てください！
<body>
<ul>
<li id="sample-text">サンプル１</li>
<li id="test-sample">テスト１</li>
<li id="title-text">サンプル２</li>
<li id="list-text">テスト２</li>
</ul>
<script>
var result = $('li[id$="text"]');
console.log( result );
</script>
</body>
実行結果
[li#sample-text, li#title-text, li#list-text......]
この例では、属性名の末尾が「text」で終わる要素がいくつか配置されており、「id $= “text”」と記述することで合致する要素をすべて抽出しています。実行結果を見ると、「sample-text, title-text, list-text」の3つが見事に抽出されているのが分かりますね。
つまり、後方一致は属性名の末尾が部分的に一致している要素をすべて取得するという機能になります。
「部分一致」で指定する方法
次は部分一致について学習しましょう！これまでの「前方・後方一致」と違って、属性名のどこかに指定の文字列が入っていれば抽出するという柔軟な指定方法になります。記述方法は、「属性 *= 属性名」のように「*」を追加することで機能します。
次のサンプル例を見てください！
<body>
<ul>
<li id="sample-text">サンプルテキスト</li>
<li id="test-sample">テストサンプル</li>
<li id="title-text">タイトルテキスト</li>
<li id="list-text">リストテキスト</li>
<li id="list-sample-text">リストサンプルテキスト</li>
</ul>
<script>
var result = $('li[id*="sample"]');
console.log( result );
</script>
</body>
実行結果
[li#sample-text, li#test-sample, li#list-sample-text......]
この例では、属性名の中に「sample」という文字列がどこかに入っている要素をすべて抽出しています。実行結果を見ると、「sample-text, test-sample, list-sample-text」の3つが見事に抽出できているのが分かりますね。
「部分一致」は、指定の文字列が属性名のどこかにあれば良いだけなので、最も使いやすく柔軟性のある便利な機能と言えるでしょう。
「否定」で指定する方法
今度は、「否定」について見ていきましょう！これは指定した属性名以外の要素をすべて抽出するという意味になり、これまでのように指定した属性名は対象とならないので注意しましょう。記述方法は「属性 != 属性名」のように「!」を追加するだけです。
次のサンプル例を見てください！
<body>
<ul>
<li class="test">テストサンプル</li>
<li class="title">タイトルテキスト</li>
<li class="list">リストテキスト</li>
<li class="list">リストサンプルテキスト</li>
</ul>
<script>
var result = $('li[class!="list"]');
console.log( result );
</script>
</body>
実行結果
[li.test, li.title......]
この例では、「list」というクラス名を持つ要素以外をすべて抽出するという意味なので、「test, title」という2つの要素を抽出しているのが分かりますね。
否定を使う場合、一般的には同じ属性名を持つ要素を排除するようなケースに向いているため、classやnameなどの属性が多いでしょう。
セレクタを正規表現で複数指定するには？
ここからは、正規表現を使ったセレクタの指定方法を学習していきましょう！正規表現を使えば、これまで学習してきた「属性フィルタ」よりもさらに細かい条件指定が可能になるため多彩なニーズに対応できるようになります。
jQueryのセレクタへ正規表現を直接指定することはできませんが、HTMLの親要素を指定したあとにメソッドを組み合わせることで実現します。この章では、代表的なメソッドの活用方法をご紹介します。
なお、正規表現についての基礎知識や組み立て方などは、次の記事で12個の特殊文字を覚えるだけでマスターできるようになっているので参考にしてみてください！
「each」を使う方法
まず最初は、jQueryでよく使う繰り返しメソッドeachを活用してセレクタ指定をしてみましょう。手順としては、任意のHTML要素をすべて指定し、「each」を使って各要素に正規表現で条件に一致するかどうかを判断して抽出することになります。
次のサンプル例を見てください！
<body>
<ul>
<li class="test-sample">テストサンプル</li>
<li class="title-123">タイトルテキスト</li>
<li class="list-text">リストテキスト</li>
<li class="list-sample-102">リストサンプルテキスト</li>
</ul>
<script>
var result = [];
$('li').each(function( index, element ) {
var value = element.className.match(/-d+/); //ハイフンの次に数値を持つクラス名を抽出
if( value ) result.push( $(this) );
})
console.log( result );
</script>
</body>
実行結果
0: [li.title-123] 1: [li.list-sample-102]
この例では、「each」を使って関数の第2引数に「element」を指定していますが、この中に各HTML要素が格納されています。そして、各HTML要素のクラス名に対して「/-d+/」という正規表現を使い、「- (ハイフン)」から始まる数値が入ったクラス名を持つ要素を抽出しているのが分かります。
「match()」を使うと条件に合致しなかった場合に「null」を返してくれるので、IF文を使って条件分岐できるわけです。ちなみに、「each」メソッドについての基本的な知識や活用事例などを次の記事で詳しく取り上げていますので、ぜひ参考にしてみてください！
「filter」を使う方法
今度は、「filter」を使って正規表現による指定を試してみましょう！「filter」はその名の通り、条件抽出に特化したメソッドなので先ほどの「each」よりもさらに簡単な記述で実現することが可能です。
次のサンプル例を見てください。
<body>
<ul>
<li class="test-sample">テストサンプル</li>
<li class="title-123">タイトルテキスト</li>
<li class="list-text">リストテキスト</li>
<li class="list-sample-102">リストサンプルテキスト</li>
</ul>
<script>
var result = $('li').filter(function( index, element ) {
return element.className.match(/-d+/); //ハイフンの次に数値を持つクラス名を抽出
})
console.log( result );
</script>
</body>
実行結果
0: li.title-123 1: li.list-sample-102
この例では、「filter」を使って関数の第2引数に先ほどと同じく「element」を指定しており、この中に各HTML要素が格納されています。「each」と決定的に違うのは、正規表現による条件式に合致する要素だけを「return」することができる点です。
「return」することで、条件に合う要素だけを返してくれるので、変数「result」には合致した「li要素」だけが出力されているのが実行結果から分かりますね。「filter」の方が記述量も少なく、直感的に理解しやすい構文なので正規表現を使ったセレクタ指定には最適でしょう。
なお、「filter」についての基礎知識やコールバック関数の活用方法などについては、次の記事で詳しく解説していますのでさらなるステップアップを目指して参考にしてみてください！
まとめ
今回は、正規表現・属性フィルタによるセレクタ指定について学習をしました！最後に、これまで学習した内容を簡単におさらいしておきましょう。
- 「属性フィルタ」により特定の属性値を持つ要素を抽出できる
- 「^ * $ !」の特殊文字を「=」と組み合わせることで多彩な条件を作れる
- 「正規表現」によるセレクタ指定には「each」「filter」メソッドが使える
上記内容を踏まえて、ぜひ自分でも積極的にプログラムへ取り入れて活用できるようにしていきましょう！
