Tag Archives: text

CLI Cut Visual Option

Something I came across recently was command line text manipulation with a CSV. The way that the list option is passed in is cool.

For demonstration purposed, we have a contrived text document “dummy.txt” that happens to be delimited by the % character. The contents inside the file are:

name%car%temp%color
john%honda%fair%blue
tom%benz%fair%red
ed%bmw%cold%green

To get the first column of data, you can run

cut -d% -f1 dummy.txt

which gives you:

name
john
tom
ed

If you wanted to save the output, the standard command line “>” comes in handy.

To get the columns up to (and including the) 2nd column, you can run

cut -d% -f-2 dummy.txt

which gives you:

name%car
john%honda
tom%benz
ed%bmw

To get the 2nd & 3rd columns, inclusive, you can run

cut -d% -f2-3 dummy.txt

which gives you:

car%temp
honda%fair
benz%fair
bmw%cold

To get the 3rd column onward to the last column, you can run

cut -d% -f3- dummy.txt

which gives you:

temp%color
fair%blue
fair%red
cold%green

The examples above are just for this demo, but I think the hyphen syntax in the list fields option is easy to learn and visually clear (for a CLI interface).

How jQuery text method works in JavaScript

jQuery has a popular method for accessing the text contents of a targeted DOM node named .text(). It allows you to either get the text content or set the text content.

For example, using text() on $('#test') returns foobar below:

    <div id="test"><span>foobar</span></div>

    $('#test').text(); //=> returns 'foobar'

By using text() with a parameter, you can set the text to the passed in parameter.

    <div id="test"><span>foobar</span></div>

    $('#test').text("cupcakes"); // sets the value to 'cupcakes'
    $('#test').text(); //=> returns 'cupcakes'

There is a similar jQuery method named html(). It returns the html contents within the targeted DOM node.

    <div id="test"><span>foobar</span></div>

    $('#test').html(); //=> returns '<span>foobar</span>'

Before we dive into the jQuery source, we can guess that jQuery uses textContent.

In the jQuery source, you can see on line 5702:

    jQuery.fn.extend({
      text: function( value ) {
        return jQuery.access( this, function( value ) {
          return value === undefined ?
            jQuery.text( this ) :
            this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) );
        }, null, value, arguments.length );
      },

jQuery checks the passed in parameter value using a ternary operator. If value is undefined, then jQuery calls text. Else, jQuery sets the value with createTextNode.

jQuery.access on line 784 allows jQuery to determine if the value is defined or undefined.

If undefined, jQuery.text( this ) runs.

    // line 5348:
    jQuery.text = Sizzle.getText;

Sizzle’s getText looks like:

    /**
     * Utility function for retrieving the text value of an array of DOM nodes
     * @param {Array|Element} elem
     */
    getText = Sizzle.getText = function( elem ) {
      var node,
        ret = "",
        i = 0,
        nodeType = elem.nodeType;

      if ( nodeType ) {
        if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) {
          // Use textContent for elements
          // innerText usage removed for consistency of new lines (see #11153)
          if ( typeof elem.textContent === "string" ) {
            return elem.textContent;
          } else {
            // Traverse its children
            for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
              ret += getText( elem );
            }
          }
        } else if ( nodeType === 3 || nodeType === 4 ) {
          return elem.nodeValue;
        }
        // Do not include comment or processing instruction nodes
      } else {

        // If no nodeType, this is expected to be an array
        for ( ; (node = elem[i]); i++ ) {
          // Do not traverse comment nodes
          ret += getText( node );
        }
      }
      return ret;
    };

You can see that jQuery either returns the string with textContent

    // Use textContent for elements
    // innerText usage removed for consistency of new lines (see #11153)
    if ( typeof elem.textContent === "string" ) {
      return elem.textContent;
    }

or jQuery will traverse the DOM and append them into the ret variable (initialized as as empty string) to return.

    // Traverse its children
    for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
      ret += getText( elem );
    }

If you are passing in a param value into text(), then jQuery will empty out the contents of the targeted DOM node and use createTextNode to allow your passed in param to show up.

    this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) );

If you are interested in using Core JavaScript to replicate jQuery’s text(), you could try the following:

    <div id="test">lion</div>

    var div = document.querySelectorAll("#test");
    div[0].textContent; //=> returns 'lion'

This targets the #test div and get the text content.

    <div id="test"></div>

    var div = document.querySelectorAll("#test");
    div[0].appendChild(document.createTextNode('pizza'));

This is one way to set the div contents to display ‘pizza’.

Thanks for tuning into to another jQuery without jQuery. Diving into the source code is great for helping you understand how it all works.

jQuery without jQuery is a series that aims to open up the jQuery black box. jQuery is just JavaScript, so you should feel comfortable working at lower levels of abstraction and looking at the jQuery source code written in JavaScript.