Resolved: How to find the visible text from a div

In this post, we will see how to resolve How to find the visible text from a div


I want to find the text that is visible on screen from a div (i.e. that is not clipped by the scrollbar regions). Is there a way to see if a child node part is visible on screen? I can’t find anywhere to even find the node coordinates, let alone how to see coords of the word parts of a node.

Any thoughts?

Best Answer:

Ok – I think I’ve come up with a work around –
  1. Insert some invisible tags (<a class='split'></a>) every 200 visible (non-tag) characters

  2. Use a lazy-load technique to scan for the “splits” and ask if they are visible

  3. Then using the knowledge of which splits are visible and which aren’t I can guess which words are likely to be in the visible section of the container (within 200 characters).

     function doAddSplits() {
         var elem=document.getElementById('mydiv');
         var intag=false;
         var c;
         var step=100;
         var splitElemTx='<a class=\'split\'></a>';
         var n=0;
         for(var p=0; p<elem.innerHTML.length; p++) {
             if ( c=='<' ) intag=true;
             else if ( c=='>' ) intag=false;
             else {
                 if ( n>=step && !isAlphabetic(c)) {
     function doScrollDiv(){
         var splits=document.getElementsByClassName('split');
         var container=document.getElementById('mydiv');
         for(var s=0; s<splits.length; s++){
             if(isInViewport(splits[s], container)){
     function isInViewport(el, containerElem){
         var rect = el.getBoundingClientRect();
         var container = containerElem.getBoundingClientRect();
         return (
             rect.bottom >= &&
             rect.right >= container.left &&
    <= (container.bottom) &&
             rect.left <= (container.right)

If you have better answer, please add a comment about this, thank you!