Get updates

Scott Extending JavaScript Strings with Chomp using Prototypes

Chomp is that oh-so-fun function in Perl to bite off extra newlines from the end of a string. It can be useful to have chomp for JavaScript too, especially in cases such as reading input in textareas.

This time around, I’m going to take a quick look at how we can take the standalone JavaScript chomp function and make it even more accessible by extending JavaScript’s String object, which also gives us an excuse to try out the awesome prototype feature in JavaScript.

Here’s our simple function definition for chomp:

function chomp(raw_text)
{
  return raw_text.replace(/(\n|\r)+$/, '');
}

To use it as it stands, we’d need to call it like any other global function:

var text = "L-l-l-look at you, hacker\n\n\n\n";
alert(text);
//note the escaped newline characters, which should make the first alert box taller
text = chomp(text);
alert(text);

The next step is to take advantage of JavaScript’s inheritance features. All JavaScript objects have the ability to add, and override, methods through the prototype feature (not to be confused with the very useful Prototype framework named after this feature).

In brief, we can add a method to the String prototype object and that method will become available to all String objects (such as our var text above) through the power of inheritance. Here’s how:

function chomp()
{
  return this.replace(/(\n|\r)+$/, '');
}
String.prototype.chomp = chomp;

First we updated chomp to operate on this instead of taking an argument. Then we copied the function to String’s prototype as a method named chomp. Any String object may then call the method like this:

var text = "And the mome raths outgrabe\n\n\n";
alert(text);
text = text.chomp();
alert(text);

Note that string literals are real String objects too, allowing us to do this:

alert("It's a poor sort of memory that only works backwards\n\n\n\n".chomp());

Before we’re done, we can take the inheritance setup one step further. Since chomp is such a simple function, it could easily be written inline as an anonymous function:

String.prototype.chomp = function ()
{
  return this.replace(/(\n|\r)+$/, '');
};

Here the function definition of String’s new method is listed right when we’re adding it to the inheritance chain. We don’t have to define chomp anywhere beforehand, and we get the benefit of code that’s easier to read.

For those looking to go further with inheritance in JavaScript, some searching will probably turn up a number of opposing opinions on the “right” way to create classes and set up inheritance. I would suggest checking out how the folks over at Prototype do it, especially if you’re an Ajax fan or using Rails and already have Prototype lying around. Even if you decide not to use Prototype in your projects, you might find their way of doing things an interesting point of reference.

One Response to “Extending JavaScript Strings with Chomp using Prototypes”

  1. Tom Says:

    THanks fore JS chomp – somehow I couldn’t get it!

Leave a Reply


Fatal error: Uncaught Error: Call to undefined function show_subscription_checkbox() in /home/dmetro/3dmdesign.com/wp-content/themes/hex_columns/comments.php:90 Stack trace: #0 /home/dmetro/3dmdesign.com/wp-includes/comment-template.php(1472): require() #1 /home/dmetro/3dmdesign.com/wp-content/themes/hex_columns/single.php(65): comments_template() #2 /home/dmetro/3dmdesign.com/wp-includes/template-loader.php(74): include('/home/dmetro/3d...') #3 /home/dmetro/3dmdesign.com/wp-blog-header.php(19): require_once('/home/dmetro/3d...') #4 /home/dmetro/3dmdesign.com/index.php(17): require('/home/dmetro/3d...') #5 {main} thrown in /home/dmetro/3dmdesign.com/wp-content/themes/hex_columns/comments.php on line 90