使用selectNodeContents時如何選擇帶有內容的html標簽？

Question

我有這段代碼，我用它來獲取光標在可編輯 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;
       }                        
   }

問題是，返回的 caretOffset 只計算文本內容而不是 html 標簽。 例如：

在我的可編輯 div 中考慮這個字符串： Hey <b>jony</b>, whats goin on in the | party Hey <b>jony</b>, whats goin on in the | party

*光標由|表示特點。

執行 getMeCurPos(ele) 返回： 30但它應該返回37 。 它不計算b標簽

Answer 1

您可以創建一個臨時div ，您可以在其中放置preCaretRange以及可以在其上使用textContent或innerText位置。 這不會占用HTML長度，而是圍繞它的文本。

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

看到這個小提琴

Answer 2

我從這篇文章中獲取了代碼： 單擊鼠標即可選擇所有DIV文本

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

Answer 3

為了將選擇作為文本和 DOM 節點，您可以在 Javascript 選擇范圍中使用cloneContents() 。 HTML如下

 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>