Javascript $（子项[x]）[0].outerHTML.length； } } } //移动到更内部的容器 currObj=stack.pop（）； children=$（currObj.contents（）； } //最后在最后一个节点内添加偏移量 偏移量+=document.getSelection（）.anchorOffset； 返回偏移量； }

你可以看到一个

---

关于这个答案：

• 它适用于所有主流浏览器
• 它很轻，不需要外部库（除了jQuery）
• 它有一个问题：像
  这样的html实体只算作一个字符

  ---

您可以通过将

document.getSelection（）.anchorNode.data

直接传递到

的
索引中来保存
文本
变量。我这样做只是为了清楚，谢谢你的回答，但不幸的是，在同一个父对象中，我可以有多个具有完全相同文本的dom。此解决方案更准确，因为它没有我在
中遇到的问题
<div id="mydiv" contenteditable="true">lorem ipsum <spanclass="highlight">indol|or sit</span> amet consectetur <span class='tag'>adipiscing</span> elit</div>

var offset = document.getSelection().focusOffset;

var offset = document.getSelection().anchorOffset;
var text = document.getSelection().anchorNode.data;
var textOffset = $("#mydiv").html().indexOf( text );

offsetCaret = textOffset + offset;

function getCaretHTMLOffset(obj) {

    var offset = document.getSelection().anchorOffset;
    var text = document.getSelection().anchorNode.data;
    var textOffset = obj.innerHTML.indexOf( text );

    return textOffset + offset;

}

function getOffset() {

    if ($("." + unique).length)
        throw new Error("marker present in document; or the unique class is not unique");

    // We could also use rangy.getSelection() but there's no reason here to do this.
    var sel = document.getSelection();

    if (!sel.rangeCount)
        return; // No ranges.

    if (!sel.isCollapsed)
        return; // We work only with collapsed selections.

    if (sel.rangeCount > 1)
        throw new Error("can't handle multiple ranges");

    var range = sel.getRangeAt(0);
    var saved = rangy.serializeSelection();
    // See comment below.
    $mydiv[0].normalize();

    range.insertNode($marker[0]);
    var offset = $mydiv.html().indexOf($marker[0].outerHTML);
    $marker.remove();

    // Normalizing before and after ensures that the DOM is in the same shape before 
    // and after the insertion and removal of the marker.
    $mydiv[0].normalize();
    rangy.deserializeSelection(saved);

    return offset;
}

function getCaretOffset(contentEditableDiv) {

    // read the node in which the caret is and store it in a stack
    var aux = document.getSelection().anchorNode;
    var stack = [ aux ];

    // add the parents to the stack until we get to the content editable div
    while ($(aux).parent()[0] != contentEditableDiv) { aux = $(aux).parent()[0]; stack.push(aux); }

    // traverse the contents of the editable div until we reach the one with the caret
    var offset   = 0;
    var currObj  = contentEditableDiv;
    var children = $(currObj).contents();
    while (stack.length) {
        // add the lengths of the previous "siblings" to the offset
        for (var x = 0; x < children.length; x++) {
            if (children[x] == stack[stack.length-1]) {
                // if the node is not a text node, then add the size of the opening tag
                if (children[x].nodeType != 3) { offset += $(children[x])[0].outerHTML.indexOf(">") + 1; }
                break;
            } else {
                if (children[x].nodeType == 3) {
                    // if it's a text node, add it's size to the offset
                    offset += children[x].length;
                } else {
                    // if it's a tag node, add it's size + the size of the tags
                    offset += $(children[x])[0].outerHTML.length;
                }
            }
        }

        // move to a more inner container
        currObj  = stack.pop();
        children = $(currObj).contents();
    }

    // finally add the offset within the last node
    offset += document.getSelection().anchorOffset;

    return offset;
}