title: How to select the html tags with their contents when using selectNodeContents?
body: <p>I have this bit of code, which I use to get the cursor's position in an editable div :</p>
  
  <pre><code>   function getMeCurPos(element){
         if (typeof window.getSelection != "undefined") {
            var range = window.getSelection().getRangeAt(0);
            var preCaretRange = range.cloneRange(); 
            preCaretRange.selectNodeContents(element);
            preCaretRange.setEnd(range.endContainer, range.endOffset); 
            caretOffset = preCaretRange.toString().length;  
            return caretOffset;
         }                        
     }
  </code></pre>
  
  <p>The problem is that, the caretOffset returned only counts the textual contents and not the html tags. For eg :</p>
  
  <p>Consider this string in my editable div :
  <code>Hey &lt;b&gt;jony&lt;/b&gt;, whats goin on in the | party</code></p>
  
  <p>*Cursor is denoted by <code>|</code> character.</p>
  
  <p>Doing getMeCurPos(ele) returns : <code>30</code> but it should return <code>37</code>. It doesn't count <code>b</code> tags</p>