title: Highlighted text in a contenteditable div: Get the start and the end of the highlighted text
body: <pre><code>&lt;div contenteditable="true"&gt;This text is &lt;b&gt;Bold&lt;/b&gt; not &lt;i&gt;Italic&lt;/i&gt; right?&lt;/div&gt;
  </code></pre>
  
  <p>For example if </p>
  
  <blockquote>
    <p>text is Bold not</p>
  </blockquote>
  
  <p>is selected by the user, how do i know the exact position(offset) of the selection (highlight). I have read several articles about this but could not find one that explain.
  Thanks</p>