javascript - Highlight a string from the text document by adding spans

Question

I am new to webDevelopment. I have string which has some text.Now I want to highlight some words from that text file . So, Here I am using this logic

$scope.highlightHTML = function (content,startoffset,endoffset,color) {
          var className = 'mark';
          console.log(content.substring(startoffset, endoffset));
          return content.replace(content.substring(startoffset, endoffset), '<span class="' + className + '">$&</span>');
}

Now this is working fine. But Now what happens is when first word gets highlighted and then when It tries to highlight the second word then the strings offsets are getting changed because of this replacing . It takes tag as well so, now offsets are getting changed. now when I highlight some text then next time it should not take offsets of start and end offset of the span tag . SO, How can I do this ?

Its 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"

I have this string. Now, I want to highlight when an unknown printer took a galley of Now, for this I use substring because I get the start and end from back-end itself. I replace only that string with mark tag.

Now The problem is after this immediately,If I want to highlight but also the leap into electronic typesetting, Then the offset which I got from the backend will not be useful because while replacing the first string I added span tag, so it is taking the span tag offsets as well. So, Its not getting me the exact string by providing the offsets as well. It gives me some another string because offsets has changed. Now, whil highlighting the offsets should not get changed by adding the span tag.

Ajax call -

jsonDataArray.forEach(function (item) {
                  responseData = $scope.highlightHTML(responseData,item.startOffset,item.endOffset,item.color);
                  $rootScope.data.htmlDocument = responseData.replace(/
/g, "</br>");;
                });

Answer 1

You can achieve this by using the length of the string using below logic.

I'm adding span to 'simply dummy', 'and typesetting', 'Ipsum has been' in your text.

what i have done is after the text has been updated after the function call, i am adding the difference between the initial text length and updated text length to the offeset which calling the function again which gives me the exact offsets of the words.

Please let me know whether its works for you.

Updated ajax :

var initialLength = responseData.length;
var updatedLength = 0;
jsonDataArray.forEach(function(item, index) {
  if (index == 0)
    responseData = $scope.highlightHTML(responseData, parseInt(item.startOffset), parseInt(item.endOffset), item.color);
  else
    $scope.highlightHTML(responseData, parseInt(item.startOffset) + (updatedLength - initialLength), parseInt(item.endOffset) + (updatedLength - initialLength), item.color);
    updatedLength = responseData.length;
    $rootScope.data.htmlDocument = responseData.replace(/
/g, "</br>");;
});

$(document).ready(function() {
  var text = "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";
  var initialLength = text.length;
  var updatedLength = 0;
  var startoffset1 = 15;
  var endoffset1 = 27;
  var startoffset2 = 49;
  var endoffset2 = 64;
  var startoffset3 = 81;
  var endoffset3 = 95;
  console.log(text.substring(startoffset1, endoffset1));
  console.log(text.substring(startoffset2, endoffset2));
  console.log(text.substring(startoffset3, endoffset3));
  text = highlightHTML(text, startoffset1, endoffset1, 'green');
  updatedLength = text.length;
  text = highlightHTML(text, startoffset2 + (updatedLength - initialLength), endoffset2 + (updatedLength - initialLength), 'green');
  updatedLength = text.length;
  text = highlightHTML(text, startoffset3 + (updatedLength - initialLength), endoffset3 + (updatedLength - initialLength), 'green');
  console.log(text);
});

function highlightHTML(content, startoffset, endoffset, color) {
  var className = 'mark';
  console.log('Inside Function: ' + content.substring(startoffset, endoffset));
  return content.replace(content.substring(startoffset, endoffset), '<span class="' + className + '">$&</span>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>