Javascript 文本高亮显示-内容可编辑

我一直在试验javascript中的contenteditable字段。正如你可能猜到的，我正在尝试构建一个所见即所得编辑器。将我在堆栈溢出上找到的答案拼凑在一起，我成功地构建了这个。测试用例的工作是以手动和编程的方式突出显示文本并为其壮胆。只有一个小问题。如果单击“粗体”按钮一次，子字符串将高亮显示并随后变为粗体。但是，如果再次单击，将提示错误：

"Error: Failed to execute 'setStart' on 'Range': There is no child at offset 12.
at Error (native)
at HTMLInputElement.<anonymous> (http://run.jsbin.io/runner:15:13)
at HTMLDocument.oa (http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js:18:373)
at HTMLDocument.c.event.handle (http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js:55:307)
at HTMLDocument.j.handle.o (http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js:49:363)"

“错误：无法对“范围”执行“setStart”：偏移量12处没有子项。
错误（本机）
在HTMLInputElement(http://run.jsbin.io/runner:15:13)
在HTMLDocument.oa(http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js:18:373)
在HTMLDocument.c.event.handle(http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js:55:307)
在HTMLDocument.j.handle.o(http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js:49:363)"

第一次按下按钮后，表示所见即所得编辑器内容的文本字段包含以下内容：

Some text he<span style="font-weight: bold;">re for y</span>ou to bold

此处有一些文本供您加粗

在测试时（通过输出第一个孩子的长度），我的假设是，它只是试图突出第一部分——“他写的一些文本。”我相信，进一步的测试，包括对陈述进行注释以鼓励选择，证实了这一点。事实上，当这被注释掉时，编辑器工作得很好

我在Google和Stack Exchange上搜索，但部分原因是我不知道为什么会发生这种情况，所以我什么也找不到

---

因此，我的问题是-为什么会出现此错误，我可以做些什么来避免它，并实现以编程方式突出显示和体现此文本的目标？

参考链接的演示代码，您正在使用此代码设置范围：

range.setStart(mainDiv.firstChild, 12);
range.setEnd(mainDiv.firstChild, 20);

但是

mainDiv.firstChild

是mainDiv的第一个文本节点。在初始运行时，该文本节点是

Some text here for you to bold

在第一次运行之后，文本节点被分为三部分：一部分在粗体之前，一部分在粗体内部，另一部分在粗体之后

Some text he<span style="font-weight: bold;">re for y</span>ou to bold

因此，对

range.setEnd（mainDiv.firstChild，20）

的调用超出范围

---

为了避免这种情况，不要硬编码对setRange的调用。相反，直接从用户选择（一种非常常见的情况）或在调用前检查实际DOM后获取范围。

为什么要给出

range.setStart

和

range.setEnd

实心数字偏移？只需手动高亮显示由这些值包围的部分即可。仅出于实验/学习原因。setEnd不是问题，setStart是问题。

Some text he