JavaScript Title Case: Capitalize First Letter of each Words in String.

 In this blog post you’ll learn to  capitalise the first letter of the words present in the string making it a title case.

We’ll see two ways to do it.

Example 1.

With for loop and method tolowercase(), split(), trim(), charat(), substring().

• First, we'll trim the string value to remove any leading or trailing spaces.
• Next, we'll convert the string to lowercase using the JavaScript toLowerCase() method.
• Then, we'll split the string into an array of words using the split() method, with a space as the delimiter.
• We'll iterate through each word in the array with a for loop. For each non-empty word, we'll perform the following steps:
• Capitalise the first letter of the word using the charAt() method to access the first character and the toUpperCase() method to convert it to uppercase.
• Since we converted the entire string to lowercase earlier, we simply need to remove the first letter, which was previously capitalised. We'll remove it using the substring() method.
• Concatenate the capitalise first letter, the lowercase remaining letters, and a space to form the formatted word.
• Finally, we'll trim the resulting string again to remove any potential extra spaces at the beginning or end.

JavaScript

    let string = "    hello     WELCOME          to Maketechstuff.com.  ";
    let output = "";
    let array = string.toLowerCase().trim().split(" ");
    for (let i = 0; i < array.length; i++) {
        const element = array[i];
        if (element != "") {
            output += " " + element.charAt(0).toUpperCase() + element.substring(1);
        }
    }
    console.log(output.trim());
  

Output:

As you can see in the code, the string initially had multiple spaces at the sides and between words. However, as shown in the image above, the code has successfully removed the extra spaces from the sides and replaced the multiple spaces between words with single spaces.

You can make the spaces to remain as it is. See below code.

JavaScript

    let string = "    hello     WELCOME          to Maketechstuff.com.  ";
    
    let output = "";
    let array = string.toLowerCase().split(" ");
    for (let i = 0; i < array.length; i++) {
        const element = array[i];
        
            output += " " + element.charAt(0).toUpperCase() + element.substring(1);
 
    }
    console.log(output);
  

Output:

Example 2.

With method tolowercase(), split(), trim(), charat(), substring() and map().

• First, we'll trim the string value to remove any leading or trailing spaces.
• Next, we'll convert the string to lowercase using the JavaScript toLowerCase() method.
• Then, we'll split the string into an array of words using the split() method, with a space as the delimiter.
• We will iterate through each word in the array using the map method. 
• We will capitalise the first letter of each word using the charAt method of JavaScript. 
• Since we already converted the string to lowercase earlier, we only need to remove the first letter of each element, as it has already been capitalised. We will remove it using the substring method of JavaScript.
• Finally, we will join the array elements with spaces and store the resulting string into a variable.

See below code for better understanding.

JavaScript

    let string = "hello WELCOME to Maketechstuff.com.";
  
    let output = "";
    output = string.toLowerCase().trim().split(" ").map((letter, index) => letter.charAt(0).toUpperCase() + letter.substring(1)).join(" ");
    console.log(output)

  

Output:

This method let remain spaces as it is.

 

So that's how you can capitalise the first letter of each word in a string using JavaScript. If you have any questions or suggestions, feel free to write them in the comment section.

You may like:

1. How to convert text to uppercase or lowercase on click using JavaScript.
2. How to convert text case to uppercase or lowercase instantly on input using JavaScript.