I have this bit of code, which I use to get the cursor's position in an editable div :

   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;
       }                        
   }

The problem is that, the caretOffset returned only counts the textual contents and not the html tags. For eg :

Consider this string in my editable div : Hey <b>jony</b>, whats goin on in the | party

*Cursor is denoted by | character.

Doing getMeCurPos(ele) returns : 30 but it should return 37. It doesn't count b tags

I have this bit of code, which I use to get the cursor's position in an editable div :

   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;
       }                        
   }

The problem is that, the caretOffset returned only counts the textual contents and not the html tags. For eg :

Consider this string in my editable div : Hey <b>jony</b>, whats goin on in the | party

*Cursor is denoted by | character.

Doing getMeCurPos(ele) returns : 30 but it should return 37. It doesn't count b tags

• javascript
• textarea

• Anyone with an answer..... – Tanya Arora Commented Apr 15, 2013 at 8:51
• been trying to set up your code. can you provide a jsfiddle that shows a functional version of your current code? – asifrc Commented Apr 15, 2013 at 8:51
• Any idea about this issue? – Finder Commented Jul 15, 2019 at 12:56

3 Answers 3

You may create a temp div in which you can put your preCaretRange and where you can use textContent or innerText on it. This won't take the HTML length, but the text around it.

 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); 
          var temp = document.createElement("div");
          temp.innerHTML = preCaretRange.toString();
          var sanitized = temp.textContent || temp.innerText;
          caretOffset = sanitized.length;
          return caretOffset;
       }                        
}

See this fiddle

For getting the selection both as text and as DOM nodes you can use the cloneContents() in the Javascript selection-range. HTML as below

function getMeCurPos(element) {
  if (typeof window.getSelection != "undefined") {
    var range = window.getSelection();
    cloned.innerHTML = '';
    for (let i = 0; i < range.rangeCount; i++) {
      cloned.append(range.getRangeAt(i).cloneContents());
    }

    var sanitized = cloned.innerHTML;
    caretOffset = sanitized.length;
    return caretOffset;
  }
}

<p contenteditable="true" id="test" onclick="alert(getMeCurPos(this))">Test1<br>Test2<br>Test3<br>Test4</p>
<br>
Cloned: <span id="cloned"></span>

I've taken the code from this article: Select all DIV text with single mouse click

            <script type="text/javascript">
                function selectText(containerid) {
                    if (document.selection) {
                        var range = document.body.createTextRange();
                        range.moveToElementText(document.getElementById(containerid));
                        range.select();
                    } else if (window.getSelection) {
                        var range = document.createRange();
                        range.selectNode(document.getElementById(containerid));
                        window.getSelection().addRange(range);
                    }
                }
            </script>

            <div id="selectable" onclick="selectText('selectable')">http://example./page.htm</div>