Question

我正在研究一个简单的（我认为）文字处理器。它使用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;

它使用找到here的splice方法。

它完全符合我的需要，有一个大问题：光标移动了。因为所有文本都被替换了，所以光标会失去它的位置，这对文本编辑器来说不是一件好事。

我还尝试使用document.createRange几次，但问题是虽然给定范围的起点和终点只包含可见字符，但text.indexOf("highlight")给出的索引包括标签等。

我不确定如何执行的一些想法：

找出光标开始的位置，并在使用上面的代码
查找createRange和indexOf
也许已经有一个具有这种功能的图书馆我无法找到

感谢您的帮助！

Answer 1

首先，我建议不要通过操纵innerHTML来做到这一点。它效率低且容易出错（想想内容包含一个＆＃34;突出显示＆＃34;类的元素的情况）。以下是使用DOM方法直接操作文本节点的示例：

https://stackoverflow.com/a/10618517/96100

维持插入位置可以通过多种方式实现。您可以使用character offset-based approach，由于没有考虑<br>隐含的换行符和块元素而有一些缺点，但相对简单。或者，您可以使用我的Rangy库的selection save and restore module，这对您的需求可能过度，但可以使用相同的方法。

以下是使用第一种方法的示例：

http://jsbin.com/suwogaha/1

无需移动光标即可将标签放置在特定文本内

1 个答案: