Come selezionare i tag html con i loro contenuti quando si utilizza selectNodeContents?

Question

Ho questo pezzo di codice, che io uso per ottenere la posizione del cursore in un div modificabile:

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

Il problema è che, il caretOffset restituito conta solo il contenuto testuale e non i tag HTML. Per esempio:

Considerate questa stringa nella mia div modificabile: Hey <b>jony</b>, whats goin on in the | party

* Il cursore è indicata da | carattere.

Fare getMeCurPos (ele) restituisce: 30 ma deve restituire 37. Non conta b tag

Answer 1

È possibile creare una temperatura div in cui si può mettere il preCaretRange e dove è possibile utilizzare textContent o innerText su di esso. Questo non prenderà la lunghezza dell'HTML, ma il testo attorno ad esso.

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

Vedi this fiddle

Answer 2

ho preso il codice da questo articolo: 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>