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

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

1 个答案: