内部文本元素按字符位置排列

Question

我正在尝试根据给定的起始偏移量和长度将子元素添加到另一个元素。例如：

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

如果给定的起始偏移量为6个字符，长度为20个字符，我想用span元素内部包装父元素（p）。

<p>Lorem <span>ipsum dolor sit amet</span>,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.

有什么想法吗？

Answer 1

您有一个文本节点，可以使用splitText进行拆分：http://jsfiddle.net/VNY2k/。

如果您有文本节点node和拆分索引n，则node.splitText(n)将修改 node仅包含node }文本到该索引，返回一个新的文本节点与文本的其余部分。

var node1 = ​$("p").contents()[0];  // whole text node
var node2 = node1.splitText(6);    // right of splitting point #1
var node3 = node2.splitText(20);   // right of splitting point #2
$(node2).wrap("<span>");           // node2 will contain the text
                                   // you want to wrap: right of #1
                                   // and left of #2

请注意，您无法编辑文本节点本身以包含<span>。文本节点实际上只包含文本，而元素（例如<span>）本身就是一个节点。因此，您需要拆分文本节点。