将 window.getSelection().extentOffset 引用到某个 HTML 元素

Question

以下代码找出用户选择的开始，如果用户例如选择文本 "text"，这是“18”。

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

... 并且用户再次选择 "text"，选择的开始将为“1”，因为它从 </em> 标记处开始计数。

有没有办法将 getSelection 方法引用到某个元素（在本例中为 #mytext）以便它开始计算此指定元素的开头而不是最后一个中间节点？

Answer 1

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

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

这意味着同一 selection 的偏移量可以倒序排列，具体取决于用户从何处开始 selection。只是要记住一些事情。

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

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

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

据我所知，没有办法让select离子从父节点<p>的开头开始计数。你必须自己做：你可以计算一次所有文本节点的长度。然后确定 selection 开始的文本节点，并将偏移量添加到所有先前节点的长度总和。我必须更多地了解您要完成的工作才能为您提供更多建议。

将 window.getSelection().extentOffset 引用到某个 HTML 元素

Refer window.getSelection().extentOffset to a certain HTML element

javascript

html

text

selection

getselection