如何获取可编辑div多行文本中选中内容的起始索引？

问题场景 #

假设我有一个包含多行文本的可编辑div，想要获取文本中字符'w'的全局位置。但遇到两个问题：

• 无法使用window.getSelection().anchorOffset;，该方法仅返回字符在所在行的位置，比如本该返回5的情况它会返回0，无法得到全局位置
• 不愿使用element.innerText.indexOf(selectedText);，因为这种方式可能匹配到相似的重复文本，导致结果不准确

解决方案 #

可以通过遍历可编辑div的所有文本节点，累加选中节点之前的所有文本长度，再加上当前节点内的偏移量，得到全局位置：

function getGlobalCursorPosition(editableElement) {
    const selection = window.getSelection();
    if (!selection.rangeCount) return -1;

    const range = selection.getRangeAt(0);
    let totalOffset = 0;
    const textNodeIterator = document.createNodeIterator(
        editableElement,
        NodeFilter.SHOW_TEXT
    );

    let currentNode;
    while ((currentNode = textNodeIterator.nextNode())) {
        if (currentNode === range.startContainer) {
            totalOffset += range.startOffset;
            break;
        }
        totalOffset += currentNode.textContent.length;
    }
    return totalOffset;
}

// 调用示例
const editableDiv = document.querySelector('[contenteditable="true"]');
const globalCharPosition = getGlobalCursorPosition(editableDiv);
console.log(globalCharPosition);

方法说明 #

• 利用NodeIterator遍历可编辑元素下的所有文本节点，确保不会遗漏换行、分段带来的文本内容
• 逐个累加每个文本节点的长度，直到定位到光标所在的目标文本节点
• 最后加上光标在当前节点内的偏移量，得到的就是不受换行影响的全局字符位置

内容的提问来源于stack exchange，提问作者Yaakov Whise