javascript - HTML，如何在视口中获取准确的文本（不仅仅是与 clientRect 重叠的 p 标签）？

Question

我想获取当前屏幕上的文本。
这应该是可见的确切文本，与 html 标记边界无关。获取<p>部分可见的标签是不够的。

示例输入：

<p>
AAAAAAA (lots of text, above current viewport)
BBBBBBB (lots of text, inside current viewport)
</p>
<p>
CCCCCCC (lots of text, inside current viewport)
DDDDDDD (lots of text, below current viewport)
</p>

期望的输出：

BBBBBBBCCCCCCC

解决方案尝试：

我只能找出如何对 dom 元素的级别进行可见性检查。所以我的解决方案尝试是添加很多虚拟元素：

<p>
<span>A</span><span>A</span><span>A</span><span>A</span><span>A</span><span>A</span>
</p>

在这一点上，我的问题变成了这个问题的重复：如何判断 DOM 元素在当前视口中是否可见？

然后很容易遍历 dom 元素，检查它们是否可见，如果是则使用它们的文本内容。

问题是文本真的很长，我想对单个单词的级别进行可见性检查。我创建了一个简单的测试用例：内部有 1000 个跨度的单个 p 标签。每个跨度都有一小部分随机文本。在我的旧 android 上，滚动非常缓慢。

标签： javascripthtmlcsstypescriptdom