在边界矩形中获取所有文本

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;
       }
  }
}