Javascript dom range.setStart/setEnd

我试图在这把小提琴中只加粗文本

hel

，但它似乎不起作用，我做错了什么

var range=document.createRange（）；
var root_node=document.getElementById（“测试”）；
range.setStart（根节点，0）；
range.setEnd（根节点，3）；
var newNode=document.createElement（“b”）；
range.surroundContents（newNode）

h
ello
明白了

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);

在所有的文档中，他们都引用了“Child”。。。这就解决了这个问题。对于您的小提琴，它将包裹字母“h”和两个
和
标签。把它们拿出来，hel变粗

更新：

显然，空白会引起问题

HTML

试验

在这里工作

参考资料
您需要可视化
元素的DOM结构。它包含三个子项：

仅包含空白的文本节点

元素，其中包含一个值为
h
的文本节点

具有值
ello
的文本节点

因此，您的范围必须从
元素开始，并在两个
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);

var range=document.createRange（）；
var root_node=document.getElementById（“测试”）；
//从“”元素开始。
range.setStart（根节点，1）；
//在两个'l'之间的'ello'文本节点中结束。
range.setEnd（root_node.childNodes[2]，2）；
var newNode=document.createElement（“b”）；
range.surroundContents（newNode）；

这里有一个。
目前无法到达JSFIDLE；当它回来时，我会创建一个工作副本。在适当的位置。。。希望有帮助。它有帮助，但在这种情况下，
h
ello
？