【jQuery】要素を置換するメソッド(replaceWith、replaceAll)の使い方

jQueryで要素を置換するメソッド

こちらではjQueryのメソッドのうち、要素を置換するメソッドについて解説しています。

jQueryの要素を置換するメソッド一覧

メソッド 解説
replaceWith(conent) 要素をconentに置換する。
replaceAll(selector) selectorを要素に置換する。A.replaceWith(B)とB.replaceAll(A)が同じ動作。

replaceWith(conent)

選択している全ての要素をconentに置換するメソッドです。

replaceWith(conent)の使い方

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
</ul>

上記のHTMLにおいて

$('li').replaceWith('<li>ぶどう</li>');

とすると

<ul>
	<li>ぶどう</li>
	<li>ぶどう</li>
	<li>ぶどう</li>
</ul>

のようになります。

3つある<li>が全て置換されます。

replaceWith(function)の使い方

replaceWith()は引数に関数を渡すこともできます。

関数を引数とした場合は、選択した要素を関数の返り値で置換します。

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
</ul>

先ほどと同じHTMLにおいて次のJavaScriptを実行してみます。

$('li').replaceWith(function(){
	return "<li>" + $(this).text() + "とぶどう</li>";
});

引数のfunctionは、元の文字列に「とぶどう」という文字列を追加して返す関数です。

結果は

<ul>
	<li>りんごとぶどう</li>
	<li>みかんとぶどう</li>
	<li>メロンとぶどう</li>
</ul>

のようになります。

replaceAll(selector)

指定した要素で、selectorにマッチした要素を置換するメソッドです。

replaceWith(content)と似た動作をしますが、構文における要素の位置が逆になっています

A.replaceWith(B)とB.replaceAll(A)が同じ動作をします。

replaceAll(selector)の使い方

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
</ul>

上記のHTMLにおいて

$('<li>ぶどう</li>').replaceAll('li');

とすると

<ul>
	<li>ぶどう</li>
	<li>ぶどう</li>
	<li>ぶどう</li>
</ul>

のようになります。

replace()について

JavaScriptにはreplace()というメソッドもあります。replace()はjQueryではありません。

replace()では正規表現を使って文字列を置換することができます。

例えば、CSVファイルで住所データが,で区切られているとします。

福岡県,福岡市,西区

このようなデータを結合して1つの文字列にまとめるために、下のJavaScriptを実行してみます。

var str = "福岡県,福岡市,西区";
var new_str = str.replace(/,/g , '');
console.log(new_str);

文字列str,で区切られていますが、正規表現で置換することで,を取り除き住所データを結合することができます。

実行した結果は

福岡県福岡市西区

のようになります。

[prism]