Last Updated on August 6, 2022 by Roshan Parihar
In this tutorial, learn how to uppercase first letter of text using jquery. Make the first letter of all the words of a string to capitalize with jQuery. The short answer is: use the replace() function along with toUpperCase() function to replace the first letter with capitals.
It is also requires getting the text content using jQuery. After that, it uses the function to convert the first letter of each word to capital.
Let’s find out with the examples given below.
How to Uppercase First Letter of Text Using jQuery
To convert the first letters of the string to uppercase, you have to first use the text() function to get the text content. After that, you have to use the replace() function and toUpperCase() to replace the first character with a capital letter.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(document).ready(function(){ $('.btnjq').click(function(){ var mytxtjq = $('.myStringjq').text(); Newtxtjq = mytxtjq.replace(/\b[a-z]/g, function(txtjq) { return txtjq.toUpperCase(); }); $('.myStringjq').text(Newtxtjq); }); }); </script> <p class="myStringjq">hello world to my string</p> <button type="button" class="btnjq">Uppercase with jQuery</button> |
Output
hello world to my string
The above example contains the text string and the button. Each text of the string is in a small letter. You have to make the first letter of each word capital. When you click the above button, jQuery uppercase the first letter to capitals.
The jQuery replace function replaces the first small letters of each word with the capital letters.
jQuery Capitalize First Character of the First Word of String
To capitalize the first character of the first word of the sentence, you have to use the text() function to get the text content of the string. After that, you have to use the substring() with toUpperCase() function as given below.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> $(document).ready(function(){ $('.btnjqCapital').click(function(){ var txtjqSmall = $('.myStrjqCapital').text(); var txtjqtoCapital = txtjqSmall.substring(0, 1).toUpperCase() + txtjqSmall.substring(1); $('.myStrjqCapital').text(txtjqtoCapital); }); }); </script> <p class="myStrjqCapital">hello world to my string</p> <button type="button" class="btnjqCapital">Capitalize with jQuery</button> |
Output
hello world to my string
When you click the above example, you will get the first character of the first word of a sentence to capitalize.
How to Capitalize First Letter Using CSS
In addition to jQuery, you can also make the first letter uppercase using the CSS text-transform property. You have to Pass capitalize as the value of the text-transform property. See the example given below to learn the method.
|
1 2 3 4 5 6 |
<style> .mytextcss{ text-transform: capitalize; } </style> <p class="mytextcss">this is another string</p> |
Output
this is another string
The above example shows the converted first letter of the text to capital.
If you want to perform the transformation of the text on a button click. You have to use the jQuery method to make the conversion.
You May Also Like to Read
- Remove All White Spaces From Text Using JQuery
- Get Div Text Content And HTML Content With JQuery
- Add Shadow Effect On Text HTML Using CSS
I hope you like the tutorial on how to uppercase the first letter of text using jquery.
References