If you’re new to jQuery, you may be wondering how to capitalize the first letter in jQuery. It’s actually quite simple – all you have to use is a small function.
This tutorial will show you how it’s done. So don’t wait any longer – start learning today!
CONTENTS
How to capitalize the first letter in a sentence in jQuery?
To capitalize the first letter in jQuery, you can use the following code:
<!doctype html>
<html lang="en">
<head>
<title>Capitalize First Letter</title>
</head>
<body>
<input type="text" id="inputText">
<button id="makeCapital">Convert</button>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script>
$(document).ready(function(){
$("#makeCapital").click(function(){
var txt = $("#inputText").val();
var converted_text = txt.substr(0,1).toUpperCase()+txt.substr(1);
alert(converted_text);
});
});
</script>
</body>
</html>If you write “welcome to codehasbug” into the textbox and click on that button, you will get “Welcome to codehasbug”.
- The
txt.substr(0,1)function will return the first character from the string i.e. “w”. - Now using
toUpperCase()function, convert the first character to capital. - The
txt.substr(1)function will return the rest of the string except the first character i.e. “w”.
How to convert string to camel case in jQuery?
Camel case is a term used in computer programming to describe the practice of using uppercase letters at the beginning of each word in a compound name, as opposed to using all lowercase letters. For example, “MyName” would be a camel case, while “myname” would not. See the below code to convert string to camel case.
<!doctype html>
<html lang="en">
<head>
<title>convert string to camel case</title>
</head>
<body>
<input type="text" id="inputText">
<button id="MakeCamelCase">Convert</button>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script>
$(document).ready(function(){
$("#makeCapital").click(function(){
var txt = $("#inputText").val();
var converted_text = txt.toLowerCase().replace(/\b[a-z]/g, function(cText) {
return cText.toUpperCase();
});
alert(converted_text);
});
});
</script>
</body>
</html>If you enter “welcome to codehasbug”, it will return “Welcome To Codehasbug”.
How to Capitalize First Letter Using CSS?
You can capitalize the first letter of a text using the CSS “text-transform” property. The “text-transform” property lets you change the case of the text. You can use it to change the text from lowercase to uppercase, or vice versa.
Here is an example of how to use the “text-transform” property to capitalize the first letter of a text:
<p>This is an example of how to use the "text-transform" property to capitalize the first letter of a text.</p>CSS:
p{
text-transform: capitalize;
}Output:
This Is An Example Of How To Use The "Text-Transform" Property To Capitalize The First Letter Of A Text.
