We can use jQuery to capitalize the first letter of a string by combining the String toUpperCase() and substring() methods.
var theString = "how are you?"
theString = theString.substring(0,1).toUpperCase() + theString.substring(1);
Let’s look at an example below.
We can create a simple function that will use jQuery to capitalize the first letter of a string.
We can do this by using the toUpperCase() and substring() methods.
function capitalizeFirstLetter(theString){
//This takes the first character of the string and capitalizes it
theString = theString.substring(0,1).toUpperCase() + theString.substring(1);
}
Using jQuery to Capitalize the First Letter of a String with a Click
In this simple example, we will let the user input a string, and we will capitalize the first letter of it.
Here is the HTML setup:
Capitalize First Letter
We will use the jQuery click() method that will run a function we will create. Our function will first use the val() method to get the string the user has entered.
We will then convert the first character to uppercase using the String toUpperCase() method.
We will finally post the results using the jQuery text() method.
$('#click-me').click(function(){
//Get the user string
var userString = $("#string1").val();
//Capitalize the first letter of the string
userString = userString.substring(0,1).toUpperCase() + userString.substring(1);
//Display the results
$("#results").text(userString);
});
The final code and output for capitalizing the first letter of a string in jQuery is below:
Code Output:
Full Code:
Capitalize First Letter
<script>
$('#click-me').click(function(){
var userString = $("#string1").val();
userString = userString.substring(0,1).toUpperCase() + userString.substring(1);
$("#results").text(userString);
});
</script>
Hopefully this article has been useful for you to learn how to use jQuery to capitalize the first letter of a string.