Jak získám pouze viditelný text pomocí jQuery (nebo Javascriptu)?

Mám web, který převádí japonské Kanji na Romaji (římská písmena):

a výstup zobrazuje a skrývá pomocí CSS to, co uživatel potřebuje vidět v závislosti na svých vstupních kritériích. Například:

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

Rozhraní umožňuje uživateli přepínat mezi a výstupem watashi nebo I podle toho, co chtějí vidět. CSS skryje jedno nebo druhé pomocí jQuery a přepínacího tlačítka. (mechanismus skrývání zahrnuje jednoduché přidání třídy do těla a ponechání CSS, aby udělalo svou věc).

Problém je v tom, že když uživatelé zkopírují/vloží text do aplikace Word, zkopíruje se vše. Rozhodl jsem se tedy použít systém pro kopírování a vkládání textu pomocí JavaScriptu a jQuery, ale problém se opakuje:

$('#output').text() výstupy watashi I i když I je neviditelný na samotné stránce, nikoli watashi . Existuje nějaký způsob, jak získat pouze viditelný text?

Odpověď

Použijte :visible selector jQuery

Ve vašem případě si myslím, že chcete udělat:

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