jQuery InnerText not including sub element

Question

I'm wondering how I would get the text of a nested list item without getting the text of its children i.e.

<ul>
   <li id="node">
      I want this
    <ul>
       <li>
          I don't want this
        </li>
    </ul>
    </li>
</ul>

Now using jQuery with $('#node').text() gets me all text, where as I just want the "I want this" string.

score 10 · Answer 1 · answered Sep 25 '09 at 12:03

10

Tim's solution will work. If your markup is always fixed in that format and you only need to read that first stretch of text up to the child element, you could even get away with simply:

node.firstChild.data

answered Sep 25 '09 at 12:03

bobince

528,062
107
651
834

1

I would have said use `nodeValue` (having never seen `data`). For anyone else wondering what the difference is: http://www.mail-archive.com/svg-developers@yahoogroups.com/msg06963.html In this context they are equivalent. – Crescent Fresh Sep 25 '09 at 13:05

score 5 · Answer 2 · answered Sep 25 '09 at 11:36

5

The following will get you a concatenated string of all the text nodes that are direct children of a node:

function getChildText(node) {
  var text = "";
  for (var child = node.firstChild; !!child; child = child.nextSibling) {
    if (child.nodeType === 3) {
      text += child.nodeValue;
    }
  }
  return text;
}

alert( getChildText(document.getElementById("node")) );

answered Sep 25 '09 at 11:36

Tim Down

318,141
75
454
536

You might also want to insert a space between your chunks of text. – Neall Sep 25 '09 at 12:02
This is a good answer, just a possible tweak that might benefit some: If you were to return an array of strings then you'd get two benefits: firstly you'd avoid the potentially costly string concatenations and secondly the caller would get a choice of separator by calling 'join' themselves. – OlduwanSteve Feb 05 '14 at 09:41
1

@OlduwanSteve: True, although I don't think string concatenations are any more costly than calling join in modern browsers. Regardless, it's pretty easy to tweak; the general approach is the main thing. – Tim Down Feb 05 '14 at 10:20
[Every day's a school day!](http://stackoverflow.com/questions/7299010/why-is-string-concatenation-faster-than-array-join) – OlduwanSteve Feb 05 '14 at 11:02

gnarf · Answer 3 · 2010-06-09T12:06:12.957

This example uses .contents() to get all the children nodes (including text nodes), then uses .map() to turn each child node into a string based on the nodeType. If the node is a text node (i.e. text not within the <li>), we return its nodeValue.

This returns a jQuery set containing strings, so we call .get() to get a 'standard' array object that we can call .join() on.

// our 'div' that contains your code:
var $html = $('<li id="node">I want this<ul><li>I dont want this</li></ul>    </li>');

// Map the contents() into strings
$html.contents().map(function() { 
  // if the node is a textNode, use its nodeValue, otherwise empty string
  return this.nodeType == 3 ? this.nodeValue : undefined; 
  // get the array, and join it together:
}).get().join('');

// "I want this    " -- note the extra whitespace from after the <ul>

And to make a simpler call:

$.fn.directText=function(delim) {
  if (!delim) delim = '';
  return this.contents().map(function() { return this.nodeType == 3 ? this.nodeValue : undefined}).get().join(delim);
};

$html.directText();
// "I want this    "

Or a slightly more robust version to allow trimming whitespace / changing the joining string:

$.fn.directText = function(settings) {
   settings = $.extend({},$.fn.directText.defaults, settings);
   return this.contents().map(function() {
     if (this.nodeType != 3) return undefined; // remove non-text nodes
     var value = this.nodeValue;
     if (settings.trim) value = $.trim(value);
     if (!value.length) return undefined; // remove zero-length text nodes
     return value;
   }).get().join(settings.joinText);
};

$.fn.directText.defaults = {
   trim: true,
   joinText: ''
};

score 0 · Accepted Answer · answered Sep 25 '09 at 11:45

0

There's a Text Children Plugin for this, if it's something you'll want to do often. It offers you a few options for the output too.

answered Sep 25 '09 at 11:45

Russ Cam

124,184
33
204
266

jQuery InnerText not including sub element

4 Answers4

Linked