Contenteditable Div - 根据innerHTML 位置的光标位置

Question

我已经完成了我的研究并在 StackOverflow 上遇到了这些问题，人们在那里问了同样的问题，但问题是他们想要根据 x 和 y 坐标或左侧的列来获得位置。我想知道光标相对于 div 的 innerHTML 的位置。

例如：

innerHTML = "This is the innerHTML of the <b>div</b> and bla bla bla..."
                                                        ^
                                                  Cursor is here

所以这个案例我想要的结果是 44. 怎么做？

Answer 1

var target = document.createTextNode("\u0001");
document.getSelection().getRangeAt(0).insertNode(target);
var position = contentEditableDiv.innerHTML.indexOf("\u0001");
target.parentNode.removeChild(target);

这会临时插入一个包含不可打印字符 ( \u0001)的虚拟文本节点，然后在div's 中查找该字符的索引innerHTML。

在大多数情况下，这会使 DOM 和当前选择保持不变，可能会有一个较小的副作用：如果光标位于单个文本节点的文本中间，则该节点将被分解为两个连续的文本节点。通常这应该是无害的，但请在您的特定应用程序的上下文中记住它。

更新：原来您可以使用Node.normalize().