Skip to content
Related Articles

Related Articles

Improve Article
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:

  1. 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.

  2. 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.

  3. 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.

  4. 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_up
Recommended Articles
Page :