在不考虑其直接父项的情况下获取开始和结束偏移值的范围答案

【问题标题】：Get the range of start and end offset values without considering its immediate parent在不考虑其直接父项的情况下获取开始和结束偏移值的范围
【发布时间】：2019-10-22 19:18:30
【问题描述】：

p 标记内有两个 span 元素。在该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);
}

【问题讨论】：

即节点中的偏移量（此处为文本节点）。我无法理解您在哪里得出您在此处引用的预期数字，请添加更多详细信息。
预期值应该出现而不考虑其直接父级（跨度元素）@MarkSchultheiss
所以我认为您希望内部spans 被视为<p> 中的一个长字符串 - 忽略任何嵌套节点等，这是正确的吗？
绝对是的@FrancisLeigh。
我能问一下为什么你的文本嵌套在 span 中吗？

标签： javascript jquery html selection

【解决方案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

【讨论】：