How to make first letter of a string uppercase in JavaScript ?
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. - Before clicking the button:
- After clicking the button:
- Before clicking the button:
- After clicking the button:
- Before clicking the button:
- After clicking the button:
- Example 1: 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[0].toUpperCase() + string.slice(1); } </script> </body> </html> |
Output:
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:
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:
.png)