title: Determine the position index of a character within an HTML element when clicked
body: <p>I have an HTML element with only visible text inside.   This example is a <code>&lt;div&gt;</code> element, but it could be a <code>&lt;span&gt;</code>, <code>&lt;p&gt;</code>, or other DOM element. </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;This is a simple example.&lt;/div&gt;
  </code></pre>
  
  <p>When clicked, I can get the position of the cursor on the surface of the div, but I need to determine the position of the nearest character and/or its index into the div.innerHTML string at the time of the click.</p>
  
  <p>I found a similar implementation in the "getCharNumAtPosition" method in SVG text entities <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh466412%28v=vs.85%29.aspx" rel="noreferrer">here</a>.</p>
  
  <p>Is it possible to implement such a function in JavaScript that works with HTML?</p>
  
  <p>(Solutions would be most useful if they are portable across most modern browsers, work with most written languages, and are based on relatively stable standards so that they will not become buggy later.)</p>