Jquery Innertext Not Including Sub Element

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

• I want this

Solution 1:

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

Solution 2:

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

functiongetChildText(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")) );

Solution 3:

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 stringreturnthis.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 = '';
  returnthis.contents().map(function() { returnthis.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);
   returnthis.contents().map(function() {
     if (this.nodeType != 3) returnundefined; // remove non-text nodesvar value = this.nodeValue;
     if (settings.trim) value = $.trim(value);
     if (!value.length) returnundefined; // remove zero-length text nodesreturn value;
   }).get().join(settings.joinText);
};

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

Solution 4:

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.