Jak wybrać znaczniki html wraz z ich zawartością podczas korzystania z selectNodeContents?

Question

Mam ten fragment kodu, który mam użyć, aby uzyskać pozycję kursora w edytowalny Gr:

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

Problem polega na tym, caretOffset wrócił liczy się tylko zawartość tekstową i nie znaczniki HTML. Dla np

Rozważmy następujący ciąg w moim edycji div: Hey <b>jony</b>, whats goin on in the | party

* kursora oznaczamy | charakteru.

Powoduje, że getMeCurPos (ele) zwraca: 30, ale powinien wrócić 37. To się nie liczy b tagów

Answer 1

może utworzyć temp div, w którym można umieścić preCaretRange i gdzie można skorzystać textContent lub innerText na nim. Nie zajmie to długości kodu HTML, ale tekst dookoła niego.

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

Zobacz this fiddle

Answer 2

wziąłem kodu z tego artykułu: 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>