有什么方法可以在 contentEditable DIV 中突出显示当前单词和句子？答案

【问题标题】：Any way to highlight current word & sentence in a contentEditable DIV?有什么方法可以在 contentEditable DIV 中突出显示当前单词和句子？
【发布时间】：2011-12-17 09:06:02
【问题描述】：

我有一个contentEditable DIV（构建一种编辑器组件）。我正在寻找一种方法来突出显示用户正在输入的当前单词以及该单词所在的句子。例如，考虑以下段落：

I am a sample paragraph. I contain words that dont make much sense but are there just to fill the space. I can have only one caret at a time. ...

现在，如果插入符号位于第一句中的单词“sample”上，我想突出显示单词（'sample'）和那句话（'I am a sample paragraph.'）。同样，如果插入符号位于第二句中的单词“sense”上，则该单词本身和第二句要突出显示，依此类推。高亮是指当前句子具有浅色背景，并且当前单词具有更突出的背景颜色。

有什么技术可以做到这一点？我尝试将句子分成<span class="sentence">..</span>，将每个句子中的单词分成<span class="word">..</span>。但这在从剪贴板等粘贴内容时太痛苦了。我还考虑过查找插入符号的位置并在整个文本中来回遍历以找到当前单词和当前句子并在旅途中应用类等。但我有一种感觉会使打字体验变得迟缓而容易忘记。

我的想法已经不多了。任何帮助将不胜感激。

谢谢。

【问题讨论】：

我一直想在这方面做一些工作。我会回复你的。
我是你的 rangy lib 的超级粉丝。事实上，这是我目前工作的基础。事实上，我什至向这里的一些其他社区用户推荐了 rangy。非常高兴有您参与此次讨论。
@TimDown - 你有机会从事任何相关的工作吗？如果是这样，请分享信息。
我已经完成了一些工作，但随后陷入了光标位置的构成细节并停滞不前。我会尽快重新尝试。

标签： javascript jquery query-string contenteditable

【解决方案1】：

This jQuery 插件突出显示页面（或 DOM 元素）中的任何给定模式。

从那里，只需挂钩 onChange 事件并与当前插入符号位置的文本进行一些时髦的正则表达式匹配（还有用于确定插入符号位置的 jQuery 插件，即 this 之一）。

【讨论】：