特定の文字列が含まれているテキストの色を変えるjQuery

更新日:2021年1月24日

特定の文字列が含まれている場合にその文字色を変えたいとかって場面ありませんか?
静的なサイトの場合は自分でそれ用にclassふるし別に必要ないって思うかも知れませんが、
動的なサイト、例えば掲示板のようなユーザーが投稿する形式の場合は自動で文字色を変えてくれるのでとっても便利です。

それでは早速実装方法ですが、HTMLで下記のように書きます。
ただのリストタグに都道府県の名前を入れてるシンプルなものになります。

  • 兵庫
  • 京都
  • 岐阜
  • 大阪
  • 北海道
  • 東京
  • 青森

次にjQueryで下記のように書きます。

$(function() {
	$("li:contains('東京')").css("color", "red");
});

liタグの中に「東京」という文字列が含まれていた場合、その要素(今回の場合liタグ)の文字色を赤色にするという内容の記述になります。

はい、これにて完成!

このシンプルな記述でこんなことが出来るjQueryって改めて便利ですね。
コピペで使って下さい。