The Text.splitText()
method 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
newNode = textNode.splitText(offset)
Parameters
offset
- The index immediately before which to break the text node.
Return value
Returns a newly created Text
node that contains the text after the specified offset point.
Exceptions thrown
A DOMException
with a value of INDEX_SIZE_ERR
is thrown if the specified offset is negative or is greater than the number of 16-bit units in the node's text; a DOMException
with a value of NO_MODIFICATION_ALLOWED_ERR
is 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>
JavaScript
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>
Result
Specifications
Specification | Status | Comment |
---|---|---|
DOMThe definition of 'Text.splitText' in that specification. | Living Standard | No change from Document Object Model (DOM) Level 3 Core Specification. |
Document Object Model (DOM) Level 3 Core SpecificationThe definition of 'Text.splitText' in that specification. | Obsolete | No change from Document Object Model (DOM) Level 2 Core Specification. |
Document Object Model (DOM) Level 2 Core SpecificationThe definition of 'Text.splitText' in that specification. | Obsolete | No change from Document Object Model (DOM) Level 1 Specification. |
Document Object Model (DOM) Level 1 SpecificationThe definition of 'Text.splitText' in that specification. | Obsolete | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
splitText
|
Chrome Full support 1 Full support 1 Notes' Before Chrome 30, the |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support Yes |
Opera Full support Yes Full support Yes Notes' Before Opera 17, the |
Safari Full support Yes Full support Yes Notes' The |
WebView Android Full support Yes Full support Yes Notes' Before version 4.4, the |
Chrome Android Full support 18 Full support 18 Notes' Before Chrome 30, the |
Firefox Android
Full support 4 |
Opera Android Full support Yes Full support Yes Notes' Before Opera 17, the |
Safari iOS Full support Yes Full support Yes Notes' The |
Samsung Internet Android Full support 1.0 Full support 1.0 Notes' Before Samsung Internet 2.0, the |
Legend
- Full support
- Full support
- See implementation notes.'
- See implementation notes.
See also
- The
Text
interface it belongs to. - The opposite method:
Node.normalize
.
Text.splitText() by Mozilla Contributors is licensed under CC-BY-SA 2.5.