jquery - get text for element without children text

Question

for example we have this file

<div id="mydiv">
    some text here 
    <div id="inner div">
         text for inner div
    </div>
</div>

i need to get #mydiv text only with some code like this :

alert($('#mydiv').text());  // will alert "some text here"

So you want *all* child text nodes, without more deeply nested text nodes? — , Jul 06 '12 at 12:33

score 51 · Accepted Answer · answered Jul 06 '12 at 12:26

51

hey try this please": http://jsfiddle.net/MtVxx/2/

Good link for your specific case in here: http://viralpatel.net/blogs/jquery-get-text-element-without-child-element/ (This will only get the text of the element)

Hope this helps, :)

code

jQuery.fn.justtext = function() {

    return $(this).clone()
            .children()
            .remove()
            .end()
            .text();

};

alert($('#mydiv').justtext());

answered Jul 06 '12 at 12:26

Tats_innit

33,991
10
71
77

7

+1 for using .end(). Never knew that existed and now it's hella-usefull. – Grinn Aug 07 '12 at 18:43
@Grinn saweet bruv, yea there are some jq apis, which are awesome to use but not widely used, :) funny that huh, thanks for plus 1. – Tats_innit Aug 07 '12 at 19:10
this seems to crash in Win XP IE 8, something around `clone` or `children` still trying to figure this out.. – roberthuttinger Mar 20 '14 at 15:08

score 25 · Answer 2 · edited May 23 '17 at 12:01

25

The currently accepted answer is pretty horrible in terms of performance, so I felt obligated to write a more lightweight one:

$.fn.mytext = function() {
    var str = '';

    this.contents().each(function() {
        if (this.nodeType == 3) {
            str += this.textContent || this.innerText || '';
        }
    });

    return str;
};

console.log($('#mydiv').mytext());

edited May 23 '17 at 12:01

Community

1
1

answered Dec 31 '13 at 04:26

Ja͢ck

170,779
38
263
309

1

Much better! I was looking for a way to iterate over each child of selected element, and I didn't know about `contents()`, thanks! – mr.b Oct 16 '14 at 23:07

score 5 · Answer 3 · answered Nov 15 '18 at 14:28

Like Ja͢ck's answer but no need for iterating explicitly (via .each()) and collecting textContents:

$('#mydiv').contents().filter(function(){return this.nodeType === 3}).text()

OR, if you can use arrow functions:

$('#mydiv').contents().filter((i, el) => el.nodeType === 3).text()

jquery - get text for element without children text

3 Answers3

Linked

Related