jQueryでケースインセンシティブな:containsセレクタを使う

2024-04-07

jQueryでケースインセンシティブな:containsセレクタを使用する

jQueryの:containsセレクタは、要素内のテキスト内容を検索し、一致する要素を選択します。デフォルトでは大文字と小文字を区別しますが、ケースインセンシティブな検索を行う方法もあります。

ケースインセンシティブな:containsセレクタの必要性

Webサイトのコンテンツは、大文字と小文字が混在している場合があります。例えば、ユーザーが入力した検索ワードと、データベースに保存されたデータの文字列で大文字と小文字が異なる場合、デフォルトの:containsセレクタでは一致せず、目的の要素が見つからない可能性があります。

jQueryには、:containsセレクタの動作を変更する修飾子がいくつか用意されています。ケースインセンシティブな検索を行うには、以下のいずれかの方法を使用できます。

:icontainsセレクタを使用する

jQuery 1.6以降では、:icontainsセレクタを使用することで、ケースインセンシティブな:containsセレクタを実現できます。

// 大文字と小文字を区別せずに "Hello" を含む要素を取得
$( "div:icontains('Hello')" ).css( "color", "red" );

:contains() メソッドの第二引数に i オプションを渡す

jQuery 1.3以降では、:contains() メソッドの第二引数に i オプションを渡すことで、ケースインセンシティブな検索を行うことができます。

// 大文字と小文字を区別せずに "Hello" を含む要素を取得
$( "div" ).filter( ":contains('Hello', i)" ).css( "color", "red" );

toLowerCase() メソッドと $.trim() メソッドを使用する

以下のコードのように、toLowerCase() メソッドと $.trim() メソッドを使用して、要素内のテキストと検索ワードを小文字に変換してから比較することもできます。

// 大文字と小文字を区別せずに "Hello" を含む要素を取得
$( "div" ).filter( function() {
  return $( this ).text().toLowerCase().indexOf( "hello".toLowerCase() ) !== -1;
} ).css( "color", "red" );

注意点

上記の例では、要素内のテキスト全体を検索しています。部分一致で検索したい場合は、:contains() メソッドの引数に正規表現を使用できます。
ケースインセンシティブな検索は、パフォーマンスに影響を与える可能性があります。

<div>
  <h1>Hello World</h1>
  <p>This is a paragraph with some text.</p>
  <p>This is another paragraph with some more text.</p>
</div>

JavaScript

// 1. :icontainsセレクタを使用する

$( "div:icontains('Hello')" ).css( "color", "red" );

// 2. :contains() メソッドの第二引数に `i` オプションを渡す

$( "div" ).filter( ":contains('Hello', i)" ).css( "color", "red" );

// 3. toLowerCase() メソッドと $.trim() メソッドを使用する

$( "div" ).filter( function() {
  return $( this ).text().toLowerCase().indexOf( "hello".toLowerCase() ) !== -1;
} ).css( "color", "red" );

実行結果

上記のコードを実行すると、以下のようになります。

<h1>要素内の "Hello" が赤色になります。

補足

上記は単純な例です。実際の使用例では、より複雑な条件を設定する必要がある場合があります。例えば、部分一致で検索したい場合は、:contains() メソッドの引数に正規表現を使用できます。

// 部分一致で "Hello" を含む要素を取得
$( "div" ).filter( ":contains('Hello.*')" ).css( "color", "red" );

jQueryでケースインセンシティブな:containsセレクタを実現する他の方法

$.fn.extend() メソッドを使用して、独自のセレクタを作成できます。

$.fn.extend({
  icontains: function( text ) {
    return this.filter( function() {
      return $( this ).text().toLowerCase().indexOf( text.toLowerCase() ) !== -1;
    } );
  }
});

// "Hello" を含む要素を取得
$( "div" ).icontains( "Hello" ).css( "color", "red" );

Sizzle セレクタを使用する

Sizzle は、jQueryで使用されているセレクタエンジンです。Sizzle セレクタを使用して、ケースインセンシティブな:containsセレクタを直接記述できます。

// 大文字と小文字を区別せずに "Hello" を含む要素を取得
$( "div:contains(Hello, i)" ).css( "color", "red" );

Lodashなどのライブラリには、ケースインセンシティブな比較を行う関数などが用意されています。これらの関数を使用して、独自のセレクタを作成できます。

// Lodashを使用して大文字と小文字を区別せずに "Hello" を含む要素を取得
$( "div" ).filter( function() {
  return _.includes( $( this ).text().toLowerCase(), "hello" );
} ).css( "color", "red" );