任何方式突出显示当前的单词& contentEditable DIV中的句子?

时间:2011-12-17 09:06:02

标签: javascript jquery query-string contenteditable

我有一个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')和该句子('我是一个示例段落'。)。类似地,如果插入符号在第二个句子中的'sense'一词上,那个词本身和第二个句子将有一个突出显示等等。通过突出显示,我的意思是当前句子具有浅色背景颜色,并且当前的词有更突出的背景色。

实现这一目标的任何技巧?我尝试将句子分成<span class="sentence">..</span>,将每个句子中的单词分成<span class="word">..</span>。但是当从剪贴板等粘贴东西时,这太痛苦了。我还想到找到插入位置并在整个文本中来回移动以找到当前的单词和当前的句子并在旅途中应用类等等但是我有一种感觉会让打字体验变得迟钝而且容易被遗忘。

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

谢谢。

1 个答案:

答案 0 :(得分:2)

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

从那里开始,只需要挂钩onChange事件并做一些与当前插入位置的文本匹配的时髦正则表达式(还有用于确定插入位置的jQuery插件,即this一个)