title: Select only text visible on webpage, from DOM parent element
body: <p>Inside a content script of my work-in-progress Firefox add-on, I have a variable named <code>element</code> containing the reference toward a generic DOM element. This element may contain children or grandchildren, which in turn may contain text nodes visible on the rendered webpage.</p>
  
  <p>My goal is to extract all the visible text contained in this DOM <code>element</code>. Internet Explorer has the <a href="http://msdn.microsoft.com/en-us/library/ie/ms533899%28v=vs.85%29.aspx" rel="nofollow">innerText</a> method, which does exactly what I need but, unfortunately, that is not a standard method and does not work/exist outside of IE.</p>
  
  <p>Firefox comes with a similar <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent" rel="nofollow">textContent</a> property which closely imitates <code>innerText</code>, but fails to filter off invisible text contained within tags such as <code>&lt;script&gt;</code> and <code>&lt;style&gt;</code>.</p>
  
  <p>Looking for a jQuery solution, I believe I'm close to find one; I've come to:</p>
  
  <pre><code>text = $(element).filter(":visible").text();
  </code></pre>
  
  <p>This statement correctly extracts the text contained in all the children of <code>element</code>, but invisible text from <code>&lt;script&gt;</code> tags is not filtered off. Googling around, I couldn't find any reference solution to the problem.</p>