內部包裝文本元素的字符位置

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個字符的長度，我想與跨度元件內包的父元素（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>）本身就是一個節點。因此你需要分割文本節點。