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

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


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

这里的内容是给定的字符串，而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我得到了偏移量，但是当它进入高亮函数时，它并没有获得确切的字符串，因为我们只是通过添加跨度更改了该字符串，所以现在偏移量已更改为该字符串。因此，因此，我无法突出显示正确的词。

最佳答案

您可以使用反向循环从头到尾进行替换操作，以确保元素的偏移量（未进动但在循环中未更改）。

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

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

关于javascript - 使用子字符串方法突出显示字符串中的文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49445239/