Javascript: ucfirst | Mind Mining Medium

In PHP there is ucfirst whose purpose is to uppercase the first letter of the string. While working in Javascript I ran into a problem where I wanted to do this. I searched high and low and couldn’t find a native function that would do this. So, I ended up writing my own.

String.prototype.ucfirst = function() {
  // Split the string into words if string contains multiple words.
  var x = this.split(/\s+/g);
  for (var i = 0; i < x.length; i++) {
    // Splits the word into two parts. One part being the first letter,
    // second being the rest of the word.
    var parts = x[i].match(/(\w)(\w*)/);

    // Put it back together but uppercase the first letter and lowercase the
    // rest of the word.
    x[i] = parts[1].toUpperCase() + parts[2].toLowerCase();
  }

  // Rejoin the string and return.
  return x.join(' ');
};

A quick example on how to use it:

var s = "hello my name is ali karbassi.";

//hello my name is ali karbassi.
document.write( s );

//HELLO MY NAME IS ALI KARBASSI.
document.write( s.toUpperCase() );

//hello my name is ali karbassi.
document.write( s.toLowerCase() );

//Hello My Name Is Ali Karbassi
document.write( s.ucfirst() );

Albo

Hi!
this function is more like ucwords (http://php.net/ucwords) than ucfirst ;)
ucfirst make uppercase the first letter and ucwords make uppercase the first letter of each word.

Adam

Yeah, I think you mean to call it ucwords(). It takes each word and makes the first letter of each a capital.

You could always just avoid all that looping stuff and use this regular expression with function call. It's a bit querky but I was messing around for ages and realised that the function call passes in the first back reference of the find...

var str = "make me look pretty";
str = str.replace(/\b[a-z]/g,function(c){return c.toUpperCase()});

The magic of opitmisation :P

Adam

Update to last post:
Sorry, just realised that you always want to be able to convert the string to lowercase before hand in order to make sure its completely properly formatted... So this is an all round safer bet...

str = str.toLowerCase().replace(/\b([a-z])/gi,function(c){return c.toUpperCase()});

Hope that helps :)
I'm messing about alot with Javascript at the moment on my new site (click the name) hence trying to get lots of silly niggly things like that working :)

Anyway! good stuff, take care

Jim

Thanks Adam, that was very helpful with an issue I had. However in playing with this a bit, I wanted to point out to new users that in Adam's case it's also a method similar to ucwords(), where it caps the first letter of every word. Ex: str = 'foo bar', will become 'Foo Bar'.

For a ucfirst() related function, where it only caps the first character in the entire string, simply remove the 'g'. Ex: str = 'foo bar', will become 'Foo bar'.

Also, if you convert to lowercase first, there's no need to be case insensitive (i) either.

Final result for a "true ucfirst()":

str = str.toLowerCase().replace(/\b([a-z])/,function(c){return c.toUpperCase()});