任何方式突出显示当前的单词& contentEditable DIV中的句子？ [英] Any way to highlight current word & sentence in a contentEditable DIV?

问题描述

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

I have a contentEditable DIV (building a kind of editor component). I am looking for a way to highlight the current word the user is typing and the sentence that word is on. For example, consider the following paragraph:

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'一词上，那个词本身和第二个句子将有一个突出显示等等。通过突出显示，我的意思是当前句子具有浅色背景颜色，并且当前单词具有更突出的背景颜色。

Now if the caret is on the word 'sample' in the first sentence, i want to highlight the word ('sample') and that sentence ('I am a sample paragraph.'). Similarly if the caret is on the word 'sense' in the 2nd sentence, that word itself and the 2nd sentence are to have a highlight and so on.. By highlight, i mean the current sentence to have a light background color, and the current word to have a more prominent background color.

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

Any techniques to achieve this? I tried separating sentences into <span class="sentence">..</span> and words inside each sentence into <span class="word">..</span>. But that is just too much of a pain when pasting stuff from clipboard etc. I also thought about finding caret position and traversing back and forth through the whole text to find the current word and current sentence and applying classes on the go etc. but i have a feeling that will make the typing experience sluggish and rather forgettable.

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

I'm running out of ideas. Any help will be greatly appreciated.

谢谢。

推荐答案

这个 jQuery插件突出显示任何给定的模式在你的页面（或DOM元素）。

This jQuery plugin highlights any given pattern in your page (or DOM element).

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

From there, it's just a matter of hooking the onChange event and doing some funky regular expression matching with the text at the current caret position (there are also jQuery plugins for determining the caret position, namely this one).

这篇关于任何方式突出显示当前的单词& contentEditable DIV中的句子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！