How to get the selected string offset start and offset end in the sentence by Javascript

I have two copies, one is HTML version like below.

<div class="data-sentence" onclick="setSentenceNo(28);">
  <p>
     Statement of Advice for <span class="artemis_soa ano-subject" data-oristr="Joe" data-replaceid="tag_replace_6" data-hasqtip="7">&lt;NAME_1&gt;</span> and <span class="artemis_soa ano-subject" data-oristr="Black" data-replaceid="tag_replace_3" data-hasqtip="8">&lt;NAME_2&gt;</span>,
   </p>
</div>

Another one is plain text like below.(Also we can say it is what user can see in browser).

Statement of Advice for <NAME_1> and <NAME_2>,

So what I want is to allow user to select the string and return back the offset start and offset end for the string user selected. (Also we should not allow user select the reserved tag like ).

For example, user select string 'Advice', the offset_start = 13 and offset_end=19

I do appreciate for your help.

Solution

Use window.getSelection() and then Selection and Range APIs to get the offsets you need.

document.body.onmouseup = function () {
  var selection = window.getSelection();
  var range = selection.getRangeAt(0);
  console.log(range.startOffset, range.endOffset);
};

<div><p>Statement of Advice for <span>&lt;NAME_1&gt;</span> and <span>&lt;NAME_2&gt;</span>,</p></div>