Multiple values having same text not getting the exact selected text offsets

Question

I have a text which 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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Now, I want to highlight some part of this text, so I need to know the start and end offsets of the string.

Let's say

it to make a

This is the text I want to highlight, so I need the offset of this text; so far I tried using the following logic

var startoffset  = $scope.original_doc_content.indexOf("it to make a ");
var endoffset =  startoffset + string.length;

Now my issue is happening if it to make a is present 2 times in the given text: if I want to highlight or want to take the second one and if it's present before the 2nd one then it gives me the 1st ones offset and not the second one which I require. So how can I resolve this?

Possible duplicate of [Javascript indexOf method with multiple values](https://stackoverflow.com/questions/36631641/javascript-indexof-method-with-multiple-values) — Aleksey Solovey, Jul 18 '18 at 11:03
Possible duplicate of [How to find index of all occurrences of element in array?](https://stackoverflow.com/questions/20798477/how-to-find-index-of-all-occurrences-of-element-in-array) — Linh Nguyen, Jul 18 '18 at 11:08
This might be duplicate but can u tell me how can i get the correct offset , which I have clicked or selected that text — ganesh kaspate, Jul 18 '18 at 11:14
@TemaniAfifI know index of usage , but I was asking How will I come to know is the same which I have selected. — ganesh kaspate, Jul 18 '18 at 11:22
One thing is that i don't have any array I have a document which you can say a resume , I have to find in that document. — ganesh kaspate, Jul 18 '18 at 11:38

Mark Baijens · Answer 1 · 2018-07-18T11:54:19.300

You can do highlighting a lot easier with a simple replace.

window.onload = function(){
  var str = document.getElementById("mypar").innerText;
  var res = str.replace(/text/g, "<span class=\"highlight\">text</span>");
  document.getElementById("mypar").innerHTML = res;
};

.highlight {
  background-color: yellow;
}

<p id="mypar">This is my text where i want to highlight text or something</p>

Or you can do this to get the index. It's probably not the best solution but it works. It iterates over the words until it can not find more and logs the values to the console.

window.onload = function(){
  var str = document.getElementById("mypar").innerText;
  var indexFirstChar = 0;
  var indexOfLastChar = 0;
  var searchString = "text";
  while(str.indexOf(searchString, indexFirstChar + 1) >= 0) {
     indexFirstChar = str.indexOf(searchString, indexFirstChar + 1);
     indexOfLastChar = indexFirstChar + searchString.length - 1;
     console.log(indexFirstChar);
     console.log(indexOfLastChar);
  }
};

<p id="mypar">This is my text where i want to highlight text or something</p>

I already have my own highlighting logic i just need to know the offset of that perfect position — ganesh kaspate, Jul 18 '18 at 11:12
@ganeshkaspate All code affects performance. I'm far from an expert on this subject but it might become slow when searching in very large texts. My first example with a replace function is probably a better solution. Some performance testing would need to be done to confirm my theory though. — Mark Baijens, Jul 18 '18 at 14:15

Multiple values having same text not getting the exact selected text offsets

1 Answers1