How do I get just the visible text with JQuery (or Javascript)
<p>I have website that converts <a href="http://nihongo.j-talk.com/kanji/?demo=1" rel="nofollow">Japanese Kanji into romaji (roman letters)</a>:</p>

<p>and the output shows and hides with CSS what the user needs to see depending on their input criteria. For example:</p>

<p><code>&lt;div id="output"&gt;&lt;span class="roman"&gt;watashi&lt;/span&gt; &lt;span class="english"&gt;I&lt;/span&gt;&lt;/div&gt;</code></p>

<p>The interface allows the user to flip between and output of <em>watashi</em> or <em>I</em> depending on what they want to see. The CSS hides one or the other using JQuery and a toggle button. (the hiding mechanism involves simple adding a class to the body and letting CSS do its thing).</p>

<p>The problem is that when users copy/paste the text into Word it copies everything. So I decided to use a system to copy paste the text using Javascript and JQuery, but the problem repeats itself:</p>

<p><strong>$('#output').text()</strong> outputs <em>watashi I</em> even if <em>I</em> is invisible on the page itself
rather than <em>watashi</em>. Is there any way to get just the visible text?</p>
