使用子字符串方法突出显示字符串中的文本 [英] Highlighting a text from string by using sub-string method

问题描述

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

I have a string which you can is like:

Lorem Ipsum只是印刷和排版行业的伪文本.自1500年代以来，Lorem Ipsum一直是行业的标准伪文本，当时一位不知名的打印机拿起一个厨房，将其打乱成一本样本书.它不仅生存了五个世纪，而且还经历了电子排版的飞跃，基本上保持不变

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对象，在该对象中，我必须突出显示从后端开始的所有字符串的起始和结束偏移量.

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

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