Text: splitText() method

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.

See full compatibility

The splitText() method of the Text interface breaks the Text node into two nodes at the specified offset, keeping both nodes in the tree as siblings.

After the split, the current node contains all the content up to the specified offset point, and a newly created node of the same type contains the remaining text. The newly created node is returned to the caller. If the original node had a parent, the new node is inserted as the next sibling of the original node. If the offset is equal to the length of the original node, the newly created node has no data.

Separated text nodes can be concatenated using the Node.normalize() method.

Syntax

splitText(offset)

Parameters

offset: The index immediately before which to break the text node.

Return value

Returns the newly created Text node that contains the text after the specified offset point.

Exceptions

IndexSizeError DOMException: Thrown if the specified offset is negative or is greater than the number of 16-bit units in the node's text.
NoModificationAllowedError DOMException: Thrown if the node is read-only.

Example

In this example, the text of a <p> is split into two text nodes, and a <u> is inserted between them.

html

<p>foobar</p>

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

// Get contents of <p> as a text node
const foobar = p.firstChild;

// Split 'foobar' into two text nodes, 'foo' and 'bar',
// and save 'bar' as a const
const bar = foobar.splitText(3);

// Create a <u> element containing ' new content '
const u = document.createElement("u");
u.appendChild(document.createTextNode(" new content "));

// Add <u> before 'bar'
p.insertBefore(u, bar);

// The result is: <p>foo<u> new content </u>bar</p>

Specifications

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

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`splitText`	Chrome – Full support Chrome 1 (Release date: 2008-12-11) footnote footnote Before Chrome 30, the `offset` parameter was optional.	Edge – Full support Edge 12 (Release date: 2015-07-29) footnote Full support	Firefox – Full support Firefox 1 (Release date: 2004-11-09) footnote Full support	Opera – Full support Opera 12.1 (Release date: 2012-11-20) footnote footnote Before Opera 17, the `offset` parameter was optional.	Safari – Full support Safari 1 (Release date: 2003-06-23) footnote footnote The `offset` parameter is optional.	Chrome Android – Full support Chrome Android 18 (Release date: 2012-06-27) footnote footnote Before Chrome Android 30, the `offset` parameter was optional.	Firefox for Android – Full support Firefox for Android 4 (Release date: 2011-03-29) footnote Full support	Opera Android – Full support Opera Android 12.1 (Release date: 2012-10-09) footnote footnote Before Opera 17, the `offset` parameter was optional.	Safari on iOS – Full support Safari on iOS 1 (Release date: 2007-06-29) footnote footnote The `offset` parameter is optional.	Samsung Internet – Full support Samsung Internet 1 (Release date: 2013-04-27) footnote footnote Before Samsung Internet 2.0, the `offset` parameter was optional.	WebView Android – Full support WebView Android 1 (Release date: 2008-09-23) footnote footnote Before version 4.4, the `offset` parameter was optional.	WebView on iOS – Full support WebView on iOS 1 (Release date: 2007-06-29) footnote footnote The `offset` parameter is optional.

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

Full support: Full support
: See implementation notes.

Text: splitText() method

Legend