Question

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

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), '<span class="' + className + '">$&</span>');
}

此处content是给定的字符串，start和end是突出显示字符串的endoffsets。

现在，在调用它时：

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

这里考虑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), '<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>");

Answer 2

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

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

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

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

2 个答案: