Question

以下代码找出用户选择的开始，如果用户例如选择文本＆＃34; text＆＃34;，这是＆＃34; 18＆＃34;。

<p>I am some example text, you don't have to read it :P</p>

<script>
function findsel(){
    console.log(window.getSelection().baseOffset);
    // Returns 18
}
</script>

如果段落中断......

<p id="mytext">I am some <em>example</em> text, you don't have to read it :P</p>

<script>
function findsel(){
    console.log(window.getSelection().baseOffset);
    // Returns 1
}
</script>

...并且用户选择＆＃34; text＆＃34;再次，选择的开头将是＆＃34; 1＆＃34;，因为它从</em>标签开始计数。

有没有办法将getSelection方法引用到某个元素（在这种情况下为#mytext），所以它开始计算这个指定元素的开头而不是最后一个中间节点？

Answer 1

Selection返回的getSelection()对象引用了两个节点：

getSelection().anchorNode是包含选择开始位置的节点（即用户最初停止的位置）。
getSelection().focusNode是包含选择结束位置的节点（即用户释放鼠标的位置）。

这意味着相同选择的偏移可以按相反的顺序排列，具体取决于用户开始选择的位置。请记住一些事情。

现在回答你的问题：在html中，所有文本都是文本节点。在您的示例中，有三个文本节点：

I am some
example
text, you don't have to read it :P

因此，无论您选择什么，focusNode和anchorNode都将指向这些文本节点中的一个（或两个），而focusOffset和anchorOffset将在开头计数相应文本节点的。

据我所知，没有办法让选择在父节点<p>的开头计数。您必须自己完成：您可以计算一次所有文本节点的长度。然后，您确定选择开始的文本节点，并将偏移量添加到所有先前节点的长度总和。我必须更多地了解你想要达到的目标，以便为你提供更多建议。

将window.getSelection（）。extentOffset引用到某个HTML元素

1 个答案: