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

the other solutions did not give me what I needed.

Short Answer

my answer is :

$('#output *:not(:has(*)):visible').text()

plunkr

TL;DR

The problem with marcgg's solution

You should not ask the text of all element under some root element..

why? - it will repeat output and ignore hidden flag

lets look at a simple example

<div id="output" class="my-root">
    <div class="some-div">
         <span class="first" style="display:none"> hidden text </span>
         <span class="second" > visible text </span>
    </div>
<div>

now if I do $('#output').children(":visible").text()

I will get .some-div and .second.. when in fact .some-div is of no concern to me..

when I ask for text() on those elements, .some-div will return the hidden text as well..

so technically marcgg's solution is wrong IMHO...

The reason for my answer

Now, in order to properly answer the question, we have to make an assumption. One that, for me, seems reasonable enough.

The assumption is that text only appears in leaf elements..

So we won't see something like this:

<div id="output" class="my-root">
    <div class="some-div">
         <span class="first" style="display:none"> hidden text </span>
         <span class="second" > visible text </span>
    </div>

    some text here.. 

<div>

Why does this assumption seem reasonable to me? two reasons:

• Because it is hard to maintain a page that is constructed this way - and with time people with experience learn that and avoid it.
• It is easy to convert your html to such a structure. just wrap parents' text with spans. So even if this assumption does not exist right now, it is easy to get there.

With that assumption, what you want to do is request all leaf elements (elements without children) , filter out the visible, and ask for their text..

$('#output *:not(:has(*)):visible').text()

This should generate the correct result.

Gotta have text outside leaf element?

the comments suggest sometimes you just got to have text outside leaf element

<div> This is some <strong style="display:none"> text </strong>  </div>

As you can see, you have <strong> as a leaf and it is common to have text outside it like in this example.

You could go around it with the workaround I suggest above.. but what if you can't?

You can clone the dom and then remove all hidden elements. The problem here is that in order for :visible selector or :hidden selectors to work, I must have the dom element on the document (which means actually visible to the user). And so, this method comes with some side effects, so be careful.

Here is an example

for this html

 <div id="output" class="my-root">
     <span>
         some text <strong style="display:none">here.. </strong>
     </span>
</div>

This javascript works

$(function(){
     var outputClone = $('#output').clone();
    $('#output :hidden').remove(); 
    console.log($('#output').text()); // only visible text
    $('#output').replaceWith(outputClone);
    console.log($('#output').text()); // show original state achieved. 
})

see plunker here

as mentioned - side effects may appear like a momentary flicker, or some initialization script that should run.. some may be avoided with some original thinking (div with size 1px/1px to contain the clone alongside original content?) depending on your scenario.

Answer 2

Use the :visible selector of jQuery

In your case I think you want to do:

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

Answer 3

Try this in modern browsers (here 'element' is a non-JQuery DOM object):

function getVisibleText(element) {
    window.getSelection().removeAllRanges();

    let range = document.createRange();
    range.selectNode(element);
    window.getSelection().addRange(range);

    let visibleText = window.getSelection().toString().trim();
    window.getSelection().removeAllRanges();

    return visibleText;
}

then:

getVisibleText(document.getElementById('output'));

Answer 4

Guy has the correct answer.

However, I was dealing with a "this" object, so to get his answer to work you need to use the following syntax...

$('*:not(:has(*)):visible', this).text()

Answer 5

var lookup = function(element, text) {
    //DFS Recursive way of finding text on each level
    //Visible only works on elements that take up space(i.e. not fixed position elements)
    var results = element.children(':visible');

    //Look at the text at each level with the children removed
    var newText = '';
    results.each(function(index, value) {
        newText += $(value).clone()
            .children()
            .remove()
            .end()
            .text();
    });

    var moreResultText = '';
    results.each(function(index, value) {
        moreResultText += lookup($(value), text);
    })

    if (results.length > 0) {
        return text + newText + moreResultText;
    } else {
        return text;
    }
};

lookup($('#output'), ''));

Most of the other functions fall apart when run on large sections of a page, this should be a more accurate way to determine what is actually displayed to the user, without corrupting the page, and without returning text that is not visible to the user.

Be careful of course, this does not preserve any sense of formatting, and the spacing of the output may not be correct between elements. Also, it probably does not correctly order the returned text, in these aspects its usages will be limited. Another consideration is the real definition of visible is a little hard to nail down, but for this example I accept that ":visible" works for most common cases.

I use it to check if a page contains visible text(just run it on the body element), but it would probably work for this example too.

Answer 6

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.