How to make first letter of a string uppercase in JavaScript ?

Last Updated : 20 Mar, 2019

There are number of ways to capitalize the first letter of the string in JavaScript. Following are the ways:

toUpperCase():
This function applies on a string and change the all letters to uppercase.
Syntax:
```
string.toUpperCase()
```
Return Value: This function returns the capitalized string.
slice():
This function applies on a string and slice it according to the passed parameter.
Syntax:
```
string.slice(start, end)
```
- start: This parameter is required. It specifies the position where to begin the slicing. Indexing starts at position 0.
- end: This is optional parameter. It specifies the position from where to end the slicing(without including the end). If this parameter is omitted, It selects all characters from start.
Return Value: This function returns the sliced string.
charAt():
This charAt() function returns the character at given position in string.
Syntax:
```
string.charAt(index)
```
Return Value: This function returns the character at specified position in string.

replace():
This is an built-in function in JavaScript which is used to replace a slice of a string with another string or a regular expression. Original string will not affected.
Syntax:

str.replace(A, B)

Parameters: Here the parameter A is regular expression and B is a string which will replace the content of the given string.
Return Value: It returns a new string with replaced items.

Example 1:

<!DOCTYPE html>  
<html>  
    <head> 
        <title></title>
    </head> 
        
    <body style = "text-align:center;">  
    
        <h1 style = "color:green;" >  
            GeeksForGeeks  
        </h1>  
          
        <input id = "input" type="text" name="input"/> 
        <button onclick="capitalizeFLetter()"> 
            Click to capitalize
        </button> 
        <h3 id = "div" style="color: green">
        </h3>
            
        <script> 
         
        function capitalizeFLetter() {
          var input = document.getElementById("input");
          var x = document.getElementById("div");
          var string = input.value;
          x.innerHTML = string[0].toUpperCase() + 
            string.slice(1);
        }
        </script> 
    </body>  
</html>

Output:

Before clicking the button:

After clicking the button:

Example 2: This example uses slice() method to make first letter of a string uppercase.

<!DOCTYPE html>  
<html>  
    <head> 
        <title></title>
    </head> 
        
    <body style = "text-align:center;">  
    
        <h1 style = "color:green;" >  
            GeeksForGeeks  
        </h1>  
            
        <input id = "input" type="text" name="input"/> 
        <button onclick="capitalizeFLetter()"> 
            Click to capitalize
        </button> 
        <h3 id = "div" style="color: green">
        </h3>
            
        <script> 
         
        function capitalizeFLetter() {
          var input = document.getElementById("input");
          var x = document.getElementById("div");
          var string = input.value;
          x.innerHTML = string.charAt(0).toUpperCase() +
           string.slice(1);
        }
        </script> 
    </body>  
</html>

Output:

Before clicking the button:

After clicking the button:

Example 3: This example uses string.replace() method to make first letter of a string uppercase.

<!DOCTYPE html>  
<html>  
    <head> 
        <title></title>     
    </head> 
        
    <body style = "text-align:center;">  
    
        <h1 style = "color:green;" >  
            GeeksForGeeks  
        </h1>       
        <input id = "input" type="text" name="input"/> 
        <button onclick="capitalizeFLetter()"> 
            Click to capitalize
        </button> 
        <h3 id = "div" style="color: green">
        </h3>
            
        <script> 
         
        function capitalizeFLetter() {
          var input = document.getElementById("input");
          var x = document.getElementById("div");
          var string = input.value;
          x.innerHTML = 
           string.replace(/^./, string[0].toUpperCase());
        }
        </script> 
    </body>  
</html>

Output:

Before clicking the button:
After clicking the button:

Related Articles