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

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

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

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

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

$scope.highlightHTML = function(content, startoffset, endoffset) { var className = 'mark'; console.log(content.substring(startoffset, endoffset)); return content.replace(content.substring(startoffset, endoffset), '$&'); } 

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

现在，在调用此时：

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

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

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

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

Answer 1

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

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

 $scope.highlightHTML = function(content, startoffset, endoffset) { var className = 'mark'; console.log(content.substring(startoffset, endoffset)); return content.replace(content.substring(startoffset, endoffset), '$&'); } //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, ""); 

Answer 2

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

 var length = ''.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, ""); 

因此，在每次迭代中，您将使用(index *length)递增两个偏移量，因此对于第一次迭代，您将不会更新它们因为index为0 ，然后您将它增加1*length ，依此类推。