ywork2020.com

Title

テキストや要素を置換する

目次 (INDEX)

replaceAllとは

ここで説明するreplaceAll とは次の語句からなるjQueryのメソッドです。
replace
読み: リプレイス
意味: 置き換える、取り換える
all
読み: オール
意味: 全て、全部、全体

目次に戻る

replaceAllメソッドの概要

このメソッドは現に存在するテキストや要素をターゲットにして別のテキストや要素に置き換えることができます。

新規定義のテキストや要素を作成して置換値とすることもできますし、既存の要素を指定して置換値にすることもできます。 既存の要素を置換値とした場合、その要素のコピーではなく、その要素自体がターゲットの位置に移動することになります。

このメソッドには、類似したメソッドとして replaceWith メソッドがあります。どちらも基本的な動作は同じといえますが、コードの記述方法が異なります。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

$(newContent).replaceAll(target)

目次に戻る

サンプルコードと実行結果

このサンプルではoutput要素を3つ配置しています。 input要素button型をクリックするとoutput要素をターゲットにreplaceAllメソッドを実行します。 置き換えに使われる値はjQueryセレクターの値が使用されます。

サンプルコード: HTML
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<output>innerText</output><br>
	<output>innerText</output><br>
	<output>innerText</output><br>
	<input type="button" value="replaceAll : 置き換え" id="idButton">
</body>
  • 05-07: output要素 (replaceAllのターゲットです)
  • 08: input要素 (クリックすると関数を実行します)
サンプルコード: script
<script>
	$("#idButton").click(function(){
		$("<output>replaced</output>").replaceAll("output");
	});
</script>
  • 02: 関数 (idButtonがクリックされると実行します)
  • 03: 関数の内容 (outputをターゲットにしてreplaceAllを実行します)
実行結果:

output要素 × 3:
innerText
innerText
innerText

実行:

リセット:

目次に戻る