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

您有一个文本节点，可以使用 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> )本身就是一个节点。因此，您需要拆分文本节点。