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

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