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 this feature, i have written the following method.

sel = window.getSelection(); var range = sel.getRangeAt(0); var span = document.createElement('span'); span.className = "highlight" + color; range.surroundContents(span); 

This is working fine if you choose a text with no html tag, but when the text has any html tag in between, it is giving error

Failed to execute 'surroundContents' on 'Range': The Range has partially selected a non-Text node.

How to solve this problem. Is it possible to highlight the same separately for each part(divided by html tags)?

Answer 1

See Range.extractContents:

document.getElementById('execute').addEventListener('click', function() {      var range = window.getSelection().getRangeAt(0),          span = document.createElement('span');        span.className = 'highlight';      span.appendChild(range.extractContents());      range.insertNode(span);  });

.highlight { background-color: yellow; }

<div id="test">      Select any part of <b>this text and</b> then click 'Run'.  </div>    <button id="execute">Run</button>