У меня есть 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-м предложении, само это слово и 2-е предложение должны иметь выделение и т. Д. Под выделением я подразумеваю, что текущее предложение имеет светлый цвет фона, и текущее слово имеет более заметный цвет фона.
Какие-либо методы для достижения этой цели? Я попытался разделить предложения на <span class="sentence">..</span> и слова внутри каждого предложения на <span class="word">..</span>. Но это слишком большая боль при вставке чего-либо из буфера обмена и т. Д. Я также подумал о том, чтобы найти позицию каретки и перемещаться по всему тексту, чтобы найти текущее слово и текущее предложение, а также применять классы на ходу и т. Д., Но я есть чувство, которое сделает процесс набора текста медленным и довольно легко забываемым.
У меня заканчиваются идеи. Любая помощь будет принята с благодарностью.
Спасибо.