One of the most frequently used operations with strings is to convert the first character of a string to uppercase. 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 later 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 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: uppercase;
}

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 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 have any question or want to share your feedback, please feel free to send me a tweet anytime.

Happy Coding 😍

πŸ™‹β€β™‚οΈ Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV.


Need help to start a new Spring Boot or MEAN stack project? I am available for contract work. Hire me to accomplish your business goals with engineering and design. Let’s talk about your project: hi@attacomsian.com.