如何获取相对于父元素的selectionOffset 选中文本父级偏移量怎么获取

原生window.getSelection()的默认返回逻辑为锚点偏移相对于锚点所在的直接节点，无法直接修改API本身的返回规则，但可以通过额外的计算逻辑，得到相对于指定父元素的偏移量。

实现思路 #

• 先通过getSelection()拿到锚点节点anchorNode、锚点偏移anchorOffset
• 从锚点节点开始向上遍历父节点，同时累加当前节点之前所有同级兄弟节点的文本长度
• 遍历到目标父级元素（即你这里的#l元素）时停止，累加的总长度加上原本的anchorOffset就是相对于父元素的偏移量

完整可运行代码 #

HTML #

<span id='l'>begin<span>Middle</span>end</span>

CSS #

body{ background: #1a1d21; font-size: 2em;}
span{color: white}

JavaScript #

// 计算相对于指定父元素的偏移量函数
function getOffsetRelativeToParent(selection, parentEl) {
  let offset = selection.anchorOffset
  let currentNode = selection.anchorNode

  while (currentNode && currentNode !== parentEl) {
    // 累加所有前面的兄弟节点的文本长度
    let prevSibling = currentNode.previousSibling
    while (prevSibling) {
      offset += prevSibling.textContent.length
      prevSibling = prevSibling.previousSibling
    }
    currentNode = currentNode.parentNode
  }
  return offset
}

l.addEventListener('click', (e)=>{
    const selection = window.getSelection()
    const relativeOffset = getOffsetRelativeToParent(selection, l)
    // 点击'M'时输出为从0计数的偏移量5，若你预期的是从1开始计数的位置，加1即可得到6
    console.log('相对于父元素的偏移量：', relativeOffset)
})

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