Question

我在span标记内有两个p元素。在选择p中的某些文本时，我需要使用window.getSelection()获取所选值的开始和结束偏移量。

我的期望是，在选择第二个span之类的文本'country'时，起始偏移量值为28，结束偏移量为34，而无需考虑其直接父级。但是，开始偏移的实际值为10，结束偏移的实际值为16。

我如何达到我的期望值？

<p style="margin: 0px;">
  <span>Welcome to India which</span>
  <span>
    <span>was great country for tourist places</span>
  </span>
</p>

private onKeyUp(event: any): void {
  let labelSelection = window.getSelection ? window.getSelection() : document.getSelection();
  let range: any = this.labelSelection.getRangeAt(0);
}

Answer 1

这是一个棘手的问题，但是很有趣。

这是一天的事情：

将鼠标事件侦听器附加到包含的元素。使用event.target标识所选的开始和结束节点。使用这些节点将偏移量添加到原始选择所报告的数字上。

HTML：

<p id="outer" style="margin: 0px;">
  <span>Welcome to India which</span>
  <span>
    <span>was great country for tourist places</span>
  </span>
</p>

Javascript：

const flattenNodes = node =>
  Array.from(node.children).reduce((acc, curr) => {
    if (curr.childElementCount > 0) {
      acc.push(flattenNodes(curr))
    } else {
      acc.push(curr)
    }
    return acc
  }, [])

const getOffsetForElementAtIndex = nodes => elementIndex =>
  nodes.reduce((sum, node, i) => (i < elementIndex ? sum + node.textContent.length : sum), 0)

const getSelection = ev => {
  const nodes = flattenNodes(ev.currentTarget).flat()
  const startElementIndex = nodes.indexOf(mouseDownElement)
  const endElementIndex = nodes.indexOf(ev.target)
  const { startOffset, endOffset } = document.getSelection().getRangeAt(0)

  const start = startOffset + getOffsetForElementAtIndex(nodes)(startElementIndex)
  const end = endOffset + getOffsetForElementAtIndex(nodes)(endElementIndex)
  console.log(`start: ${start}, end: ${end}`)
}
let mouseDownElement = null

const el = document.getElementById('outer')
el.addEventListener('mousedown', ev => (mouseDownElement = ev.target))
el.addEventListener('mouseup', ev => getSelection(ev))

codepen here

获取起始和结束偏移值的范围，而无需考虑其直接父级

1 个答案: