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

问题描述

我有一个字符串，您可以像这样:

I have a string which you can is like:

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

Now, in this string, I do have an json object in which from back-end all the start and end offsets of string which I have to highlight.

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

Now, for highlighting I am using following logic:

$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.

Here content is the given string and start and end are the endoffsets of the highlighting string.

现在，在调用此代码时:

Now, while calling this:

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

这里考虑responseData是我在问题中提供的字符串.由此，我将调用Highlighthtml函数.

Here consider responseData is the string which I provided in the question. From this I am calling the highlighthtml function.

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

Here the problem is that I am replacing the string with the span tags. Now what happens in loop is that when first lets say in array first value to highlight is the printing and typesetting industry. . So, offsets of this I get from the backend. Now, it will highlight that by replacing with the spans.

现在，当在数组中获取第二个值时，假设a galley of type and scrambled it我得到了偏移量，但是当它进入高亮显示功能时，它并没有得到确切的字符串，因为我们只是通过添加跨度更改了该字符串，所以现在偏移更改为该字符串.因此，因此，我无法突出显示正确的词.

Now, when in array for second value, let's say a galley of type and scrambled it I get offsets but when it goes in highlight function then it is not getting the exact string because we have changed that string just by adding the span so now the offsets are changed for that string. So, because of this I am not able to highlight the proper words.

推荐答案

您可以使用反向循环来确保从头到尾进行替换，以确保元素的偏移量(未进动但未更改)在循环中.

You could go through you replacements from back to front by using a reversed loop to ensure the offsets of the elements, which aren't precessed yet aren't changed in the loop.

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

I added the sorting method as well, if you aren't sure if your data is in the correct order.

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

这篇关于使用子字符串方法突出显示字符串中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！