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

Question

我有一个 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> .但这在从剪贴板等粘贴内容时太痛苦了。我还考虑过找到插入符位置并在整个文本中来回遍历以查找当前单词和当前句子并在旅途中应用类(class)等。但我有一种感觉会让打字体验变得迟钝而且容易忘记。

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

谢谢。

Answer 1

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

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