‹‹ homejQuery Text Children Plugin

Overview

The Text Children Plugin is a simple little jQuery plugin to return textual content from selected elements. Unlike jQuery's built-in .text() method, the textChildren plugin does not recurse through the selected elements' descendants.

If you like this plugin and you're feeling generous, perhaps you'd also like to visit my amazon.com wish list?

Quick Start Guide

The Text Children Plugin returns a concatenated string by default, as .text() does, but can include an optional delimiter, such as a comma or a space, between text nodes. It can also return an array if you prefer that. Each text node's string is trimmed by default, but this feature can be turned off if desired.

Add HTML markup to your page and note the elements from which you want to extract textual content. For example, your document may have an unordered list (<ul>) like the following:

  <ul id="testlist">
    <li>Although <strong>she claimed that</strong> someone <em>stopped by 
      for a visit, </em><span class="highlight">she swore 
      that he never</span> slept here
    </li>
    <li><strong>The rains came down</strong> for forty years
    </li>
    <li><em>James said</em> he <em>never</em> felt <span class="highlight">that he was</span> 
    better <strong>at chess</strong> than his son.
    </li>
  </ul>
Include the jQuery core file and the Text Children plugin in the <head> of your document. After these scripts are referenced, you can reference a custom script file to return the desired text nodes (preferred) or enter the script directly in the <head> (shown below).

<script src="jquery-latest.js" type="text/javascript"></script>
<script src="jquery.Text Children.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {

  // simple example, using all default options
  
  var test1 = $('#testlist li').textChildren();
  /* test1 == "Althoughsomeoneslept herefor forty yearshefeltbetterthan his son." */

  // *** OR ***
  
  // use a filter or override some default options
  
  var test2 = $('#testlist li').textChildren(0);
  /* test2 == "Althoughfor forty yearshe" */
  
  
  var test3 = $('#testlist li').textChildren({stringDelimiter: ' '});
  /* test3 == "Although someone slept here for forty years he felt better than his son." */

  var test4 = $('#testlist li').textChildren({outputType: 'array'});
  /* test4 == ["Although", "someone", "slept here", "for forty years", "he", "felt", "better", "than his son."] */
  
});
</script>

See API / Options for more ways to customize the behavior and appearance of the Text Children.

Text Children Plugin API / Options

The Text Children Plugin API provides a single method with a few options.

The plugin is still in its infancy, so do not hesitate to send bug reports or feature requests to the jQuery Google Group.

textChildren(n, options)
(Both n and options are optional)
Returns the text contents of the matched set of elements.
To be precise, the plugin finds all child nodes (but no grandchild, great-grandhild nodes, etc.) of the selected element(s) and checks to see if they are text nodes. If they are, their contents are returned.

The "nth" Filter

n is a filter for the text child nodes. If the argument is not entered, the contents of all text child nodes are returned. To return the first text node's contents, use 0 or 'first'. To return the last text node's contents, use -1 or 'last'. If n fails to match a text node, an empty string is returned (or an empty array, if outputType is set to 'array').

Available options

$.fn.textChildren.defaults = {
  outputType: 'string',       // one of 'string' or 'array'
  stringDelimiter: '',        // if outputting to string, inserts a delimiter between nodes
  trim: true                  // whether to trim white space from start/end of text nodes
};

Demo

You can test this plugin below against the following HTML:


  <ul id="testlist">
    <li>Although <strong>she claimed that</strong> someone <em>stopped by 
      for a visit, </em><span class="highlight">she swore 
      that he never</span> slept here</li>
    <li><strong>The rains came down</strong> for forty years</li>
    <li><em>James said</em> he <em>never</em> felt <span class="highlight">that he was</span> 
    better <strong>at chess</strong> than his son.</li>
  </ul>

Build your code

$("")
$.fn.textChildren.defaults = {
'',
'',
};

See the jQuery

        
        

View the Result

        
        

Download

The Text Children Plugin is available at: http://plugins.learningjquery.com/textchildren/jquery.textchildren.js.

Support

Support for the Text Children Plugin is available through the jQuery Mailing List. This is a very active list to which many jQuery developers and users subscribe.