Overlapping one line to another row highlighting problem

Question

I have a line that could be like

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry 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 

Now, I have json that has a start and end line offset that I want to highlight. Now the logic I'm using is 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 extract from the last value of an array so that the offset will not be changed. Now there is one problem, and it seems to overlap. Now let's say

In this text, I highlighted Lorem Ipsum has been by adding some span class. Now, for the next interaction, if startoffset and endoffset have a string that is nothing but Ipsum has been the industry standard . Now there will be an overlap of the two, and then the selection overlaps. Thus, I cannot get the exact text, which is why the offsets change.

Now the other solution 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 is also the same problem, as if some part of one thing is present in another, it creates some problems. Can someone help me with this?

Answer 1

To avoid tracking the movement of your indexes, I suggest you store the output rows separately or in an array, as I did below:

 const str = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\ 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>