Get selected text with highlighted text with tag in reactjs

Question

my <span class="highlight">highlighted</span> word

In above selected text include html tag. When I use window.getSelection() returns only the text without tag my highlighted word but I need entire selected text with <span> tag as above. Could anyone please help me.

Answer 1

In order to get the inner HTML of a given tag you shoul try to use innerHTML prop. EG:

For a tag:

<p id="high">My <span class="highlight">Highlighted</span></p>

You can store the node in a variable like:

const text = document.getElementById("high");

And if you access the prop innerHTML it will return you the value inside the p tag

console.log(text.innerHTML)

Result: "My <span class="highlight">Highlighted"

Answer 2

Can try something like this

   window.getSelection().anchorNode.parentNode

Answer 3

I got solution by using

window.getSelection().getRangeAt (0).cloneContents ()