我有一个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>
。但是当从剪贴板等粘贴东西时,这太痛苦了。我还想到找到插入位置并在整个文本中来回移动以找到当前的单词和当前的句子并在旅途中应用类等等但是我有一种感觉会让打字体验变得迟钝而且容易被遗忘。
我的想法已经不多了。任何帮助将不胜感激。
谢谢。