Вставить текст в текст в Javascript

Question

Используя the following demo, я пытаюсь выделить некоторые слова, используя тег <span> между некоторым текстом.

Это работает правильно для одного, однако, если я попытаюсь добавить какие-либо дополнительные элементы в абзац, он либо выделит все это, либо очистит предыдущую подсветку перед добавлением нового.

Как я могу вставить несколько бликов в один абзац?

Edit обновил ссылку, чтобы попытаться показать, как я добавляю второй блик ... Это не похоже на работу точно так же, как у меня есть

Answer 1

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

// helper function to walk DOM-tree and find end-points 
// basically, converts the index of a character in terms of a HTML element 
// into it's offset in a #text Node 
function getTextOffset(parent, index) { 
    if (parent.nodeType === 3) 
     return {'node': parent, 'offset': index}; 
    var e = parent.childNodes[0], i = index, prev = null; 
    while (1) { 
     while (e.nodeType !== 3 || e === prev) 
      if (e.childNodes && e.childNodes.length) 
       e = e.childNodes[0]; 
      else if (e.nextSibling) 
       e = e.nextSibling; 
      else { 
       while (!e.nextSibling) 
        if (!e.parentNode || e.parentNode === parent) 
         throw RangeError('Index out of range'); 
        else 
         e = e.parentNode; 
       e = e.nextSibling; 
      } 
     if (e.data.length < i) 
      i -= e.data.length, prev = e; 
     else 
      return {'node': e, 'offset': i}; 
    } 
} 

И теперь все, что вам нужно написать функцию, чтобы создать Range и его формат ..

function highlight(node, start, end) { 
    var r, o, hi; 
    // find text 
    r = document.createRange(); 
    o = getTextOffset(node, start); // find start point 
    r.setStart(o.node, o.offset); // set start in range 
    o = getTextOffset(node, end); // find end point 
    r.setEnd(o.node, o.offset);  // set end in range 
    // now format 
    hi = document.createElement('span'); 
    hi.style.background = 'yellow'; 
    hi.appendChild(r.extractContents()); 
    r.insertNode(hi); 
    // cleanup 
    r.detach(); 
} 

highlight(containerEl, 3, 5); // invoke 

DEMO