jQuery で部分一致検索！contains を使った方法と注意点【サンプルコード付き】
【jQuery】要素のテキストに特定の文字列が含まれているか判定する方法
はじめに
Webサイトでよくある機能の一つに、入力したキーワードを含む要素を絞り込む「部分一致検索」があります。jQuery を使えば、この部分一致検索を簡単に実装できます。
1. :contains セレクタとは？
jQuery の :contains(text) セレクタは、指定したテキストを**部分的に含む**要素を選択できます。
主な用途:
- 検索機能: 入力されたキーワードを含む要素をハイライトしたり、リストを絞り込んだり
- 要素の表示/非表示の切り替え: 特定の文字列を含む要素だけを表示/非表示に
サンプルコード:
// "example" という文字列を含む全ての <p> タグを選択
$("p:contains('example')")
2. 変数を使った :contains セレクタ
text 部分に変数を指定することで、動的に検索文字列を変更できます。
例:
// 入力されたキーワードを取得
var keyword = $("#search-box").val();
// キーワードを含む要素を取得
var $matchedElements = $("p:contains('" + keyword + "')");
// 取得した要素に対して処理を行う
$matchedElements.addClass('highlight');
3. :contains セレクタの注意点
- **部分一致である:** 完全一致させたい場合は、他の方法を検討する必要があります。
- **大文字と小文字を区別する:** 区分しない場合は、
toLowerCase()などを使って大小文字を統一する必要があります。 - **パフォーマンス:** 大量の要素に対して使用すると、処理が重くなる可能性があります。
まとめ
jQuery の :contains セレクタを使うことで、簡単に部分一致検索を実装できます。ただし、注意点も踏まえて使用しましょう。
よくある質問
| 質問 | 回答 |
|---|---|
| :contains セレクタで大文字と小文字を区別せずに検索するにはどうすればよいですか？ | 検索する文字列と対象のテキストの両方に対して toLowerCase() を使用して、小文字に統一してから比較します。 |
| :contains セレクタは完全一致検索には使用できますか？ | 部分一致検索を行うセレクタであるため、完全一致検索には適していません。完全一致検索を行う場合は、他の方法を検討する必要があります。 |
| :contains セレクタを使用した検索が遅い場合はどうすればよいですか？ | 大量の要素に対して :contains セレクタを使用すると、処理が重くなる可能性があります。パフォーマンスを改善するために、JavaScript のネイティブなメソッドを使用して検索処理を実装したり、検索対象を絞り込んだりすることを検討してください。 |
参考文献
その他の参考記事:jquery セレクタ 変数