如何根据切片位置突出显示文本并流行innerHTML？答案

【问题标题】：How to highlight text based on slice positions and prevail innerHTML?如何根据切片位置突出显示文本并流行innerHTML？
【发布时间】：2019-05-10 12:32:42
【问题描述】：

我想根据纯文本（无 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？

【问题讨论】：

标签： javascript dom

【解决方案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 中找到该字符串），则将不起作用

【讨论】：