我在一个简单的工作（我认为），字处理器。 它使用CONTENTEDITABLE。 我有我想总是会突出显示单词的列表。
<article contenteditable="true" class="content">
<p>Once upon a time, there were a couple of paragraphs. Some things were <b>bold</b>, and other things were <i>italic.</i></p>
<p>Then down here there was the word highlight. It should have a different color background.</p>
</article>
所以基本上我需要的是一种方式来包装一个字<span>标记。 这已被证明比我预期的更困难。
这是我第一次尝试：
var text = document.querySelector('article.content').innerHTML
start = text.indexOf("highlight"),
end = start + "highlight".length;
text = text.splice(end, 0, "</span>");
text = text.splice(start, 0, "<span>");
document.querySelector('article.content').innerHTML = text;
它采用了splice找到方法在这里 。
它不正是我需要做的，用一个大问题：将光标移动得到。 因为所有的文本被替换，光标失去它的地方，这是不是一个文本编辑器是一件好事。
我已经使用也尝试了几次document.createRange ，但问题是，虽然给出了一系列的起点和终点仅包括可见字符， text.indexOf("highlight")给出了包括标签和这样的指标。
这我不知道如何执行一些想法：
- 弄清楚光标的开始位置，并使用上面的代码后，再次将它放在这里
- 查找指数之间的差异
createRange和indexOf - 也许有已经与这种功能，我只是无法找到一个图书馆
谢谢您的帮助！
