How do I get just the visible text with JQuery (or Javascript)

Question

I have website that converts Japanese Kanji into romaji (roman letters):

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

<div id="output"><span class="roman">watashi</span> <span class="english">I</span></div>

The interface allows the user to flip between and output of watashi or I 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).

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:

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

Answer 1

Use the :visible selector of Jquery

In your case I think you want to do:

$('#output').children(":visible").text()

Answer 2

Instead of hiding a span, remove the span element and keep a reference to it. When the user clicks on the toggle button, remove the other one and insert the one you kept a reference to. The user won't be able to select something that isn't in the DOM anymore.