Text.splitText()

Text.splitText() メソッドは、 Text ノードを指定したオフセットで二つに分割し、両方のノードを兄弟としてツリーの中に保持します。

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

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

newNode = textNode.splitText(offset)

offset

テキストノードを分割する直前の位置。

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

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

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

<p>foobar</p>

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>

このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

• 所属先の Text インターフェイス
• 逆のメソッド: Node.normalize