title: How can I highlight the text of the DOM Range object?
body: <p>I select some text on the html page(opened in firefox) using mouse,and using javascript functions, i create/get the rangeobject corresponding to the selected text. </p>
  
  <pre><code> userSelection =window.getSelection(); 
   var rangeObject = getRangeObject(userSelection);
  </code></pre>
  
  <p>Now i want to highlight all the text which comes under the rangeobject.I am doing it like this,</p>
  
  <pre><code>  var span = document.createElement("span");
    rangeObject.surroundContents(span);
    span.style.backgroundColor = "yellow";
  </code></pre>
  
  <p>Well,this works fine, only when the rangeobject(startpoint and endpoint) lies in the same textnode,then it highlights the corresponding text.Ex</p>
  
  <pre><code>    &lt;p&gt;In this case,the text selected will be highlighted properly,
         because the selected text lies under a single textnode&lt;/p&gt;
  </code></pre>
  
  <p>But if the rangeobject covers  more than one textnode, then it is not working properlay, It highlights only the texts which lie in the first textnode,Ex</p>
  
  <pre><code> &lt;p&gt;&lt;h3&gt;In this case&lt;/h3&gt;, only the text inside the header(h3) 
    will be highlighted, not any text outside the header&lt;/p&gt; 
  </code></pre>
  
  <p>Any idea how can i make, all the texts which comes under rangeobject,highlighted,independent of whether range lies in a single node or multiple node?
   Thanks....  </p>