jQueryでreplaceを使って複数箇所の複数の文字列を一括置換する方法

jQueryでreplaceを使って、HTMLページ内の文字列を別の文字列に置き換えることができます。

CMS等のプログラム中で定義されている文字列を別の文字列に置き換えたいときや、たくさんの文字修正があったときなどに便利です。

基本的な使い方から段階をふんで、最終的に「複数箇所の複数の文字列を一括置換する」という動作になるようにしてみようと思います。途中の解説が不要な方は、ページの下までワープしてください。

一つの要素内の該当する文字列を一箇所だけ置換

一つの要素内の、最初にマッチした文字列を一箇所だけを指定した文字列に置き換えます。

<p id="replace">私はみかんが好きだ。みかんなしでは生きられない。</p>

$(function(){
	var txt = $('#replace').html();
	$('#replace').html(
		txt.replace('みかん','猫')
	);
});

一つの要素内の該当する文字列をすべて置換

一つの要素内の、マッチした文字列が複数箇所あった場合、全部を指定した文字列に置き換えます。

<p id="replace">私はみかんが好きだ。みかんなしでは生きられない。</p>

$(function(){
	var txt = $('#replace').html();
	$('#replace').html(
		txt.replace(/みかん/g,'猫')
	);
});

複数の要素内の該当する文字列をすべて置換

複数の要素にわたって置き換えしたい場合は以下のように「each」を使います。

<p class="replace">私はみかんが好きだ。みかんなしでは生きられない。</p>
<p class="replace">なんでみかんが好きなんだろう。</p>
<p class="replace">私の前世はみかんだったのかもしれない。</p>

$(function(){
	$('.replace').each(function(){
		var txt = $(this).html();
		$(this).html(
			txt.replace(/みかん/g,'猫')
		);
	});
});

メソッドチェーンで複数の文字列を一括置換

「replace」をメソッドチェーンにすると、複数文字列の置換が可能になります。「.」でつないでいくだけです。

<p class="replace">私はみかんとりんごとぶどうが好きだ。</p>
<p class="replace">なんでみかんとりんごとぶどうが好きなんだろう。</p>
<p class="replace">私の前世はみかんかりんごかぶどうだったのかもしれない。</p>

$(function(){
	$('.replace').each(function(){
		var txt = $(this).html();
		$(this).html(
			txt.replace(/みかん/g,'猫')
			   .replace(/りんご/g,'犬')
			   .replace(/ぶどう/g,'猿')
		);
	});
});

配列とfor文で複数の文字列を一括置換

置換したい文字がたくさんあるときは、配列とfor文を使うとコードが少しすっきりします。もちろんメソッドチェーンを使っても問題ありませんが。

$(function(){
	var arr1 = [
		/みかん/g,
		/りんご/g,
		/ぶどう/g
	];
	var arr2 = [
		"猫",
		"犬",
		"猿"
	];
	$('.replace').each(function(){
		for(var i=0, len=arr1.length; i<len; i++){
			var txt = $(this).html();
			$(this).html(
				txt.replace(arr1[i],arr2[i])
			);
		}
	});
});

連想配列と$.eachで複数の文字列を一括置換

ちょっと無理やりな感はありますが、オブジェクトと$.each関数を使っても同じような事ができます。

keyに「//g」は使えませんので、keyとvalueを入れ替えてみました。

$(function(){
	var arr = {
		"猫" : /みかん/g,
		"犬" : /りんご/g,
		"猿" : /ぶどう/g
	};

	var elm = $('.replace');

	elm.each(function(i){
		$.each(arr,function(key,value){
			var txt = elm.eq(i).html();
			elm.eq(i).html(
				txt.replace(value,key)
			);
		});
	});
});