title: Split div content at cursor position
body: <p>I need to split an element after user clicks on it and the attr 'contenteditable' becomes 'true'. <a href="https://jsfiddle.net/vaLz55fv/1/" rel="nofollow">This</a> fiddle works for the first paragraph but not second because the latter is in a p tag. Similary in <a href="https://jsfiddle.net/vaLz55fv/8/" rel="nofollow">this</a> fiddle you will see that when the element has html tags in it, the counter loses accuracy and hence the text before and after the cursor is not what you'd expect.</p>
  
  <p>The assumption here is that the users will split the data in a way that the help tags will stay intact. As pointed out by dandavis here, e.g. the div has <code>&lt;i&gt;Hello&lt;/i&gt; &lt;b&gt;Wo*rld&lt;/b&gt;</code>, the user will only need to split the div into two divs, first will have <code>&lt;i&gt;Hello&lt;/i&gt;</code> and the second div will have <code>&lt;b&gt;Wo*rld&lt;/b&gt;</code> in it.</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div&gt;&lt;mark&gt;{DATE}&lt;/mark&gt;&lt;i&gt;via email: &lt;/i&gt;&lt;mark&gt;&lt;i&gt;{EMAIL- BROKER OR TENANT}&lt;/i&gt;&lt;/mark&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var $splitbut = $('&lt;p class="split-but"&gt;Split&lt;/p&gt;');
  $(this).attr('contenteditable', 'true').addClass('editing').append($splitbut);
  
  var userSelection;
  if (window.getSelection) {
      userSelection = window.getSelection();
  }
  var start = userSelection.anchorOffset;
  var end = userSelection.focusOffset;
  
  var before = $(this).html().substr(0, start);
  var after = $(this).html().substr(start, $(this).html().length);
  </code></pre>
  
  <p>The "Split" button is not working as generating the html is not an issue once I get proper "after" and "before" text. Any ideas as to what I am doing wrong here?</p>