Как навесить JS-событие/CSS-стили на N-ое слово в текстовой node без изменения DOM?

Question

[ChernovGV]

Пишу небольшой плагин для браузера, нужно подсвечивать и давать функционал некоторым словам в теле страницы.

Сейчас оборачиваю нужные слова своим тегом, и вроде как все хорошо, но на некоторых сайтах встречаются проблемы.

Хочу узнать, есть ли какой-то другой способ решить эту задачу так, чтобы не вносить изменения в DOM?
Полагаю, что можно сохранять пути до текстовых нод, и запоминать номера первого и последнего символа необходимого слова. Но как навесить стили на этот участок ноды, и повесить события ума не приложу. Может есть какой-то способ?

Comments

[Шохрух Шаймардонов]

Ну без изменений никак не обойтись. Все стили затрагивают дом, что вызывает перерисовку. Так что любой ваш алгоритм не обойдется без изменения дома. Ищите самый лкгковесный. Бенчмарки гляньте, какой вариант менее затратный

Answer 1

[Aetae]

Как обычно - абсолютный div поверх и перепроверять позицию на каждый чих.

Comments

[ChernovGV]

Ох, это будет не приемлемо дорого...Но спасибо за идею=)

[ChernovGV]

Aetae, а если только JS событие? Расширение от LinguaLeo не меняет дом, но понимает по какому слову дважды кликнули... Код у плагина сжат, разобраться не выходит(

[Aetae]

ChernovGV, без раскрашивания кликнутое слово легко получается из window.getSelection().

[ChernovGV]

Aetae, это в несколько раз ускорит общую работу и снизит проблемы т.к. есть еще куча чего которое визуально не меняется, но требует функционала...Спасибо!