title: Is there a way to get the exact indexOf an element in a big html string
body: <p>I am working on an app with vue.js and quill.js in which I am creating some documents.
  The content of a document is stored in <code>document.content</code> which is one giant string with a bunch of html tags in it coming straight from quill.js.</p>
  
  <p>When previewing the document I'm rendering the big html string inside a div with v-html attribute like this:</p>
  
  <pre><code>&lt;div v-html="document.content"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>i.e.</p>
  
  <pre><code>document.content = "&lt;p&gt;Hello&lt;/p&gt;&lt;p&gt;World&lt;/p&gt;&lt;p&gt;Hello World&lt;/p&gt;&lt;p&gt;Hello&lt;/p&gt;"
  </code></pre>
  
  <p>It's rendereded as (you get the idea):</p>
  
  <pre><code>&lt;div data-v-4ee08204&gt;
    &lt;p&gt;Hello&lt;/p&gt;
    &lt;p&gt;World&lt;/p&gt;
    &lt;p&gt;Hello World&lt;/p&gt;
    &lt;p&gt;Hello&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <strong>question</strong> is:
  When clicking somewhere inside the div is there a way to get the exact index of the character/word/element I've clicked on (because I need to add a comment to it)?</p>
  
  <p>I've tried to attach a click listener to the div, getting the outerHTML of the target element and trying to get the indexOf document.content, but it's not always working, because there can be similar stuff inside the big string like <code>&lt;p&gt;Hello&lt;/p&gt;</code> twice and it will get the first one only.</p>
  
  <p>It's possible that my whole approach is wrong, but I'm not really sure.</p>
  
  <p>Any suggestion is welcome. Thanks!</p>