I am facing a challenge with handling a string that contains Lorem Ipsum text. I have JSON data that specifies the start and end offsets of certain sections within the text that I need to highlight. The approach I am currently using involves sorting the JSON data based on the start offset value and then iterating through it in reverse order to apply the highlights.
$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>");
However, one issue I encounter is overlapping highlighting when the specified sections overlap. For example, if one section is highlighted as "Lorem Ipsum has been" and the next section is "Ipsum has been the industry's standard", there will be an overlap in the highlighting. This results in incorrect text being highlighted due to changing offsets.
I tried another solution where I added the length of the span tag to the offset values before applying the highlights, but this also did not fully resolve the overlapping issue. If any suggestions or solutions are available to address this problem effectively, I would greatly appreciate the assistance.