Как выделить текст на основе позиций срезов и превалировать innerHTML?

Question

Я хочу выделить текст в HTML-элемент на основе начальной и конечной позиции простого текста (без HTML).

Например, если у нас есть предложение "Привет, как дела?" и я хотел выделить слово «Hello», startPos 0 и endPos 5. Это работает нормально в моем коде для # text1.

<div id="segment">
  <div id="text1">Hello, <b>how</b> are you?</div>
  <div id="text2"><b>Hello</b>, how are you?</div>
</div>

var text1 = document.querySelector('#text1').innerHTML;
document.querySelector('#text1').innerHTML = highlightLetters(text1, 0,5);

function highlightLetters(segmentHTML, startPos, endPos) {
   return "<span style='background-color:pink;'>" + 
   segmentHTML.slice(startPos, endPos) + "</span>" + 
   segmentHTML.slice(endPos);
}

Проблема видна в # text2, где слово Hello заключено в теги html . Запуск highlightLetters () обернет область выделения даже между тегами html.

Ожидаемый результат после запуска функции выделения на # text2 должен выглядеть следующим образом:

<div id="text2"><span style='background-color:pink;'><b>Hello</b></span>, how are you?</div>

https://jsfiddle.net/mwedL6to/1/

Примечания:

• Мои начальные и конечные позиции выделены из внешнего API проверки орфографии.
• # text1 или # text2 могут содержать действительно случайные html-теги, поэтому функция подсветки должна иметь с ней дело.

похожая проблема здесь, но та же проблема есть и там (нерешена) Подсветка текста по позициям

Так что, возможно, мне нужно решение, которое каким-то образом вычислит мои новые startPos и ​​endPos на основе каких-либо дополнительных HTML-тегов внутри текста?

Answer 1

Если задача состоит в выделении отдельных слов , вы можете комбинировать .innerHTML и .innerText в комбинации для достижения требуемой функциональности. Сначала вы должны извлечь слово для выделения, используя только текст. Затем вы ищете положение слова в HTML-версии, чтобы найти его местоположение. Теперь просто поменяйте местами эту часть строки.

Код:

var html2 = document.querySelector('#text2').innerHTML;
var text2 = document.querySelector('#text2').innerText;
document.querySelector('#text2').innerHTML = highlightLetters(html2, text2, 0,5);

function highlightLetters(segmentHTML, text, startPos, endPos) {
   var highlightText= text.slice(startPos, endPos);
   var textPosition= segmentHTML.indexOf(highlightText);
   var textLength = endPos - startPos;

   return segmentHTML.slice(0, textPosition) + 
     "<span style='background-color:pink;'>" + 
     segmentHTML.slice(textPosition, textPosition + textLength) + "</span>" + 
     segmentHTML.slice(textPosition + textLength);
}

Вот скрипка , показывающая выделение.

Ограничения этой версии:

• не будет работать, если подсвечиваемая строка содержит закрывающий или открывающий тег HTML (так как .indexOf() не найдет строку в HTML)