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.- Example 1: This example uses slice() method to make first letter of a string uppercase.
- 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 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:
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:
<!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: