HTML DOM splitText() 方法

splitText() 方法可以将文本节点分成两个新节点，从指定的偏移量处分割。

语法

nodeObject.splitText(offset)

参数

• offset：必需。规定在哪个位置开始分割文本节点。

返回值

该方法返回文本节点的新割裂出的节点对象。主要的节点属性与特性都可以通过该对象访问。

实例

以下实例演示了如何使用 splitText() 方法将文本节点分成两个新节点：

<div id="demo">This is some text</div>

<script>
    var textNode = document.getElementById("demo").firstChild;
    var otherNode = textNode.splitText(10);
    console.log(textNode.nodeValue); // "This is so"
    console.log(otherNode.nodeValue); // "me text"
</script>

在这个例子中，我们选择 demo 元素的 firstChild，即文本节点 This is some text。然后，我们使用 splitText() 方法在第 10 个字符处将该文本节点分成两个新节点。最后，我们在控制台输出第一个和第二个文本节点的值，以演示它们分割的结果。

细节事项

1. splitText() 方法只适用于文本节点类型，它将返回一个新的文本节点。
2. offset 值必须大于或等于 0，它也可以超出文本节点的长度，此时会将其分割成两个节点，其中第二个节点的值为空字符串。
3. 如果使用 splitText() 方法的节点不是文本节点，则会抛出 DOMException 异常，错误代码为：HIERARCHY_REQUEST_ERR(3)。
4. 在分割文本节点时，分割点前面的所有字符都归为原始文本节点，而分割点后面的所有字符都归为新创建的文本节点。
5. 分割后的第一个文本节点与之前被分割的文本节点具有相同的属性和特性。
6. 当使用 splitText() 方法分割文本节点时，DOM 树和文档的布局将被修改。

参考文献

• splitText() 方法 (by W3Schools)
• Document Object Model (DOM) (by Mozilla Developers Network)