Open In App

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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 set the text-transform property value to capitalize.

Example:

html




<!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>
        let 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:

html




<!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>
        let geeks = document.getElementById('GFG');
 
        function GFG_Fun() {
            $('#input').attr('id', 'capital');
            geeks.innerHTML = "Text is capitalized";
        }
    </script>
</body>
 
</html>


Output:



Last Updated : 13 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads