替换contenteditable元素文本时保持光标位置及换行标签替换问题

我来帮你搞定这两个contenteditable的常见痛点，这玩意儿的光标和DOM处理确实容易踩坑😉

直接修改innerHTML会完全重绘元素内的DOM结构，浏览器自然会把光标重置到元素开头。要解决这个问题，核心思路是先保存当前光标位置，替换完成后再恢复它。我们可以利用浏览器的Selection和Range API来实现：

步骤拆解 #

• 保存光标状态：获取当前选中区域的起始/结束节点以及对应的偏移量
• 执行文本/HTML替换操作
• 根据保存的信息重新定位光标

示例代码 #

// 保存光标位置的函数
function saveCursorPosition(element) {
    const selection = window.getSelection();
    if (selection.rangeCount === 0) return null;
    
    const range = selection.getRangeAt(0);
    const preSelectionRange = range.cloneRange();
    preSelectionRange.selectNodeContents(element);
    preSelectionRange.setEnd(range.startContainer, range.startOffset);
    
    // 计算光标相对于元素起始位置的总偏移量
    const startOffset = preSelectionRange.toString().length;
    
    return {
        startOffset: startOffset,
        endOffset: startOffset + range.toString().length
    };
}

// 恢复光标位置的函数
function restoreCursorPosition(element, pos) {
    if (!pos) return;
    
    const selection = window.getSelection();
    const range = document.createRange();
    range.setStart(element, 0);
    range.collapse(true);
    
    let currentOffset = 0;
    let nodeStack = [element.firstChild];
    let foundStart = false;
    let stop = false;

    // 遍历节点找到对应偏移的位置
    while (nodeStack.length && !stop) {
        const node = nodeStack.pop();
        if (node.nodeType === Node.TEXT_NODE) {
            const nextOffset = currentOffset + node.length;
            if (!foundStart && pos.startOffset >= currentOffset && pos.startOffset <= nextOffset) {
                range.setStart(node, pos.startOffset - currentOffset);
                foundStart = true;
            }
            if (foundStart && pos.endOffset >= currentOffset && pos.endOffset <= nextOffset) {
                range.setEnd(node, pos.endOffset - currentOffset);
                stop = true;
            }
            currentOffset = nextOffset;
        } else {
            let i = node.childNodes.length;
            while (i--) {
                nodeStack.push(node.childNodes[i]);
            }
        }
    }

    selection.removeAllRanges();
    selection.addRange(range);
}

// 使用示例
const editable = document.querySelector('[contenteditable="true"]');
// 替换前保存光标
const cursorPos = saveCursorPosition(editable);
// 执行替换操作
editable.innerHTML = editable.innerHTML.replace('旧文本', '新文本');
// 恢复光标
restoreCursorPosition(editable, cursorPos);

你当前的代码问题就出在直接替换innerHTML，导致DOM重置光标跳走。结合上面的光标保存/恢复方法，我们可以改进代码，同时优化事件处理逻辑：

改进后的代码 #

const myContentEditableElement = document.querySelector('span[contenteditable="true"]');

myContentEditableElement.addEventListener('input', function(e) {
    // 先保存光标位置
    const cursorPos = saveCursorPosition(this);
    
    // 替换目标DOM结构
    const targetRegex = /<div><br><\/div>/g;
    if (targetRegex.test(this.innerHTML)) {
        this.innerHTML = this.innerHTML.replace(targetRegex, '<p><br></p>');
    }
    
    // 恢复光标位置
    restoreCursorPosition(this, cursorPos);
});

// 复用上面的saveCursorPosition和restoreCursorPosition函数

额外优化建议 #

• 用input事件代替keyup：input事件能覆盖所有内容变更场景（比如粘贴、拖放），比keyup更可靠
• 避免全局替换：如果你的编辑场景比较复杂，全局替换可能会误改其他内容，可以考虑只定位到刚生成的<div><br></div>节点再替换，性能也更好
• 处理光标在被替换节点内的情况：上面的光标恢复函数已经考虑了这种场景，能正确把光标定位到新的<p>标签内

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