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: