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

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