Using .text() to retrieve only text not nested in child tags

Question

If I have html like this:

    This is some text
    First span text
    

        

Answer 1

Easier and quicker:

$("#listItem").contents().get(0).nodeValue

Answer 2

This seems like a case of overusing jquery to me. The following will grab the text ignoring the other nodes:

document.getElementById("listItem").childNodes[0];

You'll need to trim that but it gets you what you want in one, easy line.

EDIT

The above will get the text node. To get the actual text, use this:

document.getElementById("listItem").childNodes[0].nodeValue;

Answer 3

Try this:

$('#listItem').not($('#listItem').children()).text()

Answer 4

$($('#listItem').contents()[0]).text()

Short variant of Stuart answer.

or with get()

$($('#listItem').contents().get(0)).text()

Answer 5

Use an extra condition to check if innerHTML and innerText are the same. Only in those cases, replace the text.

$(function() {
$('body *').each(function () {
    console.log($(this).html());
    console.log($(this).text());
    if($(this).text() === "Search" && $(this).html()===$(this).text())  {
        $(this).html("Find");
    }
})
})

http://jsfiddle.net/7RSGh/

Answer 6

jQuery.fn.ownText = function () {
    return $(this).contents().filter(function () {
        return this.nodeType === Node.TEXT_NODE;
    }).text();
};