Javascript 将一个字符串重叠到另一个字符串突出显示问题

我有一根绳子，它可以像

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged

现在，在这里我有一个json，它有我想要突出显示的字符串开始和结束偏移量。现在，我使用的逻辑是这样的--

---

但这里也有同样的问题，比如如果一件事情的某个部分存在于另一件事情中，那么它就会产生一些问题。有人能帮我吗？

为了避免跟踪索引的移动，我建议您单独存储输出字符串，或者像下面那样存储在数组中：

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变； const highlights=[{startOffset:2，endOffset:16}，{startOffset:68，endOffset:75}，{startOffset:80，endOffset:92}]； 常量结果=[]； 设currentIndex=0； 亮点.forEach（h=>{ 结果.推送（str.substring（currentIndex，h.startOffset））； push（`str.substring（h.startOffset，h.endOffset）}`）； currentIndex=h.endOffset； }); 结果.push（str.substring（currentIndex，str.length））； document.getElementById（'root'）.innerHTML=result.join（''）

.mark{
颜色：红色；
}

---

检查这个让我检查这个。你能再详细一点吗？事实上，我必须显示用户突出显示的部分以及整个给定的字符串，class=“mark”这个类名每次都会有所不同。这不像我必须显示带有突出显示的文本的完整文档，而不是只突出显示的字符串

$scope.highlightHTML = function(content, startoffset, endoffset) {
  var className = 'mark';
  console.log(content.substring(startoffset, endoffset));
  return content.replace(content.substring(startoffset, endoffset), '<span class="' + className + '">$&</span>');
}
//Only if you don't know if they are in the correct order:
jsonDataArray = jsonDataArray.sort((a, b) => a.startOffset - b.startOffset);

for (var i = jsonDataArray.length - 1; i >= 0; i--) {
  const item = jsonDataArray[i];
  responseData = $scope.highlightHTML(responseData, item.startOffset, item.endOffset, item.color);
};
$rootScope.data.htmlDocument = responseData.replace(/\n/g, "</br>");

var length = '<span class="mark"></span>'.length:
jsonDataArray.forEach(function(item, index) {
    responseData = $scope.highlightHTML(responseData, item.startOffset + (index * length), item.endOffset + (index * length), item.color);
});
$rootScope.data.htmlDocument = responseData.replace(/\n/g, "</br>");