Highlighting a text from string by using sub-string method

Question

I have a string which you can is 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

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>');
}

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

Here consider responseData is the string which I provided in the question. From this I am calling the highlighthtml function.

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.

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.

Yes it's doable in many ways, one of it is to update the offset indexes by adding the extra length for the spans. — cнŝdk
– cнŝdk, Commented Mar 23, 2018 at 8:38
@chŝdk But In loop every time it is going to add that may spans 5 or 6 then ? — ganesh kaspate
– ganesh kaspate, Commented Mar 23, 2018 at 8:44
Yes you will need to update the length proportionnally to your loop index. — cнŝdk
– cнŝdk, Commented Mar 23, 2018 at 8:45
Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer
– halfer, Commented Mar 23, 2018 at 10:25

Sebastian Speitel · Accepted Answer · 2018-03-23 09:22:19Z

3

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

edited Mar 23, 2018 at 9:22

answered Mar 23, 2018 at 8:37

Sebastian Speitel

7,3872 gold badges21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

ganesh kaspate Over a year ago

Let me check once this

Sebastian Speitel Over a year ago

some errors is not very helpful. Did you try sorting them?

ganesh kaspate Over a year ago

No When I run this snippet that time

Sebastian Speitel Over a year ago

This snippet can't work. I just used it for syntax highlighting

Sebastian Speitel Over a year ago

Sorry, there was really an error in the second to last line }); has to be };. I editet it

|

cнŝdk · Accepted Answer · 2018-03-23 08:48:52Z

1

You can update the offsets by adding the extra length for the spans text added, in your loop like this:

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

So here in each iteration, you will be incrementing both offsets with (index *length), so for the first iteration you won't update them because indexis 0, then you will increment it by 1*length and so on.

edited Mar 23, 2018 at 8:48

answered Mar 23, 2018 at 8:42

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

19 Comments

ganesh kaspate Over a year ago

Let me please check this If this works or not. Thanks for replying

cнŝdk Over a year ago

@ganeshk Ok, yes of course, take your time to test this.

ganesh kaspate Over a year ago

I do have one question Like If every time it is going to add some spans in that then How we will take care of this ?

cнŝdk Over a year ago

@ganeshk Like I said it will update according to loop index, in the (index*length) expression.

ganesh kaspate Over a year ago

Got it it will be multiplied by zero

|

Collectives™ on Stack Overflow

Highlighting a text from string by using sub-string method

2 Answers 2

16 Comments

19 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

16 Comments

19 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related