title: Get only visible text with jquery
body: <p>Lets say I have some html like this:</p>
  
  <pre><code>&lt;div id="content"&gt;Foo&lt;span style='display:none'&gt;hidden&lt;/span&gt;Bar&lt;/div&gt;
  </code></pre>
  
  <p>In reality this is more complicated and generated by angular using <code>ng-hide</code> and similar. I have a need to get all of the text from the <code>content</code> div that is visible to the user. In this case I would like to get <code>FooBar</code>. </p>
  
  <p><code>$('#content').text()</code> is the closest thing I have found, but that gives me <code>FoohiddenBar</code> in this case. Is there a good way to get just the visible contents of a div? I really need a <code>text()</code> function that skips hidden elements.</p>