使用子字符串方法突出显示字符串中的文本

I have a string which you can is like:

我有一个你可以喜欢的字符串：

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

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一台未知的打印机采用了类型的厨房并将其拼凑成一本类型的样本。它不仅存在了五个世纪，而且还延续了电子排版，基本保持不变

Now, in this string, I do have an json object in which from back-end all the start and end offsets of string which I have to highlight.

现在，在这个字符串中，我有一个json对象，其中从后端开始，我必须突出显示字符串的所有起始和结束偏移量。

Now, for highlighting I am using following logic:

现在，为突出显示我使用以下逻辑：

$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>');
}

Here content is the given string and start and end are the endoffsets of the highlighting string.

这里的内容是给定的字符串，start和end是突出显示字符串的endoffsets。

Now, while calling this:

现在，在调用此时：

jsonDataArray.forEach(function(item) {
  responseData = $scope.highlightHTML(responseData, item.startOffset, item.endOffset, item.color);
});
$rootScope.data.htmlDocument = responseData.replace(/\n/g, "</br>");

Here consider responseData is the string which I provided in the question. From this I am calling the highlighthtml function.

这里考虑responseData是我在问题中提供的字符串。从这里我调用highlighthtml函数。

Here the problem is that I am replacing the string with the span tags. Now what happens in loop is that when first lets say in array first value to highlight is the printing and typesetting industry. . So, offsets of this I get from the backend. Now, it will highlight that by replacing with the spans.

这里的问题是我用span标签替换字符串。现在循环中发生的事情是，当第一个让我们说在数组中第一个要突出的值是打印和排版行业。。所以，我从后端得到的补偿。现在，它将突出显示通过替换跨度。

Now, when in array for second value, let's say a galley of type and scrambled it I get offsets but when it goes in highlight function then it is not getting the exact string because we have changed that string just by adding the span so now the offsets are changed for that string. So, because of this I am not able to highlight the proper words.

现在，当在数组中获得第二个值时，让我们说一个类型的厨房并加扰它我得到抵消但是当它进入高亮函数然后它没有得到确切的字符串，因为我们只是通过添加跨度来改变该字符串所以现在该字符串的偏移量已更改。所以，正因为如此，我无法突出正确的话语。

2 个解决方案

#1

You could go through you replacements from back to front by using a reversed loop to ensure the offsets of the elements, which aren't precessed yet aren't changed in the loop.

您可以通过使用反向循环从后到前进行替换，以确保元素的偏移，这些元素在循环中不会被删除但不会更改。

I added the sorting method as well, if you aren't sure if your data is in the correct order.

如果您不确定数据的顺序是否正确，我还添加了排序方法。

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

#2

You can update the offsets by adding the extra length for the spans text added, in your loop like this:

您可以通过在循环中添加添加的跨度文本的额外长度来更新偏移量，如下所示：

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

So here in each iteration, you will be incrementing both offsets with (index *length), so for the first iteration you won't update them because indexis 0, then you will increment it by 1*length and so on.

因此，在每次迭代中，您将使用（索引*长度）递增两个偏移量，因此对于第一次迭代，您将不会更新它们因为indexis为0，然后您将它增加1 *长度，依此类推。

#1