Capitalize the First Letter of Each Word in a String [JavaScript]

This short article shows you how to capitalize the first letter in a string or all of the words in a string (title case) in the javascript programming language.

Capitalizing the first letter in a string is useful if you’re capitalizing a single word or a whole sentence which you wish to display in a grammatically correct manner.

Converting a string to title case – that’s where every word is capitalized in a string with multiple words – is useful for formatting text for use in an article or page title.

Capitalize the First Letter in a String

First up, here’s how to capitalize only the first letter in a string.

This example is provided as a re-usable function to copy and paste it into your code and put it to work.

// Reusable function to capitalize first letter in a string
function capitalizeFirst(str) {
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

// Testing the above function
console.log(capitalizeFirstLetter('foo')); // Will print 'Foo'

So what’s going on above? Firstly, the first character (at index 0) is retrieved from the string using the charAt() method and made uppercase using the toUpperCase() method.

Then, it’s joined with the rest of the string, sliced at index 1 to remove the first character (so it’s not duplicated as we’ve already got the first character uppercased). Finally, for good measure, the remainder of the string is converted toLowerCase() in case it wasn’t already.

Easy!

Capitalize the First Letter of Every Word in a String (Titlecase)

Here’s how to capitalize every word in a string – that’s the first letter of every series of characters separated by a space.

There’s a bit more going on in this function, so I’ll leave commentary in the code rather than explaining it at the end.

// Reusable function to capitalize first letter of every word in a string
function titlecase(str) {

    // Split the string at each space.  This will create an array containing each word in the string.
    var splitStr = str.toLowerCase().split(' '); 

    // Loop through the words in the string 
    for (var i = 0; i < splitStr.length; i++) {
        // Capitalize the first word in each using the same method as in the previous example
        // The result replaces the original word in the splitStr array
        splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);     
    }

    // Join the now-capitalized words in the array back into a single string, separated by spaces, and return it
    return splitStr.join(' '); 
}

// Testing the above function
console.log(titlecase('foo bar')); // Will print 'Foo Bar'

Using CSS for Titlecase

If you’re only looking to format the text for display, you can use CSS to display a string in title case without having to process it using JavaScript at all:

<style>
    .titlecase {
        text-transform: capitalize;
    }
</style>

<p class="titlecase">capitalize me!</p>

When rendered in a web browser, the text will be capitalized by the CSS text-transform property.