title: Grabbing HTML from rectangle
body: <p>What i would like to do is to allow the user to draw a rectangle on top of a website, and grabbing all the html he sees in that rectangle. </p>
  
  <p>I know this can't be done perfectly but I was wondering how well it could be done.</p>
  
  <p>i was thinking of doing something like this</p>
  
  <pre><code>function getTagsInArea(p1, p2){
      var ret = {}
      for(x=p1.x;x&lt;p2.x;x+=10){
          for(y=p1.y;y&lt;p2.y;y+=10){
              var el = document.elementFromPoint(x,y);
              if(typeof ret[el] =='undefined'){
                  ret[el]=el;
              }
              else{console.log('not appending '+el);}
          } 
      } 
      return ret;
  }
  </code></pre>
  
  <p>This gives me more or less the tags in that area. I wonder if there is a generic way to build trees from these tags and output html.</p>
  
  <p>I am looking for something like a DocumentFragment. Such as selectionContents  from this snippet:</p>
  
  <pre><code>var range = window.getSelection().getRangeAt(0);
  var selectionContents = range.extractContents();
  </code></pre>
  
  <p>Is there an obvious way to do this? 
  One of the problems so far is that some of the tags i get using the above func are 'body' and 'div id="page"' stuff, which contain what i am looking for. Any solution would need to figure out how to take only those parts of the surrounding tags taht are needed.</p>
  
  <p>For instance, if i have a long paragraph and recntagled half of it, i want only the text in my selection to be returned.</p>
  
  <p>Hope this question makes sense. </p>