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

2019年7月28日 179次阅读

我制作了一个区域选择器工具,在屏幕上制作一个矩形并给出坐标(顶部,左侧,宽度和高度).基本上我想在该矩形内获得所有(且唯一的)可见文本.它也应该是确切的文字,没有重复.

这就是我制作该地区的方式：

《javascript – 获取边界矩形中的所有文本》

我正在尝试这样的事情：

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

但它获得了许多我不想要的文本,例如来自符合条件但在矩形之外的元素的文本.

我有什么想法可以做到这一点？

最佳答案 您应该能够获得完全在选择内部的元素,如评论中所述,对代码的更改很少.基本上你会得到选择中左上角的元素.您需要确保右下角也在选择范围内：

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