Текст подсветка в Javascript

Question

У меня есть текст в следующем формате:

<div id="text"> 
    <div>Hello world</div> 
    <div>How are you</div> 
</div> 

Пользователь выбирает «ш» в мире:

Так я получаю выбор и может вставить продолжительность:

var selection = window.getSelection(); 
var startNode = $(selection.anchorNode.parentElement); 
var endNode = $(selection.focusNode.parentElement); 
var startIndex = startNode.index(); 
var endIndex = endNode.index(); 
var startOffset = selection.anchorOffset; 
var endOffset = selection.focusOffset; 

Результат:

<div id="test"> 
    <div>Hello <span class="id1">w</span>orld</div> 
    <div>How are you</div> 
</div> 

id1.startNode = 0 
id1.endNode = 0 
id1.startOffset = 6 
id1.endOffset = 7 

Пользователь теперь выбирает текст «d Ho». Вот как это должно выглядеть следующим образом:

<div id="test"> 
    <div>Hello <span class="id1">w</span>orl<span class="id2">d</span></div> 
    <div><span class="id2">Ho</span>w are you</div> 
</div> 

id2.startNode = 0 
id2.endNode = 1 
id2.startOffset = 9 
id2.endOffset = 2 

Но используя метод из, прежде чем selection.anchorOffset дает мне указательный относительно новых созданных текстовых узлов, которые теперь «Hello», «ш» и «Всемирная», что означает, что я получить индекс 3 вместо 10.

Я использую следующий код, чтобы получить смещение, которое было создано:

var offs = 0; 
if(startNode.context.innerHTML.length > startNode.context.innerText.length) { 
    var n = startNode.context.childNodes; 
    for (var i = 0; i < n.length; i++) { 
     if(n[i].textContent === selection.anchorNode.textContent) { 
      break; 
     } 
     else { 
      offs += n[i].textContent.length; 
     } 
    } 
} 
console.log(offs); 

теперь я могу добавить смещение на начало и конец, но такого рода перерывы, когда выбор проходит по различным узлам или содержит выбор внутри Это. Я также не знаю, как создать пролеты с этими смещениями. Есть также способ для многих случаев, которые я должен учитывать как startNode === endNode, или если выбор содержит полный или частично диапазон.

Есть ли общие подходы или рамки для таких вещей? Я бы скорее просто работал с чистыми текстовыми индексами вместо html-тегов внутри и позволял чему-то другому обрабатывать правильное форматирование.

Answer 1

В связи с риском саморекламы, моя библиотека Rangy имеет Class Applier module специально для этого.