title: html - selection range - getting the range + starting node + ending node + distance
body: <p>From my <a href="https://stackoverflow.com/questions/2950038">previous question</a> for selecting specific html text, I have gone through <a href="http://www.quirksmode.org/dom/range_intro.html" rel="nofollow noreferrer">this link</a> to understand range in html string.</p>
  
  <p>For selecting a specific text on html page. We need to follow this steps.</p>
  
  <p>Assumed HTML:</p>
  
  <pre><code>&lt;h4 id="entry1196"&gt;&lt;a
      href="http://radar.oreilly.com/archives/2007/03/call_for_a_blog_1.html"
      class="external"&gt;Call for a Blogger's Code of Conduct&lt;/a&gt;&lt;/h4&gt;
  
  &lt;p&gt;Tim O'Reilly calls for a Blogger Code of Conduct. His proposals are:&lt;/p&gt;
  
  &lt;ol&gt;
      &lt;li&gt;Take responsibility not just for your own words, but for the
          comments you allow on your blog.&lt;/li&gt;
      &lt;li&gt;Label your tolerance level for abusive comments.&lt;/li&gt;
      &lt;li&gt;Consider eliminating anonymous comments.&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>java script to make selection by range</p>
  
  <pre><code>var range = document.createRange();  // create range
  var startPar = [the p node];         // starting parameter 
  var endLi = [the second li node];    // ending parameter
  range.setStart(startPar,13);         // distance from starting parameter.
  range.setEnd(endLi,17);              // distance from ending parameter
  range.select();                      // this statement will make selection
  </code></pre>
  
  <p>I want to do this in invert way. I mean, assume that selection is done by user on browser (safari). My question is that How can we get starting node (as we have 'the p node' here) and ending node (as we have 'the second li node' here) and the range as well (as we have 13,17 here)?</p>
  
  <p>Edit : my efforts (From <a href="https://stackoverflow.com/questions/2887101">this question</a>)</p>
  
  <pre><code>    var sel = window.getSelection();
  
      if (sel.rangeCount &lt; 1) {
          return;
      }
      var range = sel.getRangeAt(0);
      var startNode = range.startContainer, endNode = range.endContainer;
  
      // Split the start and end container text nodes, if necessary
      if (endNode.nodeType == 3) {
          endNode.splitText(range.endOffset);
          range.setEnd(endNode, endNode.length);
      }
  
      if (startNode.nodeType == 3) {
          startNode = startNode.splitText(range.startOffset);
          range.setStart(startNode, 0);
      }
  </code></pre>
  
  <p>But, yet I am confused about getting like, if selected is first paragraph or second or third, or selected is in first heading or second heading or what....</p>