时间戳

首页 > 解决方案 > 如何在呈现的 HTML 中解析视觉上连贯的文本？

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

问题描述

假设我们可以通过 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 并应用一些以视口尺寸作为参考点的聚类算法。

标签： javascripthtmldom

解决方案

您使用边界矩形并将它们关联的想法是一个很好的想法。

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

如果您检查构建空间导航的原语，它们是：

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

从这些原语中建立了更高层次的东西。

有关与视口相交的更多细节： 视口是呈现内容的区域。您可以使用window.innerWidth和window.innerHeight作为视口尺寸（以像素为单位）并计算某些东西是否可见，累积它及其父项的布局和滚动偏移量；或使用Intersection Observers来确定元素是否在视口中。

关于被遮挡节点的更多细节：一般来说，检测被遮挡的节点是很困难的。display: none;是一个简单的例子：这些节点将具有0innerWidth和innerHeight0。重叠的内容更难：检测内容如何碰撞并确定顶部内容的 z-index。最难的是近乎透明的内容、低对比度的内容以及经过大量过滤或转换的内容。

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

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

推荐阅读