在從Z4C4C4AD5FCA2E7A3F74DBB1CED00381AA4Z段落中選擇文本上，使用Z05B8C74CBD96FBD96FBF2DE4C1A352702FBF4Z.getSelection（）

Question

我正在嘗試 HTML 段落中的 select 文本並獲取索引范圍。

要獲取范圍值，我使用以下代碼

{
startIndex = window.getSelection().getRangeAt(0).startOffset;
endIndex = window.getSelection().getRangeAt(0).endOffset;
}

下面是 HTML 段。

<p>Pellentesque <b>habitant</b> morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

現在當我 select 單詞“habitant”時 startOffset() 返回 0 作為新/子標簽開始但我需要從段落開始的索引

Answer 1

它返回 0 因為工作“居民”被包裹在另一個節點中，所以錨節點不會是大廳段落，它只是節點<b>haitant</b>你可以通過刪除標簽來解決這個問題<b> 。

<p class="text">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

另一種解決方法是在父節點內搜索選定的單詞

<p class="text">Pellentesque <b>habitant</b> morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>



const getSelectedTextIndex = () => {
    const selectedText = window.getSelection().toString()
    startIndex = document.querySelector('.text').innerText.indexOf(selectedText)
    endIndex = startIndex + selectedText.length
}