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.
Text.splitText()
方法可以根据指定的偏移量将一个 Text
节点分割成前后两个独立的兄弟节点。
如果指定的偏移量刚好等于原文本节点所包含字符串的长度,则返回一个内容为空的文本节点。
分割后的文本节点还可以使用Node.normalize
方法来合并。
语法
js
newNode = textNode.splitText(offset)
参数
offset
-
在中断文本节点前的索引。
返回值
返回一个新创建的 Text
节点,该节点包含了指定偏移量之后的文本。
异常
- INDEX_SIZE_ERR
-
如果指定的偏移量小于 0 或者大于原文本节点中所包含字符串的长度,则抛出这个异常。
- NO_MODIFICATION_ALLOWED_ERR
-
如果,原文本节点只读,则抛出这个异常。
示例
下面的例子中,一个 <p>
元素所包含的文本节点将会被分割成两个文本节点,然后在这两个节点中间插入一个 <span>
元素。
HTML
html
<p id="p">foobar</p>
JavaScript
js
const p = document.getElementById("p");
// 将 <p> 的内容读取为一个文本节点
const foobar = p.firstChild;
// 将原来的文本节点分割成为内容分别为 foo 和 bar 的两个文本节点
const bar = foobar.splitText(3);
// 创建一个包含了内容为 ' new content ' 的文本节点的 <u> 元素
const u = document.createElement("u");
u.appendChild(document.createTextNode(" new content "));
// 将 <u> 元素插入到后一个文本节点 'bar' 的前面
p.insertBefore(u, bar);
// 现在,HTML 结构就变成了 <p id="p">foo <span>span contents</span> bar</p>
结果
规范
Specification |
---|
DOM Standard # ref-for-dom-text-splittext① |
浏览器兼容性
BCD tables only load in the browser
参见
- 所属的接口:
Text
。 - 相反的方法:
Node.normalize
。