Convert string to title case in JavaScript

Converting string to title case means converting to uppercase the first letter of every word in a sentence while the other ones remain in lowercase. In this article, we will see how to convert string to title case in JavaScript

Below are the approaches to convert string to title case in JavaScript:

Approach 1: Using replace() function

The replace() method in JavaScript is used to search a string for a value or any expression and replace it with the new value provided in the parameters. The original string is not changed by this method.

Example: In this example, we are using the above-explained method.

javascript

function sentenceCase(str) {
    if ((str === null) || (str === ''))
        return false;
    else
        str = str.toString();

    return str.replace(/\w\S*/g,
        function (txt) {
            return txt.charAt(0).toUpperCase() +
                txt.substr(1).toLowerCase();
        });
}

console.log(sentenceCase('geeks for geeks'));

Output

Geeks For Geeks

Approach 2: Using For loop to titlecase a string

In this method, the Javascript For loop is used to iterate over the arguments of the function, and the characters are converted to Uppercase. 

Example: In this example, we are using the above-explained method.

javascript

function titleCase(str) {
    str = str.toLowerCase().split(' ');
    for (let i = 0; i < str.length; i++) {
        str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1);
    }
    return str.join(' ');
}
console.log(titleCase("geeks for geeks"));

Output

Geeks For Geeks

Approach 3: Using map() method

The JavaScript map() method in JavaScript creates an array by calling a specific function on each element present in the parent array. It is a non-mutating method. Generally, the map() method is used to iterate over an array and calling function on every element of the array. 

Example: In this example, we are using the above-explained method.

javascript

function titleCase(str) {
    return str.toLowerCase().split(' ').map(function (word) {
        return (word.charAt(0).toUpperCase() + word.slice(1));
    }).join(' ');
}
console.log(titleCase("converting string to titlecase"));

Output

Converting String To Titlecase

Approach 4: Using reduce() method

The JavaScript arr.reduce() method in JavaScript is used to reduce the array to a single value and executes a provided function for each value of the array (from left-to-right) and the return value of the function is stored in an accumulator. But first we need to convert string into lowercase

Example: In this example, we are using the above-explained method.

Javascript

function titleCase(st) {
    return st.toLowerCase().split(" ").reduce((s, c) =>
        s + "" + (c.charAt(0).toUpperCase() + c.slice(1) + " "), '');
}
console.log(titleCase("converting string to titlecase"));

Output

Converting String To Titlecase 

Approach 5: Using Foreach loop

In this approach, the split method is used to split the string into an array of words. Then, the forEach loop iterates over each word. Inside the loop, each word is capitalized by converting the first character to uppercase and the remaining characters to lowercase

Example: In this example, we are using the above-explained method.

Javascript

const str = "geeks for geeks";
let titleCase = "";
str.split(" ").forEach(word => {
    const capitalizedWord = word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
    titleCase += capitalizedWord + " ";
});
console.log(titleCase);

Output

Geeks For Geeks