dom range.setStart / setEnd

Question

我试图在这个小提琴http://jsfiddle.net/yarkpakv/ 中只加粗文本hel，但它似乎不起作用，我做错了什么？？？

var range = document.createRange();
var root_node = document.getElementById("test");

range.setStart(root_node,0);
range.setEnd(root_node,3);

var newNode = document.createElement("b");

range.surroundContents(newNode);

<div id="test">
    <p>h</p>ello    
</div>

Answer 1

您需要可视化 <div id="test"> 元素的 DOM 结构。它包含三个孩子：

1. 仅包含空格的文本节点。

2. <p> 元素包含一个值为h 的文本节点。

3. 具有值ello 的文本节点。

因此，您的范围必须以 <p> 元素开始，并在两个 l 字符之间的 ello 文本节点结束。因此：

var range = document.createRange();
var root_node = document.getElementById("test");

// Start at the `<p>` element.
range.setStart(root_node, 1); 

// End in the `ello` text node, between the two `l`s.
range.setEnd(root_node.childNodes[2], 2); 

var newNode = document.createElement("b");

range.surroundContents(newNode);

这是fiddle。

Answer 2

知道了……

var range = document.createRange();
var root_node = document.getElementById("test");

range.setStart(root_node.firstChild,0);
range.setEnd(root_node.firstChild,3);

var newNode = document.createElement("b");

range.surroundContents(newNode);

在所有文档中，他们都引用了“孩子”……这解决了这个问题。对于您的 Fiddle，它将包装字母“h”和两个 <p> 和 </p> 标签。把它们拿出来，hel 变成粗体。

更新：

显然，空格会导致问题...

HTML ...

测试

在这里工作... jsFiddle

参考... HERE