How to get text inside of container that is not part of children

Question

Let's have html code like this:

<div id="d1"><span>1.</span>Hallo <span>Kitty, </span><div>How are you?</div></div>

It is just example, there may be different children elements inside.

How can I get text inside of d1 container that is not part of children elements?

For the example above it shold be just "Hallo "

Related: http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery — aaaaaa, Oct 10 '12 at 13:10

rahul · Answer 1 · 2012-10-10T13:22:11.553

6

this will work for you

$('#d1')
  .contents()
  .filter(function() {
    return this.nodeType == Node.TEXT_NODE;
}).text()

or you can use this as suggested below for old browser support also

var text = $("#d1").contents().filter( function() {
    return this.nodeType === 3;
}).text();

edited Oct 10 '12 at 13:22

answered Oct 10 '12 at 13:05

rahul

2

Note that that `Node` (and therefore `Node.TEXT_NODE`) is not defined in IE7 or IE8, so this code will fail in those browsers. You should define the constants yourself if you want to "modernize" those browsers, or use the literal '3'. `Node` is defined as of IE9. – manzoid Oct 10 '12 at 13:20

score 5 · Accepted Answer · answered Oct 10 '12 at 13:06

5

var text = $("#d1").contents().filter( function() {
    return this.nodeType === 3;
}).text();

answered Oct 10 '12 at 13:06

Esailija

score 2 · Answer 3 · answered Oct 10 '12 at 13:09

2

Improving on halex's trick, you can take advantage of the fact that .children() finds only DOM nodes and ignores text nodes:

var text = $('#d1').clone().children().remove().end().text(); // string "Hallo "

...but I prefer the .nodeType technique, because it's more clear what you're doing.

answered Oct 10 '12 at 13:09

Blazemonger

1

Thank you for improving my version. I understood the question wrong and thought OP wants the new content of `#d1` to be `text` :) – halex Oct 10 '12 at 13:13

3 Answers3