I would like to obtain the text that is currently on screen.
This should be the exact text that is visible, independent of html tag boundaries. Getting <p> tags that are partially visible is not good enough.
Example input:
<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>
Desired output:
BBBBBBBCCCCCCC
Solution attempt:
I could only find out how to do visibility checks on the level of dom elements. So my solution attempt is to add lots of dummy elements:
<p>
<span>A</span><span>A</span><span>A</span><span>A</span><span>A</span><span>A</span>
</p>
At this point, my question becomes a duplicate of this one: How can I tell if a DOM element is visible in the current viewport?
It is then simple to iterate through dom elements, check whether they are visible and use their text content if yes.
The problem is that the text is really long and I would like to have visibility checks on the level of individual words. I've created a simple test case: a single p tag with 1000 spans inside. Each span has a small bit of random text. On my old android, scrolling is super laggy.