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标签，因此高亮功能必须能够处理它。

这里有类似的问题，但是也有相同的问题（未解决） Text highlighting based on positions

所以也许我需要一个可以以某种方式基于文本内任何其他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);
}

这里是fiddle，显示突出显示。

此版本的限制：

如果要突出显示的字符串包含关闭或打开的HTML标记（因为.indexOf()不会在HTML中找到该字符串），

如何根据切片位置突出显示文本并优先使用innerHTML？

1 个答案: