如何根据切片位置突出显示文本并优先使用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) {

   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中找不到该字符串）