One of the most frequently used operations with strings is to convert the first character of a string to uppercase, and leave the rest of string as it is. There are many ways to capitalize the first letter of a string in JavaScript.

The easiest way to do is to use two JavaScript functions together: charAt() and slice(). The former isolates and uppercases the first character from the left of the string, and the latter slices the string leaving the first character. The output of both methods is concatenated to form a capitalized string.

const phrase = "how to learn javascript";
const capitalStr = phrase.charAt(0).toUpperCase() + phrase.slice(1);

And if you feel comfortable working with regular expressions, you can also use replace() method:

const phrase = "how to learn javascript";
const capitalStr = phrase.replace(/^\w/, function(c) {
    return c.toUpperCase();
});

A bit modern ES6/ES2015 syntax using arrow functions:

const phrase = "how to learn javascript";
const capitalStr = phrase.replace(/^\w/, c => c.toUpperCase());

Capitalize Function

You can even take one step further and create a function to transform the first character of the string to uppercase. Now just call the function whenever you want to capitalize a string.

const capitalize = (str) => {
    if(typeof str === 'string') {
        return str.replace(/^\w/, c => c.toUpperCase());
    } else {
        return '';
    }
};

capitalize('google')        // Google
capitalize('how it works')  // How it works
capitalize('a')             // A
capitalize([])              // ''
capitalize()                // ''

The above capitalize() function also checks the type of the passed parameter. If it is not a string, it returns an empty string.

Capitalize All Words

The best way to capitalize all words in a string is using regular expressions:

const phrase = "how to learn javascript";
const capitalStr = phrase.replace(/\b\w/g, function(c) {
    return c.toUpperCase();
});

ES6 implementation using arrow functions:

const phrase = "how to learn javascript";
const capitalStr = phrase.replace(/\b\w/g, c => c.toUpperCase());

The regular expression basically matches the first letter of each word within the given string and transforms only that letter to uppercase.

Bonus: Use CSS

If you want to capitalize all words of a paragraph on a web page, use CSS text-transform property instead:

.capitalize {
    text-transform: capitalize;
}

Now just add capitalize class to your HTML paragraph element:

<p class="capitalize">Welcome to JavaScript tutorials!</p>

Conclusion

In this tutorial, we discussed multiple ways to capitalize the first letter of a string in JavaScript. If you want to transform the first character to uppercase only, use charAt() and slice() methods. For complete string capitalization, use CSS text-transform property.

If you are want to learn how to perform the string capitalization in Java, take a look at this guide.

If you have any questions or want to share your feedback, please feel free to send me a tweet anytime.

Happy Coding 😍

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also Subscribe to RSS Feed.

Last Updated: