title: window.getSelection().getRange(0) does not work when text is wrapped by <mark>
body: <p>I am trying to use <code>window.getSelection().getRangeAt(0)</code> to get the index of the selected word in a sentence. It works fine in a text without any <code>&lt;mark&gt;</code> and <code>&lt;abbr&gt;</code>. But when there are such tags in a sentence, it seems this function will cut the sentence into several pieces.</p>
  
  <p>For example, one sentence in HTML looks like <code>My car &lt;abbr title="car_state"&gt;&lt;mark&gt;broke down&lt;/mark&gt;&lt;/abbr&gt;. What do I do?</code></p>
  
  <p>When I selected the text before <code>broke down</code>, it works fine. But when I selected the text after, for example,e <code>What</code>, it will give the <code>startOffset</code> at <code>2</code> instead of <code>22</code>. </p>
  
  <p>Is it possible to get index regarding the whole sentence?</p>
  
  <p><strong>Inspired by Kaiido's answer, the following method will work.</strong>
  <strong>Although the highlighted texts will not match, I will not need the highlighted text anyway</strong></p>
  
  <p>Please feel free to add comments about the solution. </p>
  
  <p>The running example</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#selected_text').click(function(){
  var text = "My car is broke down. What do I do?";
  var range = window.getSelection().getRangeAt(0);
  var start = range.startOffset;
  var end = range.endOffset;
  var extra = 0;
  var selected_string = range.toString();
  
  var t = $('span').contents();
  for(var i = 0; i &lt; t.length; i++){
    console.log(extra);
    if(t[i].wholeText === undefined){
      extra += t[i].textContent.length;
    }else if(t[i].wholeText.includes(selected_string)){
      break;
    }else{
      extra += t[i].length;
    }
  }
  
  start += extra;
  end += extra;
  console.log("start index: " + start);
  console.log("end index: " + end);
  console.log(text.slice(start, end));
  console.log(selected_string);
  console.log("match: ", (selected_string === text.slice(start, end)));
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;span&gt;My car is &lt;abbr title="car_state"&gt;&lt;mark&gt;broke down&lt;/mark&gt;&lt;/abbr&gt;. What do &lt;mark&gt;I&lt;/mark&gt; d&lt;mark&gt;o&lt;/mark&gt;?&lt;/span&gt;
  &lt;button id='selected_text'&gt;show selected text&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>