ITコラム

プログラミングノウハウ

2018.09.29

#jQuery入門

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

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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. replaceWith メソッド
2. replaceAll メソッド
3. replaceWith の使用方法
4. replaceAll の使用方法
5. まとめ

1. replaceWith メソッド

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

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

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

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

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

.replaceWith( newContent )

newContent
置換する要素を指定（文字列、DOM 要素、jQuery オブジェクトが指定可能）

.replaceWith( function )

function
置換する要素を戻り値として返す関数を指定

▲目次へ戻る

2. replaceAll メソッド

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

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

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

$( newContent ).replaceAll( target );

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

.replaceAll( target )

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);」と記述します。

▲目次へ戻る