如何根据切片位置突出显示文本并优先使用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标签，因此Highlight功能必须能够处理它。

这里有类似的问题，但也存在相同的问题（未解决） 基于位置的文本突出显示

因此，也许我需要一个解决方案，该解决方案将基于文本内的任何其他html标签以某种方式计算我的新startPos和endPos？

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) {&nbsp; &nbsp;var highlightText= text.slice(startPos, endPos);&nbsp; &nbsp;var textPosition= segmentHTML.indexOf(highlightText);&nbsp; &nbsp;var textLength = endPos - startPos;&nbsp; &nbsp;return segmentHTML.slice(0, textPosition) +&nbsp;&nbsp; &nbsp; &nbsp;"<span style='background-color:pink;'>" +&nbsp;&nbsp; &nbsp; &nbsp;segmentHTML.slice(textPosition, textPosition + textLength) + "</span>" +&nbsp;&nbsp; &nbsp; &nbsp;segmentHTML.slice(textPosition + textLength);}这是显示重点的小提琴。此版本的局限性：如果要突出显示的字符串包含关闭或打开HTML标记，.indexOf()则将不起作用（因为在HTML中找不到该字符串）