将window.getSelection（）。extentOffset引用到特定的HTML元素

Question

下面的代码找出用户选择的开始，如果用户选择文本“文本”，这是“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> 

...和用户选择 “文本” 再次，选择的开始将是 “1”，因为它开始计数在</em>标签处。

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

Answer 1

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

• getSelection().anchorNode是含有其中该选择开始的位置的节点（即，在用户的鼠标击落最初）。

• getSelection().focusNode是包含选择结束位置（即用户释放鼠标的位置）的节点。

这意味着，相同选择的偏移量可以是相反的顺序，这取决于用户开始选择的位置。只是要记住。

现在你的问题：在html中，所有文本都是文本节点。在你的榜样，有三个文本节点：

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

所以，无论你选择，focusNode和anchorNode将指向这些文本的一个（或两个）节点，而focusOffset和anchorOffset将在相应文本节点的开始处开始计数。

据我所知，没有办法使选择开始计数在父节点<p>的开始。你必须自己做：你可以计算一次所有文本节点的长度。然后确定选择开始的文本节点，并将偏移量添加到所有先前节点的长度总和中。我将不得不更多地了解你正在努力完成的任务，以给你更多的建议。