Text: splitText() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

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

構文

js
newNode = textNode.splitText(offset)

引数

offset

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

返値

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

例外

IndexSizeError DOMException

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

NoModificationAllowedError DOMException

ノードが読取専用の場合に発生します。

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

html
<p>foobar</p>
js
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>

仕様書

Specification
DOM
# ref-for-dom-text-splittext①

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
splitText

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報