Investigations - Web Development

• How can I get plain text visible in the current viewport? - https://stackoverflow.com/questions/62227365/how-can-i-get-plain-text-visible-in-the-current-viewport

  • https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

  • https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver

• https://www.geeksforgeeks.org/how-to-check-a-dom-element-is-visible-in-current-viewport/

• function getVisibleText() {
    const viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    const viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  
    let visibleText = '';
    const elements = document.querySelectorAll('*'); // Select all elements
  
    elements.forEach(element => {
      const rect = element.getBoundingClientRect();
  
      // Check if element is within the viewport
      if (rect.top >= 0 && 
          rect.left >= 0 && 
          rect.bottom <= viewportHeight && 
          rect.right <= viewportWidth) {
        visibleText += element.textContent.trim() + ' '; // Extract text and trim whitespace
      }
    });
  
    return visibleText;
  }
  
  const visibleContent = getVisibleText();
  console.log(visibleContent); 

• function nativeTreeWalker() {
    const viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    const viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  
    let visibleText = '';
      var walker = document.createTreeWalker(
          document.body, 
          NodeFilter.SHOW_TEXT, 
          null, 
          false
      );
  
      var node;
      var textNodes = [];
  
      while(node = walker.nextNode()) {
          const rect = node.parentNode.getBoundingClientRect();
          console.log(node, rect);
  
          // Check if element is within the viewport
          if (rect.width > 0 &&
              rect.height > 0 &&
              rect.top >= 0 && 
              rect.left >= 0 && 
              rect.bottom <= viewportHeight && 
              rect.right <= viewportWidth) {
            visibleText += node.textContent.trim() + ' '; // Extract text and trim whitespace
  
            textNodes.push(node.parentNode);
  
          } else {
              console.log("invisible node", node.parentNode)
          }
      }
      console.log(textNodes);
      console.log(visibleText);
  }

• https://stackoverflow.com/questions/10730309/find-all-text-nodes-in-html-page

• https://stackoverflow.com/questions/6961022/measure-bounding-box-of-text-node-in-javascript

  • https://www.w3.org/TR/cssom-view/#dom-element-getclientrects

• https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback

• ee

Tips

Overridden Native Functions

• https://dev.to/js_bits_bill/how-to-restore-native-browser-code-3e6e

parentNode & parentElement

• https://qiita.com/kasagata/items/ccb860f38e375918be5c

References

aaa

cbc