jQuery【 replace 】要素を置換する replaceWith と replaceAll

要素の置き換えを行うメソッドとして JavaScript には replace メソッドがありますが、jQuery には replaceWith メソッドと replaceAll メソッドがあります（ JavaScript の replace メソッドも使用できます ）。
今回は、jQuery の replaceWith メソッド及び replaceAll メソッドの使用方法について解説いたします。

尚、replace メソッドの使用方法については、以下のページをご参照下さい。
JavaScript【 replace 】1. 文字列の置換
JavaScript【 replace 】2. メタ文字を使用した置換
JavaScript【 replace 】3. 様々な置換方法

1. replaceWith メソッド

　
replaceWith メソッドは、要素の置き換えを行うメソッドです。

replaceWith メソッドは、引数によって 2 通りの記述方法があります。

$(セレクタ).replaceWith( newContent );

$(セレクタ).replaceWith( function( function ) );

replaceWith メソッドの引数の内容は、それぞれ以下の通りです。

.replaceWith( newContent )

.replaceWith( function )

▲目次へ戻る

2. replaceAll メソッド

　
replaceAll メソッドも、要素の置き換えを行うメソッドです。

replaceAll メソッドと replaceWith メソッドとは要素の置換という同じ処理を行いますが、置換対象と指定する要素との記述位置が逆である点に違いがあります。

replaceAll メソッドは、次のように記述します。

$( newContent ).replaceAll( target );

replaceAll メソッドの引数の内容は 以下の通りです。

.replaceAll( target )

▲目次へ戻る

3. replaceWith の使用方法

　
replaceWith メソッドを使用して、span 要素内のテキスト（ デフォルト表示：「こんにちは！」 ）を置換します。
各ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {

  $("#btn1").on("click", function() {
    $("#spn1").replaceWith("<span id = 'spn1'>Hello!</span>");   
  });

  $("#btn2").on("click", function() {
    $("#spn1").replaceWith("<span id = 'spn1'>Bonjour!</span>");   
  });
});
//-->
</script>

<div style="background-color : #CCC; padding:20px;">
  <span id = "spn1">こんにちは！</span>
　<input type="button" id="btn1" value="英語">
　<input type="button" id="btn2" value="仏語">
</div>

▲目次へ戻る

4. replaceAll の使用方法

　
replaceAll メソッドを使用して、span 要素内のテキスト（ デフォルト表示：「こんにちは！」 ）を置換します。
各ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {

  $("#btn3").on("click", function() {
    $("<span id = 'spn2'>Hello!</span>").replaceAll("#spn2");   
  });

  $("#btn4").on("click", function() {
    $("<span id = 'spn2'>Bonjour!</span>").replaceAll("#spn2");   
  });
});
//-->
</script>

<div style="background-color : #CCC; padding:20px;">
  <span id = "spn2">こんにちは！</span>
　<input type="button" id="btn3" value="英語">
　<input type="button" id="btn4" value="仏語">
</div>

replaceWith メソッドで「$(A).replaceWith(B);」と記述して実行される処理内容は、replaceAll メソッドでは「$(B).replaceAll(A);」と記述します。

▲目次へ戻る

5. まとめ

jQueryの replaceWith メソッドと replaceAll メソッドについて、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る