DOM

Text.splitText() メソッド

 編集:2022.10.31 by T.A.

[Edge]。→

Text を指定したオフセット位置で 2 つに分割し、オフセット位置以降の Text ノードを返します。

mdn: Text を指定したオフセット位置で二つに分割します。元のノードと取得ノードにそのデータを保持します。

mdn: 分割後、現在のノードには指定したオフセット位置までのすべてのコンテンツが設定され、新規作成された同じ種類のノードには残りのテキストが設定されます。新しく作成されたノードは呼び出し元に返されます。元のノードに親があった場合、新しいノードは元のノードの次の兄弟として挿入されます。オフセットが元のノードの長さと等しい場合、新しく作成されたノードにはデータがありません。

mdn: 分割されたテキスト ノードは、Node.normalize() メソッドを用いて結合することができます。

構文
Text.splitText(offset)
Text Text
offset ¶分割する直前の文字位置を表す数値。¶Number。0~。
戻り値

新しく生成された Text ノードを返し、指定されたオフセット位置以降のテキストが格納されます。

例外
IndexSizeError(DOMException
指定されたオフセットが負の値であるか、ノードのテキストの 16 ビット単位の文字数よりも大きい場合に発生します。
NoModificationAllowedError(DOMException
ノードが読取専用の場合に発生します。
mdn

<p> のテキストが二つのテキストノードに分割され、<u> がその間に挿入されます。

HTML:

<p>foobar</p>

JavaScript:

const p = document.querySelector('p');

// <p> の中身をテキストノードとして取得
const foobar = p.firstChild;

// 'foobar' を二つのテキストノード 'foo' と 'bar' に分割し、
// 'bar' を const として保存
const bar = foobar.splitText(3);

// <u> 要素を作成して ' new content ' を含める
const u = document.createElement('u');
u.appendChild(document.createTextNode(' new content '));

// <u> を 'bar' の前に追加
p.insertBefore(u, bar);

// 結果: <p>foo<u> new content </u>bar</p>

HTML:

<SPAN id=IdTest>[SPAN要素。テキスト<B>[B要素]</B>後ろのテキスト]</SPAN>

JavaScript:

NL=IdTest.childNodes;  //IdTest の子ノード リストを得る。
	//=[object]:[object NodeList]
	//0=[object]:[object Text]
	//1=[object]:[object HTMLElement]
	//2=[object]:[object Text]
	//entries=[function]:function entries() { [native code] }
	//…
D=NL[0].splitText(10);  //0から数えて10番目で分離。
	//=[object]:[object Text]
	//wholeText=[string]:[SPAN要素。テキスト
	//assignedSlot=[object]:null
	//splitText=[function]:function splitText() { [native code] }
	//data=[string]:スト
	//…
DA=IdTest.childNodes;  //分離した結果の IdTest の子ノード リストを得る。
	//=[object]:[object NodeList]
	//0=[object]:[object Text]
	//1=[object]:[object Text]
	//2=[object]:[object HTMLElement]
	//3=[object]:[object Text]
	//entries=[function]:function entries() { [native code] }
	//…

テスト