javascript - 按字符位置内换行文本元素

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

您有一个文本节点，您可以使用以下方法拆分它：http splitText: //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>）本身就是一个节点。因此，您需要拆分文本节点。