如何获取多行多HTML元素contenteditable div内的caret position

现有方案失效原因 #

常规方案无法适配多行场景，核心是两个逻辑漏了：

• 仅统计了纯文本长度，完全跳过了HTML结构里块级元素、<br>标签产生的换行位置差，换行本身在纯文本提取时不会被计入长度，但实际占1个光标位，直接导致多行下计数错位
• 遍历节点时没有按文档流顺序递归穿透所有嵌套节点，遇到行内格式化标签（span、strong、em等）时容易提前终止遍历，嵌套场景下计数不准

核心实现逻辑 #

• 先通过Selection API拿到当前光标对应的Range对象，先统计光标位置前所有可见文本的总长度
• 额外遍历光标位置前所有的块级元素、换行标签，给每个符合规则的换行节点补+1的偏移量，修正多行场景的计数偏差
• 块级元素换行偏移补算是解决多行错位的核心，最终返回的位置计数规则和原生textarea完全对齐：HTML标签本身不占计数位，每个换行占1个计数位。

可直接复用的代码 #

// 块级标签集合，有自定义块级组件直接往里面加标签名即可
const BLOCK_TAGS = new Set(['DIV', 'P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'LI', 'BLOCKQUOTE']);

/**
 * 获取contenteditable容器内的光标位置
 * @param {HTMLElement} container 带contenteditable="true"的容器元素
 * @returns {number} 从0开始计数的光标位置
 */
function getCaretOffset(container) {
  const selection = window.getSelection();
  if (!selection.rangeCount) return 0;
  const range = selection.getRangeAt(0);
  if (!container.contains(range.commonAncestorContainer)) return 0;

  // 先统计所有文本内容的偏移
  const preRange = document.createRange();
  preRange.selectNodeContents(container);
  preRange.setEnd(range.startContainer, range.startOffset);
  let offset = preRange.toString().length;

  // 补算换行带来的偏移
  const nodeIterator = document.createNodeIterator(
    container,
    NodeFilter.SHOW_ELEMENT,
    (node) => {
      if (!range.intersectsNode(node)) return NodeFilter.FILTER_REJECT;
      // 跳过容器本身、第一个子元素前的无效换行
      if (node === container || node === container.firstElementChild) return NodeFilter.FILTER_REJECT;
      if (node.tagName === 'BR' || BLOCK_TAGS.has(node.tagName)) return NodeFilter.FILTER_ACCEPT;
      return NodeFilter.FILTER_REJECT;
    }
  );

  let currentNode;
  while ((currentNode = nodeIterator.nextNode())) {
    offset += 1;
  }
  return offset;
}

/**
 * 配套方法：把光标设置到指定位置
 * @param {HTMLElement} container 带contenteditable="true"的容器元素
 * @param {number} targetOffset 要定位到的目标位置
 */
function setCaretOffset(container, targetOffset) {
  let currentPos = 0;
  const findTargetNode = (node) => {
    // 文本节点直接计算长度
    if (node.nodeType === Node.TEXT_NODE) {
      const nodeLength = node.textContent.length;
      if (currentPos + nodeLength >= targetOffset) {
        const range = document.createRange();
        const selection = window.getSelection();
        range.setStart(node, targetOffset - currentPos);
        range.collapse(true);
        selection.removeAllRanges();
        selection.addRange(range);
        return true;
      }
      currentPos += nodeLength;
      return false;
    }
    // 元素节点补算换行偏移
    if (node.nodeType === Node.ELEMENT_NODE) {
      if (
        node !== container 
        && node !== container.firstElementChild 
        && (node.tagName === 'BR' || BLOCK_TAGS.has(node.tagName))
      ) {
        currentPos += 1;
      }
      // 递归遍历子节点
      for (let i = 0; i < node.childNodes.length; i++) {
        if (findTargetNode(node.childNodes[i])) return true;
      }
    }
    return false;
  };
  findTargetNode(container);
}

使用说明 #

• 代码兼容所有现代浏览器，无第三方依赖
• 如果你的富文本场景有自定义块级元素（比如代码块、卡片组件），只需要把对应的标签名加到BLOCK_TAGS集合里即可正常适配
• 返回的位置值和textarea的光标计数逻辑完全一致，可以直接和纯文本场景的光标逻辑对齐使用

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