jQueryで特定の文字列をもつ要素を取得

この記事は約2分で読めます。
広告

jQueryで特定の文字列を含む要素を取得する方法ご紹介です。
この方法はリストをループ処理して特定文字列のあるリストのスタイルを変更する処理になります。
実際のコードはこちら。

// リスト要素をループ処理
$('li').each(function(){
  // 各リスト要素のテキスト内容を取得
  var text = $(this).text();

  // 特定の文字列を含むかどうかを判定
  if (text.indexOf('検索文字列') !== -1) {
    // 特定の文字列を含む要素に対して処理を実行
    $(this).css('background-color', 'yellow'); // 背景色を黄色に変更
  }
});

各リストのテキストを取得して、そのテキストに特定の文字列を含むかどうか判定して、特定の文字列が存在した場合にスタイルを変更しています。
では実際にこのコードを使って特定文字列を含む場合の挙動を確認してみましょう。

リストの文字列に「パッタイ」があったら背景が黄色になります。

  • 1. あのタイ料理はタッパイだったか。
  • 2. いいえこのタイ料理はイッパタです。
  • 3. いいえいいえ。このイタ料理はタパッイです。
  • 4. 違います。このタイ料理はパッタイです。
  • 5. 半角カナではパッタイです。
  • 6. ローマ字ではpattaiです。
  • 7. ひらがなだとぱったいです。

指定された文字列が一部でも含まれたり、半角カナやひらがなローマ字だと、背景色が変わりませんでしたが
指定された文字だとちゃんと背景色が変わりました。

コメント

タイトルとURLをコピーしました