決められた文字列が入力された時にその文字列の色を変化させるjQuery

更新日：2017年2月26日

例えば「東京」という文字列の色を変化させたい場合があったとします。
自分が運営するウェブサイト内で「東京」という文字列があった場合、その文字列をCSSで特別な装飾をせずとも色を変化させるといった使い方が出来ます。
あるいは掲示板のような投稿型のウェブサイトにて、「東京」という文字列が含まれた書き込みがあった場合、その文字列の色を変化させるといった使い方も出来ます。

それではどのように実装しているのかというと、jQueryで

$(function() {
	$('.tokyo_in_box:contains("東京")').each(function() {
		var mojiretsu = $(this).html();
		$(this).html(mojiretsu.replace(/東京/g,'東京'));
	});
});

と記述します。
何をしているかというと、tokyo_in_boxというclass名の中にもしも「東京」という文字列が含まれていた場合、
redtextというclass名がついたspanタグで囲んでから出力しますよという内容になります。

となるとredtextというclass名にはどのような装飾をするかCSSで指定してあげなければなりませんね。
文字色を赤くするだけであればCSSは下記のような記述となります。

.redtext {
	color: #F00;
}

これにて完成しました！
文字色が赤くなるのは、tokyo_in_boxというclass名の中になりますので、その場所を用意するのを忘れずにして下さいね！