将一个字符串重叠到另一个字符串突出显示问题 [英] Overlapping of one string into another string highlighting issue

问题描述

我有一个字符串，可以像

I have a string which can be like

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 I have an json which has the string start and end offset which I want to highlight. Now, logic I am using is like this --

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

所以，这里我试图从数组的最后一个值突出显示，以便偏移量不会改变。现在，在这有一个问题，就像重叠。现在，让我们说，

So, Here I am trying to highlight from the last value of the array so that the offset will not be changed. Now, In this there is one problem and that is like the overlapping .Now,Lets say ,

在本文中我突出显示 Lorem Ipsum已经已经添加了一些span类。现在，对于下一次交互，如果startoffset和endoffset的字符串只是，则Ipsum是业界的标准。现在，这两个将重叠，然后突出显示重叠。因此，我无法获得确切的文本，因为偏移量会发生变化。

In this text I have highlighted Lorem Ipsum has been by adding some span class . Now, for the next interation, if the startoffset and endoffset has a string which is nothing but Ipsum has been the industry's standard . Now, Here there will be overlapping of these two and then the highlighting is overlapping . So, I am not able get the exact text, because of that the offsets gets changed.

现在，我应用的另一种解决方案就像 -

Now, Another solution which I applied was like -

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

但是这里也存在同样的问题，比如如果有一件事的某些部分存在于另一件事件中那么它会创建一些问题。任何人都可以帮我这个吗？

But here also the same problem, like if some part of one thing is present in another then it creates some problems. Can any one please help me with this ?

推荐答案

为避免跟踪你的索引移动，我建议你存储输出字符串单独或在数组中，如下所示：

To avoid having keeping track of your indexes moving, I suggest you store the output string separately or in an array like I did below:

const str = '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';

const highlights = [{startOffset: 2, endOffset: 16}, {startOffset: 68, endOffset: 75}, {startOffset: 80, endOffset: 92}];

const result = [];
let currentIndex = 0;

highlights.forEach(h => {
  result.push(str.substring(currentIndex, h.startOffset));
  result.push(`<span class="mark">${str.substring(h.startOffset, h.endOffset)}</span>`);
  currentIndex = h.endOffset;
});

result.push(str.substring(currentIndex, str.length));

document.getElementById('root').innerHTML = result.join('');

.mark {
  color: red;
}

<div id="root"></div>

这篇关于将一个字符串重叠到另一个字符串突出显示问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！