JavaScript – Convert String to Title Case
Converting a string to title case means capitalizing the first letter of each word while keeping the remaining letters in lowercase. Here are different ways to convert string to title case in JavaScript.
1. Using for Loop
JavaScript for loop is used to iterate over the arguments of the function, and the characters are converted to Uppercase.
function titleCase(s) {
return s.toLowerCase()
.split(' ')
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ');
}
const s = "geeks for geeks";
let t = titleCase(s);
console.log(t);
function titleCase(s) { return s.toLowerCase() .split(' ') .map(word => word.charAt(0).toUpperCase() + word.slice(1)) .join(' ');}const s = "geeks for geeks";let t = titleCase(s);console.log(t);Output
Geeks For Geeks
2. Using replace() Method
The replace() method 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 remains same.
function titleCase(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();
});
}
const s = "geeks for geeks";
let t = titleCase(s);
console.log(t);
function titleCase(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(); });}const s = "geeks for geeks";let t = titleCase(s);console.log(t);Output
Geeks For Geeks
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.
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"));
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
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
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"));
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
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
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);
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
6. Using Regular Expressions
In this approach, we utilize regular expressions along with the split() method to split the string into words, then we capitalize the first letter of each word, and finally, we join the words back together to form the title case string.
function titleCase(str) {
return str.toLowerCase().replace(/(?:^|\s)\w/g, function(match) {
return match.toUpperCase();
});
}
console.log(titleCase("converting string to titlecase"));
function titleCase(str) { return str.toLowerCase().replace(/(?:^|\s)\w/g, function(match) { return match.toUpperCase(); });}console.log(titleCase("converting string to titlecase"));Output
Converting String To Titlecase
7. Using Lodash’s _.startCase() Method
Int his approach we use Lodash’s _.startCase method. This method converts the string to title case, which capitalizes the first letter of each word and converts the rest of the letters to lowercase.
Example: In this example we imports Lodash, defines a function toTitleCase that uses _.startCase to convert a string to title case, and prints “Welcome To Geeks For Geeks” to the console.
// Import the Lodash library
const _ = require('lodash');
function toTitleCase(str) {
return _.startCase(str);
}
console.log(toTitleCase("welcome to geeks for geeks"));
Output
Welcome To Geeks For Geeks8. Using toLocaleLowerCase() and replace() with a Callback Function
In this approach, we will use the toLocaleLowerCase() method to convert the entire string to lowercase, and then use the replace() method with a callback function to capitalize the first letter of each word.
function toTitleCase(str) {
return str.toLocaleLowerCase().replace(/\b\w/g, function(char) {
return char.toUpperCase();
});
}
let sentence = "welcome to geeks for geeks";
console.log(toTitleCase(sentence));
function toTitleCase(str) { return str.toLocaleLowerCase().replace(/\b\w/g, function(char) { return char.toUpperCase(); });}let sentence = "welcome to geeks for geeks";console.log(toTitleCase(sentence));Output
Welcome To Geeks For Geeks
