CSS / JavaScript: get user-visible element text

Question

Suppose I have the following HTML:

<div id="test"> <span style="display:inline;">foo</span> <span style="display:none;">bar</span> <span style="display:inline;">baz</span> </div> 

.. is there any way in JavaScript for me to get the output of "foo baz" (not "foo bar baz")?

$('test').textContent returns the last, and innerHTML returns the equivalent.

I don’t care if the method used is hacker or devious, and can deal with it if it depends on the browser or requires Flash.

However, it should not require anything other than JS or Flash, it should not require any user interaction, and it should not return a "bar".

Ideas?

Answer 1

You can do this, but note that it will not have a place similar to your example, because there is no place in the markup:

 $("#test :visible").text() 

Here's an alternative, for example, your example highlighted for each range:

 var s = new Array(); $("#test :visible").each(function() { s.push($(this).text()); }); alert(s.join(' '));