DOM

：

：

HTMLInputElement.setRangeText() メソッド

　編集：2022.11.06 by T.A.

[Edge]。→、、

HTMLInputElement のテキストの内容を指定範囲の部分だけ指定文字列で置換します。

mdn： <input> や <textarea> 要素の中のテキストの範囲を新しい文字列に置き換えます。

構文
HTMLInputElement.setRangeText(replacement[, start, end[, selectMode]])
HTMLInputElement HTMLInputElement。
replacement 挿入する文字列。
start 省略可。置換する開始文字位置を表す数値。0～。初期値は selectionStart の値です。
end 省略可 startを指定したら必須。置換する終了文字位置を表す数値。0～。初期値は selectionEnd の値です。
selectMode 省略可。テキストが置換された後で、選択範囲がどのように設定されるかを表す文字列です。以下の何れか。
select 新規挿入したテキストを選択します。
start 挿入したテキストの直前に選択範囲を移動します。
end 挿入したテキストの直後に選択範囲を移動します。
preserve 選択範囲を保全しようとします。初期値。¶→前回のキャレット位置を保持する。
戻り値

例
mdnより

この例にあるボタンをクリックすると、テキストボックス内のテキストの一部を置き換えます。新しく挿入されたテキストは、その後で強調（選択）されます。

HTML： 

<input type="text" id="text-box" size="30" value="このテキストは更新されていません。">
<button onclick="selectText()">テキストを更新</button>

JavaScript： 

function selectText() {
  const input = document.getElementById('text-box');
  input.focus();
  input.setRangeText('ました', 11, 16, 'select');
}

HTML： 

<SPAN id=IdSpan>ここをクリック</SPAN>
<INPUT id=IdTest type=text value="INPUT要素">

JavaScript： 

function Job(eve){  //click イベントの処理：
  IdTest.focus();
  IdTest.setRangeText("置換しました", 2, 4, 'preserve');
}
IdSpan.onclick=Job;  //click イベント割り当て。

→focus()。click イベント。

JavaScript： replacementだけ指定。 function Job(eve){ //click イベントの処理： IdTest.focus(); IdTest.selectionStart=2; //選択開始位置。 IdTest.selectionEnd=4; //選択終了位置。 IdTest.setRangeText("置換しました"); } IdSpan.onclick=Job; //click イベント割り当て。

selectModeは select と同等となった。

テスト