如何解析呈现的HTML中的视觉连贯文本？

Question

假设我们可以通过Javascript（例如，加载页面时的开发者控制台）访问渲染的DOM。

我想从节点中提取文本的方式类似于我们人类直观地解释内容。

示例：

<div>
  <span>This</span>
  <span>Text</span>
  <div>
    <span>belongs together</span>
  </div>
</div>

如果视觉上呈现连贯的文字，我的算法应该能够将该文字识别为一个簇。

因此它应该输出："This text belongs together"而不是["this, "text", "belongs together"]

任何想法如何进行？

我考虑过为每个文本节点计算boundingRect并应用一些以视口尺寸为参考点的聚类算法。

Answer 1

您可以使用getElementsByTagName或getElementsByClassName获取元素，这将返回elements数组，并且您需要为每个元素使用循环。在javascript中，使用innerText属性获取元素中的文本。

var msg = "";
var els = document.getElementsByTagName("span");
for(i = 0; i < els.length; i++){ 
    msg += els[i].innerText;
}
console.log(msg);

Answer 2

您使用边界矩形并将其关联的想法是一个好主意。

您可能会对Chrome中的spatial_navigation.cc这个文件感兴趣。在某些浏览器中，“空间导航”是一项功能，其焦点不是按制表键顺序而是在上下左右空间中移动。它与您的问题类似，因为它可以在DOM上运行，但关心链接的显示方式，而不是DOM的结构。

如果您检查原始空间导航的基础，则为：

• 边界矩形。
• 与视口相交。
• 矩形是在另一个矩形的右边还是下方。
• 是否有东西被遮盖。

从这些原语中可以构建出更高层次的东西。

与视口相交的更多详细信息：视口是显示内容的区域。您可以将window.innerWidth和window.innerHeight用于视口尺寸（以像素为单位），并计算是否有可见的物体累积其布局及其父级的布局和滚动偏移；或使用Intersection Observers来确定元素是否在视口中。

有关被遮挡节点的更多详细信息：通常，很难检测到被遮挡节点。 display: none;很简单：这些节点的innerWidth和innerHeight为0。重叠的内容更难：检测内容如何碰撞并确定顶部内容的z索引。最难的是接近透明的内容， 低对比度的内容，以及经过大量过滤或转换的内容。

如果遇到很多棘手的情况，捕获屏幕并对其执行OCR可能会更简单。这利用了浏览器的渲染管道来进行所有转换和分层。您可以在图像中找到文字；缺点是getDisplayMedia API尚未在所有浏览器中都起作用，并且会提示用户中断。

您仍然可以寻求OCR算法的启发。 OCR必须执行类似的问题：一旦识别出本地化字符，就必须将其放入文本行中。