如何在含多子元素的contentEditable div中定位光标至指定位置

你当前的代码报错，是因为this.element.childNodes[0]可能不是文本节点，或者该节点的内容长度小于this.selectionStart。当contentEditable包含嵌套的div、span等元素时，全局的字符索引（你的selectionStart）不能直接对应到某个单一子节点的偏移量，需要递归遍历所有文本节点，累计字符长度来定位目标位置。

实现步骤 #

1. 先写一个工具函数，遍历所有文本节点，找到全局索引对应的目标节点和局部偏移：

function findTextNodeAndOffset(element, targetIndex) {
    let currentIndex = 0;
    const traverse = (node) => {
        if (node.nodeType === Node.TEXT_NODE) {
            const textLength = node.textContent.length;
            if (currentIndex + textLength > targetIndex) {
                return {
                    node: node,
                    offset: targetIndex - currentIndex
                };
            }
            currentIndex += textLength;
        } else if (node.nodeType === Node.ELEMENT_NODE && node.contentEditable !== 'false') {
            // 遍历子节点，跳过不可编辑的元素
            for (let i = 0; i < node.childNodes.length; i++) {
                const result = traverse(node.childNodes[i]);
                if (result) return result;
            }
        }
    };
    return traverse(element);
}

2. 修改你的光标恢复逻辑：

if (this.selectionStart !== null && this.selectionStart >= 0) {
    const selection = window.getSelection();
    const range = document.createRange();
    const position = findTextNodeAndOffset(this.element, this.selectionStart);
    
    if (position) {
        range.setStart(position.node, position.offset);
        range.collapse(true);
        selection.removeAllRanges();
        selection.addRange(range);
        // 可选：自动滚动到光标位置
        this.element.scrollIntoView({ block: 'nearest' });
    }
}

代码说明 #

• findTextNodeAndOffset会递归遍历contentEditable下的所有节点，只统计可编辑区域的文本节点长度，直到找到包含目标索引的文本节点，同时计算该节点内的局部偏移。
• 跳过contentEditable="false"的元素，这类元素内的内容不可编辑，光标无法定位其中。
• 找到目标位置后再设置Range，就能避免偏移量超出节点长度的报错。

注意事项 #

• 确保this.selectionStart的取值在0到contentEditable的总字符长度之间，避免索引越界（可以用类似的遍历方法计算总字符数）。
• 换行、空格等空白字符也要算入字符长度，保证selectionStart的准确性。

内容的提问来源于stack exchange，提问作者Jamie Adams