Get All The Visible Text(text, Button Label, Drop Down List, Etc) From A Page Using Javascript/jquery Into A Variable

I need to capture the visible text displayed on a webpage: Button labels Drop down list values Text Field labels,(Input box labels, radio button labels) etc Basically everything t

Solution 1:

Try like this:

$("body:visible").child().each(function(i){
    //Here you can play with the elements as you want.
});

Solution 2:

You can use a TreeWalker in order to target only text nodes, and extract their textContent property.

You would have to filter out nodes from <script> and <style> elements though, since I guess you don't want these (otherwise a simple document.body.textContent would do).

functiongetDisplayedText(sourceElement) {
  // we need to filter out textContent of script and style elementsvar filterNodes = function(node) {
    var t = node.parentElement.tagName;
    if (t !== 'SCRIPT' && t !== 'STYLE')
      returnNodeFilter.FILTER_ACCEPT;
  };
  filterNodes.acceptNode = filterNodes; // IE doesn't like {acceptNode:...} object// input value hackdocument.querySelectorAll('input:not([type="file"]):not([type="color"]):not([type="checkbox"])')
  .forEach(function(i){
    i.textContent = ''; // clean up previous calls?
    i.appendChild(document.createTextNode(i.value))
  });
  var treeWalker = document.createTreeWalker(
    sourceElement, // walk from the sourceElementNodeFilter.SHOW_TEXT, // walk only through text nodes
    filterNodes,
    false
  );

  var str = ''; // will hold all our text nodeswhile (treeWalker.nextNode())
    str += treeWalker.currentNode.textContent;

  return str;
}
console.log(getDisplayedText(document.body));

<!-- Dummy content --><divid="Content"><divid="Panes"><div><h2>What is Lorem Ipsum?</h2><p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
        specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
        recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div><script>var shoulNotBeInTheResult = this;
    </script><div><h2>Why do we use it?</h2><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
        here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
        Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p></div><br><style>
      .shouldNotBeThereEither {}
    </style><div><h2>Gimme an <inputtype="text"value="Example"></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt sit amet arcu a mollis. Aliquam nunc nisl, aliquam sed consequat fermentum, pulvinar vitae risus. Nullam aliquam semper sodales. Vivamus dictum nisl risus, sed dignissim mauris
        accumsan et. Integer nec mi ipsum.</p><p> Nullam volutpat tristique sapien, non rutrum dolor porta ut. Nam commodo ultricies magna non auctor. Aenean nec hendrerit libero. Sed scelerisque a dolor sed commodo. Vivamus maximus libero ut elementum viverra. Donec ut massa quam. Nullam vitae
        nisl libero. Nullam turpis odio, convallis lacinia leo quis, viverra lacinia lectus. Mauris id turpis consectetur leo ultrices cursus at sit amet sapien. Vestibulum convallis arcu ipsum, sed vulputate risus condimentum at.</p></div></div></div>