Javascript 获取开始和结束偏移值的范围，而不考虑其直接父对象

我在

p

标签中有两个

span

元素。在

p

中选择一些文本时，我需要使用

window.getSelection（）

获取所选值的起始和结束偏移量

我的期望是，在选择第二个

span

文本（如

'country'

）时，起始偏移值将为

28

，结束偏移值将为

34

，而不考虑其直接父项。但是，起始偏移量的实际值为

10

，结束偏移量为

16

我怎样才能达到我的期望值

欢迎来到印度
那个国家是旅游胜地

private onKeyUp（事件：任意）：无效{
让labelSelection=window.getSelection？window.getSelection（）：document.getSelection（）；
let range:any=this.labelSelection.getRangeAt（0）；
}

这是一个相当棘手的问题，但玩起来很愉快

有一天可以做到这一点：

将鼠标事件侦听器附加到包含的元素。使用

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))

const flattenodes=node=>
Array.from（node.children）.reduce（（acc，curr）=>{
如果（当前子元素计数>0）{
acc.push（扁平节点（当前））
}否则{
附件推送（当前）
}
返回acc
}, [])
const getOffsetForElementAtIndex=节点=>elementIndex=>
nodes.reduce（（sum，node，i）=>（i{
const nodes=flattNodes（ev.currentTarget）.flat（）
const startElementIndex=nodes.indexOf（mousedowneElement）
const-endElementIndex=nodes.indexOf（ev.target）
const{startOffset，endOffset}=document.getSelection（）.getRangeAt（0）
const start=startOffset+getOffsetForElementAtIndex（节点）（startElementIndex）
const end=endOffset+getOffsetForElementIndex（节点）（endElementIndex）
log（`start:${start}，end:${end}`）
}
让mousedowneElement=null
const el=document.getElementById（'outer'）
el.addEventListener（'mousedown'，ev=>（mousedowneElement=ev.target））
el.addEventListener（'mouseup'，ev=>getSelection（ev））

---

这是节点中的偏移量（此处为文本节点）。我无法理解您在此处引用的数字是从何而来的期望值，请添加有关该期望值的更多详细信息。期望值应在不考虑其直接父项（span元素）的情况下出现@markschultheisso我认为您希望内部

span

s被视为

中的一个长字符串，忽略任何嵌套节点等，这是正确的吗？绝对正确@FrancisLeigh。我可以问一下，为什么您将文本嵌套在span中？