title: How do I get just the visible text with jQuery (or Javascript)?
body: <p>I have website that converts <a href="http://nihongo.j-talk.com/kanji/?demo=1" rel="nofollow noreferrer">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=&quot;output&quot;&gt;&lt;span class=&quot;roman&quot;&gt;watashi&lt;/span&gt; &lt;span class=&quot;english&quot;&gt;I&lt;/span&gt;&lt;/div&gt;</code></p>
  <p>The interface allows the user to flip between and output of <code>watashi</code> or <code>I</code> 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><code>$('#output').text()</code> outputs <code>watashi I</code> even if <code>I</code> is invisible on the page itself rather than <code>watashi</code>. Is there any way to get just the visible text?</p>