Text.splitText(offset) breaks one Text node into two siblings at the given index (MDN). The original keeps the left half; the method returns the new right-half node.
Pass the required arguments shown below. Check return values and browser support before you rely on the result.
Call text.splitText. Start with this line.
splitText(offset)| Call | What it does |
|---|---|
splitText(offset) | Primary signature. |
text.splitText(...) | Call with the arguments your case needs. |
Built into the browser. Call splitText(...) on a Text node — no import required.
splitText(offset)| Parameter | Description |
|---|---|
| offset | Required. Index immediately before the break (UTF-16 units) |
| Return Value | Description |
|---|---|
| * | New Text with the right-hand characters |
Split "foobar" at offset 3.
const text = new Text("foobar");
const bar = text.splitText(3);
console.log(text.data); // foo
console.log(bar.data); // bar"foobar"."b".text.data becomes "foo".bar.data is "bar".With a parent, the returned node is inserted as the next sibling.
const p = document.createElement("p");
const foobar = new Text("foobar");
p.appendChild(foobar);
const bar = foobar.splitText(3);
console.log(p.childNodes.length); // 2
console.log(foobar.nextSibling === bar); // true
console.log(p.textContent); // foobar<p>.nextSibling points at the returned node.textContent is still "foobar".MDN pattern: place an element between the split parts.
const p = document.createElement("p");
p.appendChild(new Text("foobar"));
const bar = p.firstChild.splitText(3);
const u = document.createElement("u");
u.appendChild(new Text(" new content "));
p.insertBefore(u, bar);
console.log(p.innerHTML);
// foo<u> new content </u>bar<u> with its own text child.Splitting at the end returns an empty Text node.
const text = new Text("hi");
const empty = text.splitText(text.length);
console.log(text.data); // hi
console.log(empty.data); // ""
console.log(empty.length); // 0data === "".Offsets outside 0…length throw.
const text = new Text("abc");
try {
text.splitText(10);
} catch (e) {
console.log(e.name); // IndexSizeError
}
try {
text.splitText(-1);
} catch (e) {
console.log(e.name); // IndexSizeError
}0 through length inclusive.IndexSizeError.IndexSizeError.Text.splitText() is marked Baseline Widely available on MDN (since July 2015). DOM text API — not a Node.js built-in.
Split Text nodes across modern browsers. Match offset carefully; merge again with normalize().
Bottom line: Safe for production. Use splitText(offset) to break a Text node; call parent.normalize() to merge siblings again.
See which slot a Text node is assigned to.
9 people found this page helpful