Uppercase First Letter of Text in jQuery and CSS

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.

Test it Live

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.

Test it Live

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.

Test it Live

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

I hope you like the tutorial on how to uppercase the first letter of text using jquery.

References