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

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

这里的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. 。所以，我从后端得到的抵消。现在，它将通过替换为 span 来突出显示。

现在，当在数组中获取第二个值时，假设 一个类型的厨房并将其打乱 我得到了偏移量，但是当它进入高亮功能时，它没有得到准确的字符串，因为我们已经改变了该字符串只需添加跨度，因此现在该字符串的偏移量已更改。因此，因此我无法突出显示正确的词。

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