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

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: 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: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:My Personal Notes
arrow_drop_upSave
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.
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.
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.
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.
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.<!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:My Personal Notes
arrow_drop_upSave
<!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:
javascript-string
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?