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. ... 

は今、私は、単語（「サンプル」）とその文を強調したい（ '私はサンプル段落 '）。同様に、キャレットが2番目のセンテンスの単語 'sense'にある場合、その単語自体と2番目のセンテンスはハイライトなどを持ちます。ハイライト表示では、現在のセンテンスは明るい背景色を持ち、現在の単語がより顕著な背景色を持つようにします。

これを達成するための技術はありますか？文章を<span class="sentence">..</span>に、文中の単語を<span class="word">..</span>に分けてみました。しかし、それはあまりにもクリップボードなどからのものを貼り付けるときに痛みのあまりです。私はまた、現在の単語や現在の文を見つけるために、テキスト全体を前後にキャレットの位置とトラバースを考え、タイピングの経験が遅く、忘れられそうな感覚を持っています。

アイデアが不足しています。どんな助けでも大歓迎です。

ありがとうございます。

Answer 1

This jQueryプラグインは、ページ（またはDOM要素）の任意のパターンをハイライト表示します。そこから

が、それはonChangeイベントをフックし、現在のキャレット位置にテキストと一致するいくつかのファンキーな正規表現をすることの問題だ（キャレット位置、すなわちthis 1を決定するためのjQueryプラグインもあります）。