Skip to content
Related Articles

Related Articles

How to convert first letter of a string to upper case using jQuery ?

Improve Article
Save Article
  • Last Updated : 27 Apr, 2020
Improve Article
Save Article

The task is to capitalize the first letter of string without using toUpperCase() method with the help of jQuery. There are two approaches that are discussed below:

Approach 1: In this example, the css() method is used to used to set the text-transform property value to capitalize.

Example:




<!DOCTYPE HTML> 
<html
  
<head
    <title
        How to convert first letter of a
        string to upper case using jQuery?
    </title>
      
    <script src=
    </script>
</head
  
<body style = "text-align:center;"
      
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1>
      
    <p>
        Click on the button to
        perform the operation.
    </p>
      
    Type Here: <input id = "input"/>
    <br><br>
      
    <button onclick = "GFG_Fun()">
        Click Here
    </button>
      
    <p id = "GFG"></p>
      
    <script>
        var geeks = document.getElementById('GFG');
          
        function GFG_Fun() {
            $('#input').css('textTransform', 'capitalize');
            geeks.innerHTML = "Text is capitalized";
        }
    </script
</body
  
</html>


Output:

Approach 2: In this example, we are using CSS property to perform the operation. A new ID has been added to the element which sets the property text-transform to capitalize.

Example:




<!DOCTYPE HTML> 
<html
  
<head
    <title
        How to convert first letter of a
        string to upper case using jQuery?
    </title>
      
    <script src=
    </script>
      
    <style>
        #capital {
            text-transform: capitalize;
        }
    </style>
</head
  
<body style = "text-align:center;"
      
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1>
      
    <p>
        Click on the button to
        perform the operation.
    </p>
      
    Type Here: <input id = "input"/>
    <br><br>
      
    <button onclick = "GFG_Fun()">
        Click Here
    </button>
      
    <p id = "GFG"></p>
      
    <script>
        var geeks = document.getElementById('GFG');
          
        function GFG_Fun() {
            $('#input').attr('id', 'capital');
            geeks.innerHTML = "Text is capitalized";
        }
    </script
</body
  
</html>


Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!