外接矩形内のすべてのテキストを取得

Question

私は、画面上で矩形を作成し、座標（上、左、幅、高さ）を与える領域選択ツールを作った。基本的には、その矩形の中にすべての（そして唯一の）目に見えるテキストを入れたいと思います。また、正確なテキストでなければなりません。繰り返しはありません。

これは私が地域を作る方法です。

私はこのような何かしようとしている：

  var top = parseInt($('#selectionn33').css('top')) 
      var left = parseInt($('#selectionn33').css('left')) 
      var width = parseInt($('#selectionn33').css('width')) 
      var height = parseInt($('#selectionn33').css('height')) 

      var items = document.getElementsByTagName("*"); 
      for (var i = items.length; i--;) 
      { 
       var rect = items[i].getBoundingClientRect(); 
       if(rect.top >= top && rect.top <= (top + height)) 
       { 
        if(rect.left >= left && rect.left <= (left + width)) 
        { 
         console.log(items[i].textContent); 
        } 
       } 
      } 

をしかし、それは私が望んでいない大量のテキストを取得し、同様に条件を満たすが矩形の外側にある要素からのテキスト。

どうすればいいですか？

Answer 1

コメントに記述されているように、コードにほとんど変更を加えずに、選択範囲内の要素をすべて取得することができます。基本的には、選択範囲内の左上隅にある要素を取得しています。

var $selection = $('#selection33'); 
var top = parseInt($selection.css('top')); 
var left = parseInt($selection.css('left')); 
var right = left + parseInt($selection.css('width')); 
var bottom = top + parseInt($selection.css('height')); 

var items = document.getElementsByTagName("*"); 
for (var i = items.length - 1; i >= 0; i--) { 
    var rect = items[i].getBoundingClientRect(); 
    if(
    rect.top >= top && rect.bottom <= bottom && 
    rect.left >= left && rect.right <= right 
) { 
     try 
     { 
      found = items[i].childNodes[0].nodeValue; 
     } 
      catch(err) 
     { 
      found = items[i].textContent; 
     } 
    } 
}