title: selecting text by ignoring inner Elements of div tag javascript
body: <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;script language="javascript"&gt;
  function getSelectionHTML()
  {
      var div = document.getElementById("myDiv");
  
      if (document.createRange) { 
          var textNode=div.firstChild;
          var rangeObj=document.createRange();
          rangeObj.setStart(textNode,0);
          rangeObj.setEnd(textNode,5);
          div .innerHTML = div .innerHTML.replace(rangeObj.toString(), '&lt;span style="background-color: lime"&gt;'+rangeObj.toString()+'&lt;/span&gt;')
      }
  }
  &lt;/script&gt;
  &lt;div id="myDiv"&gt;
  asdf as&lt;b&gt;dfas df asf asdf sdfjk  dvh a sjkh jhcdjkv&lt;/b&gt; iof scjahjkv ahsjv hdjk biud fcsvjksdhf k
  
  &lt;/div&gt;
  &lt;form name="aform"&gt;
  &lt;input type="button" value="Get selection" onclick="getSelectionHTML()"&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Ok. Let me explain -> getSelectionHTML() method is for selection of characters from 0 to 10. I am getting the values by "myDiv" id. but inner bold, italic &amp; other tags are giving me trouble.</p>
  
  <p>In simple words, I just want to make selection of first ten characters (&amp; apply them span tag) which are in "myDiv" tag.</p>
  
  <p>What exactly I am missing?</p>