javascript - 使用 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

*光标由|表示性格。

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

参见 this fiddle