javascript - 如何解析呈现的 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 并应用一些以视口(viewport)尺寸作为引用点的聚类算法。

Answer 1

您使用边界矩形并将它们关联起来的想法很好。

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

如果您检查构建空间导航的基元，它们是:

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

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

关于与视口(viewport)相交的更多详细信息:视口(viewport)是呈现内容的区域。您可以使用 window.innerWidth 和 window.innerHeight 作为以像素为单位的视口(viewport)尺寸，并计算某些东西是否可见，累积它及其父级的布局和滚动偏移；或使用 Intersection Observers找出元素是否在视口(viewport)中。

关于模糊节点的更多细节:一般来说，检测模糊节点很困难。 display: none; 是一个简单的案例:这些节点的 innerWidth 和 innerHeight 均为 0。重叠的内容更难:检测内容如何碰撞和确定顶部内容的 z-index。最难的是近乎透明的内容， 低对比度内容，以及经过严格过滤或转换的内容。

如果您遇到很多像这样棘手的情况，捕获屏幕并在其上执行 OCR 可能会更简单。这利用了浏览器的渲染管道来完成所有的转换和分层；你可以在图片中找到文字；等缺点是getDisplayMedia API 尚不能在所有浏览器中运行，它会通过提示打断用户。

您仍然可以从 OCR 算法中寻找灵感。 OCR 必须执行类似的问题:一旦识别出本地化字符，就必须将它们放入文本行中。