在从Z4C4C4AD5FCA2E7A3F74DBB1CED00381AA4Z段落中选择文本上，使用Z05B8C74CBD96FBD96FBF2DE4C1A352702FBF4Z.getSelection（）

Question

I am trying select text from a HTML paragraph and get the index range.

To get the range values, i'm using the below code

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

Below is the HTML paragraph.

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

Now when i select the word "habitant" the startOffset() is returning 0 as a new/child tag started but i need the index starting from the paragraph

Answer 1

It returns 0 because the work "habitant" is wrapped inside another node so the anchor node won't be the hall paragraph it'll be just the node <b>haitant</b> you can either fix this by removing the tag <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>

another workaround will be to search for the selected word inside the parent node

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