5

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.

4 Answers 4

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
1
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")) );
4
  • You might also want to insert a space between your chunks of text.
    – Neall
    Sep 25, 2009 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. Feb 5, 2014 at 9: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 5, 2014 at 10:20
  • Every day's a school day! Feb 5, 2014 at 11:02
4

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: ''
};
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.