How to convert first letter of a string to upper case using jQuery ?
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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script></head><body style="text-align:center;"> <h1 style="color:green;"> w3wiki </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 Beginner = document.getElementById('GFG'); function GFG_Fun() { $('#input').css('textTransform', 'capitalize'); Beginner.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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <style> #capital { text-transform: capitalize; } </style></head><body style="text-align:center;"> <h1 style="color:green;"> w3wiki </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 Beginner = document.getElementById('GFG'); function GFG_Fun() { $('#input').attr('id', 'capital'); Beginner.innerHTML = "Text is capitalized"; } </script></body></html> |
Output: