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

Question

我有一个字符串，你可以这样：

Lorem Ipsum 只是印刷和排版行业的虚拟文本。自 1500 年代以来，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

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

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，然后您将增加它@9​​87654327@ 和以此类推。