任何方式来突出显示当前单词和单词contentEditable DIV 中的句子？
我有一个 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. ...
现在，如果插入符号位于第一个句子中的“样本”一词上，我想突出显示该单词（“样本”）和该句子（“我是样本段落。”）。同样，如果插入符位于第二句中的单词“sense”上，则该单词本身和第二句将具有突出显示，依此类推。通过突出显示，我的意思是当前句子具有浅色背景颜色，并且当前单词有更突出的背景颜色。
有什么技术可以实现这一点吗？我尝试将句子分成 .. 并将每个句子中的单词分成 ..。但是，从剪贴板等粘贴内容时，这太痛苦了。我还考虑过找到插入符位置并来回遍历整个文本以找到当前单词和当前句子以及随时随地应用课程等。但是我有一种感觉会让打字体验变得迟缓且令人忘记。
我已经没有主意了。任何帮助将不胜感激。
谢谢。
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. ...
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.
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.
Thank You.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
此 jQuery 插件突出显示任何给定的模式在您的页面（或 DOM 元素）中。
从那里开始，只需挂钩 onChange 事件并执行一些与当前插入符位置的文本匹配的时髦正则表达式（还有用于确定插入符位置的 jQuery 插件，即 这个 一个）。
This jQuery plugin highlights any given pattern in your page (or DOM element).
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).