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

Question

我有一个字符串，可以像

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，其中包含我想要突出显示的字符串开始和结束偏移量。现在，我使用的逻辑是这样的--

$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>");

所以，这里我试图从数组的最后一个值突出显示，这样偏移量就不会改变。现在，这里有一个问题，那就是重叠。现在，让我们说，

在本文中，我通过添加一些 span class 突出显示了Lorem Ipsum has been。现在，对于下一次交互，如果 startoffset 和 endoffset 有一个字符串，它不过是 Ipsum has been the industry's standard 。现在， Here 会有这两个重叠，然后突出显示是重叠的。因此，我无法获得确切的文本，因为偏移量发生了变化。

现在，我应用的另一个解决方案是 -

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>");

但这里也存在同样的问题，例如，如果一件事的某些部分存在于另一件事中，则会产生一些问题。有人可以帮我解决这个问题吗？

Answer 1

为避免跟踪您的索引移动，我建议您将输出字符串单独存储或存储在一个数组中，如下所示：

const str = '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';

const highlights = [{startOffset: 2, endOffset: 16}, {startOffset: 68, endOffset: 75}, {startOffset: 80, endOffset: 92}];

const result = [];
let currentIndex = 0;

highlights.forEach(h => {
  result.push(str.substring(currentIndex, h.startOffset));
  result.push(`<span class="mark">${str.substring(h.startOffset, h.endOffset)}</span>`);
  currentIndex = h.endOffset;
});

result.push(str.substring(currentIndex, str.length));

document.getElementById('root').innerHTML = result.join('');

.mark {
  color: red;
}

<div id="root"></div>