Javascript selected text highlighting prob

Question

I have a html page with text content. On selecting any text and pressing the highlight button, I can change the style of the selected text to highlight the same. To implement th

Answer 1

try this:

newNode.appendChild(range.extractContents())

according to MDN:

Partially selected nodes are cloned to include the parent tags necessary to make the document fragment valid.

Whereas Range.surroundContents:

An exception will be thrown, however, if the Range splits a non-Text node with only one of its boundary points. That is, unlike the alternative above, if there are partially selected nodes, they will not be cloned and instead the operation will fail.

Didn't test, but...