How to select the html tags with their contents when using selectNodeContents?

Question

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

Yen

Anyone with an answer..... – Yen

been trying to set up your code. can you provide a jsfiddle that shows a functional version of your current code? – Richelieu

Any idea about this issue? – Zito

Answer 1

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

Howze

Still this only returns the text count, and doesn't count the tags. See this fiddle – Yen

@TanyaArora alright, I didn't understand your problem at all. Thought it was the contrary. I'm looking to it – Howze

@TanyaArora using a textarea would solve that problem : jsfiddle.net/KLEbW/1 – Howze

Answer 2

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>

Reverberate

Answer 3

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.com/page.htm</div>

Rosemaryrosemond