Capitalize first letter using JavaScript

In this tutorial, I show you how you can capitalize the first letter of the string. JavaScript provided several methods for string manipulation and there are different ways that can be used to capitalize the first letter of the string using JavaScript.

Capitalize the first letter using javascript required a little bit of code but if want to capitalize the first letter using CSS it’s straight forward and you can use the below style –

<div class="capsfirstletter">welcome to geeks tutorials</div>

.capsfirstletter{
  text-transform: capitalize;
}

Below are the used cases for this tutorial to capitalize the first letter of string using javascript–

1. Just one-word string only capitalize the first letter.
2. A string of multiple words and capitalize the first letter of each word.
3. Capitalize the first letter of each word in an array.

 

1.JavaScript capitalize the first letter(One word)

This is the most basic scenario just capitalize the first letter and leave the rest of the letters as it is in the string.

Suppose we have one word called “london” and we want to capitalize the first letter small “l” to capital “L”.

Example 1 –

var country = "london"
console.log(country.charAt(0).toUpperCase() + country.slice(1));

Here I get the string from the variable country and find the first character using charAt() method at index 0 and convert to upper case using .toUpperCase() method it returns the capital “L” and rests I get from country variable using slice method from position 1 means 2^nd character from the string. You can also use the substring method of string to slice the string.

Example 2 –

This is the same as example 1 just check the string whether it is a valid string or not. If not it returns “No a valid string to convert”.

const capsString = (s) => {
if (typeof s == 'string' || s instanceof String)
{
 return s.charAt(0).toUpperCase() + s.slice(1)
}
else{
return "No a valid string"
}
}

2. String having multiple words and capitalize the first letter of each word.

This is simple we just need to get all the words from the string by using the split method based on white space and get its first character the same as the previous example.

Example 1 –

const strtext = "welcome to geeks tutorials learning portal"
const words = strtext.split(" ")
var getWords=[];
for(let i =0;i< words.length;i++){
 getWords.push(words[i].charAt(0).toUpperCase() + words[i].slice(1))
}
getWords.join(" ");

Output – //First letter of each word appear in upper case.

“Welcome To Geeks Tutorials Learning Portal”

Example 2 –

The same thing can be done using the map() function it reduces the few lines of code and the output remains the same –

const strtext = "welcome to geeks tutorials learning portal"
const words = strtext.split(" ")
words.map((str) => {
 return str.charAt(0).toUpperCase() + str.slice(1);
}).join(" ");

Apart from the slice, you can also use the substring method to get the string part.

 

3.Capitalize the first letter of an array

Suppose you have an array like below and you have to capitalize the first letter of each word in-country field.

Example 1-

var countryArr = [{id: 1, country:"united states of america"},{id: 2, country:"australia"},{id:3, country:"india"},{id:4, country:"england"},{id:5,country:"south africa"}];
countryArr.forEach(function (key,value){
var splitArr = key.country.split(" ");
if(splitArr.length >1)   { 
 var getWords =[];
 //execute for each country having multiple word in their names.
for(let i =0;i< splitArr.length;i++){
 getWords.push(splitArr[i].charAt(0).toUpperCase() + splitArr[i].slice(1));
}
console.log(getWords.join(" "));
}
else{
//execute for each country having single word names.
 console.log(splitArr[0].charAt(0).toUpperCase() + splitArr[0].slice(1));
}
});

Conclusion

That is how you can capitalize the first letter of each word of string using javascript by using basic string manipulation methods like .toUpperCase(), Slice().