There is no built-in solution if you want to capitalize the first letter of each word in JavaScript. But we build a custom function by using methods of String objects. Keep reading to discover different approaches to this problem.

Capitalize The First Letter Of Each Word In JavaScript

Solution 1

Suppose we have three strings as follows:

const str1 = "welcome to ittutoria!";

const str2 = "pOrTal foR PrOgraMMers";

const str3 = "LET'S GO";

You need to transform them into title case:

Welcome To Ittutoria!

Portal For Programmers

Let's Go

Here is one way to do this:

function method1(str) {

    let strArr = str.toLowerCase().split(' ');

    for (var i = 0; i < strArr.length; i++) {

        strArr[i] = strArr[i].charAt(0).toUpperCase() + strArr[i].slice(1); 

    }

    return strArr.join(' ');

}

console.log(method1(str1))

console.log(method1(str2))

console.log(method1(str3))

Output:

Welcome To Ittutoria!

Portal For Programmers

Let's Go

The basic idea of this function is that the input string is split into each word. We then modify those words by combining the first letter in upper case and the rest of the word in lower case. Finally, we join all the words to form the returned string.

As the argument may contain a combination of upper and lower case, you should convert it to lower case first, as it is the default case for most letters. JavaScript has a method for this, toLowerCase(). Remember that it only returns the converted string and doesn’t affect the input string.

To split the string into words for processing, we use split(). This method can break down a string into substrings based on a provided separator and put them all in an array. Since we need to get all the words out of our string, the separator we need to use is a space character ‘ ‘. Learn more about this method with this guide.

The split() method returns an array that stores every word of our string. A for loop can then be used to iterate through them.

At each word, we use the charAt() method to return the character at the index 0, which will be converted to upper case with toUpperCase(). The other characters of the word are left intact and join with the first character to form the new word, which now has the first letter in upper case.

Finally, we concatenate all elements of the array with join() to form the final string.

Solution 2

The for loop above is a straightforward way to process every word in our array. JavaScript comes with another method that can be used when you need to call a certain function on every element of an array – map().

The following code shows how the map() method can replace the for loop in our first function:

function method2(str) {

    let strArr = str.toLowerCase().split(' ');

    let strTitle = strArr.map(function(word) {

        return (word.charAt(0).toUpperCase() + word.slice(1));

      }).join(' ');

    return strTitle;

}

console.log(method2(str1))

console.log(method2(str2))

console.log(method2(str3))

Output:

Welcome To Ittutoria!

Portal For Programmers

Let's Go

Solution 3

In addition to finding and converting the first character to upper case with charAt(), you can also use the replace() method. It can search for a pattern in a string and replace it with a provided replacement.

This is how you can apply replace() to every word in our string with map():

function method3(str) {

    let strArr = str.toLowerCase().split(' ');

    let strTitle = strArr.map(function(word) {

        return word.replace(word[0], word[0].toUpperCase());

      }).join(' ');

    return strTitle;

}

console.log(method3(str1))

console.log(method3(str2))

console.log(method3(str3))

Output:

Welcome To Ittutoria!

Portal For Programmers

Let's Go

Summary

To capitalize the first letter of each word in JavaScript, we need to split the string into words and put them into an array first. Then we use a for loop or the map() method to go through this array and convert the first character of every word to uppercase.