获取包含HTML内容的contentEditable区域中的插入符（光标）位置

Question

我有contentEditable元素（可以是p，div，...），我想在其中获得插入符号（光标）的位置。我通常可以通过以下代码来实现：var position = window.getSelection().getRangeAt(0).startOffset;当元素仅包含文本时，这可以正常工作。但是，当元素包含某些HTML格式时，返回的位置将相对于所包含HTML元素内的插入符号位置。假设contentEditable元素的内容是这样的：AB<b>CD</b>EF如果插入符在inside <b></b>，比如说在C和D之间，则上面代码返回的位置是1而不是3（从contentEditable元素内容的开头算起）有人可以提出解决方案吗？

Answer 1

这是一篇非常古老的文章，但仍然是在Google上搜索的第一批结果之一，因此也许仍然有用。考虑到html标记和换行符，这对我来说也能找到正确的位置（在Firefox上测试）：

function getCaretPosition (node) {

    var range = window.getSelection().getRangeAt(0),

        preCaretRange = range.cloneRange(),

        caretPosition,

        tmp = document.createElement("div");

    preCaretRange.selectNodeContents(node);

    preCaretRange.setEnd(range.endContainer, range.endOffset);

    tmp.appendChild(preCaretRange.cloneContents());

    caretPosition = tmp.innerHTML.length;

    return caretPosition;

}

它使用cloneContents功能来获取实际的html，并将documentfragment附加到临时div上以获取html的长度。