Get only visible text with jquery

Question

Lets say I have some html like this:

<div id="content">Foo<span style='display:none'>hidden</span>Bar</div>

In reality this is more complicated and generated by angular using ng-hide and similar. I have a need to get all of the text from the content div that is visible to the user. In this case I would like to get FooBar.

$('#content').text() is the closest thing I have found, but that gives me FoohiddenBar in this case. Is there a good way to get just the visible contents of a div? I really need a text() function that skips hidden elements.

Answer 1

create a clone, add it to the DOM (as pointed out by slindberg), remove all hidden elements, and then get the text :

var clone = $('#content').clone();

clone.appendTo('body').find(':hidden').remove();

var text = clone.text();

clone.remove();

FIDDLE