I am relatively new to working with angular js and javascript. I have a document or text file that looks something like this:
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
In this file, I want to highlight a specific portion:
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
To achieve this, I receive start and end offsets for the desired string from the backend.
I then utilize the following method to apply the highlighting:
$scope.highlightHTML(responseData, startOffset, endOffset);
$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>');
}
This method replaces the specified text with a span tag. However, when dealing with multiple elements in the array that need highlighting, the offsets need adjustment due to the insertion of span tags.
var length = '<span class="mark"></span>'.length:
jsonDataArray.forEach(function(item, index) {
responseData = $scope.highlightHTML(responseData, item.startOffset + (index * length), item.endOffset + (index * length));
});
The main issue arises when trying to highlight the text 1500s, as it may be part of a previously highlighted string. This discrepancy leads to incorrect offset calculations and difficulty in locating the exact string for highlighting.
If anyone has a solution to this problem, I would greatly appreciate the assistance.