JavaScript Uppercase First Letter Of Each Word
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this article we will show you the solution of JavaScript uppercase first letter of each word, JS is a strong coding that is often utilized for creating interactive and active web apps.
The ability to modify texts, which involves modifying the lineup of letters within them, is one of its important traits.
JS offers several techniques for making capital the initial character of every word inside a string.
A specific technique is called the `toUpperCase()` function, that changes a combination of symbols to big letters.
One more technique involves using the `charAt()` function, that gives back the symbol located at an assigned position within some text.
Using a combination these techniques using loops or regex, it's easy to make the initial letter uppercase of each term inside a string.
Programmers can quickly perform this necessary change through the utilization of manipulation techniques for strings which are already part of JS.
This allows the job to divide a phrase into two phrases divided by a dot relatively uncomplicated.
This function function splits a piece of writing into smaller parts using a defined symbol.
Let's discuss about the concept of the starting character of every expression in javascript with capital letters.
Step By Step Guide On JavaScript Uppercase First Letter Of Each Word :-
<!DOCTYPE html>
<html>
<head>
<title>Uppercase First Letter</title>
<script>
function capitalizeFirstLetter() {
// Get the input value from the text field
let inputString = document.getElementById("inputString").value;
// Split the string into an array of words
let words = inputString.split(' ');
// Iterate through each word
for (let i = 0; i < words.length; i++) {
let word = words[i];
// Capitalize the first letter of each word
let capitalizedWord = word.charAt(0).toUpperCase() + word.slice(1);
// Update the array with capitalized word
words[i] = capitalizedWord;
}
// Join the array back into a string
let capitalizedString = words.join(' ');
// Display the capitalized string in the result div
document.getElementById("result").textContent = capitalizedString;
}
</script>
</head>
<body>
<h1>Uppercase First Letter</h1>
<input type="text" id="inputString" placeholder="Enter a string">
<button onclick="capitalizeFirstLetter()">Capitalize</button>
<div id="result"></div>
</body>
</html>
- We define a JavaScript method called capitalizeFirstLetter() in the <script> tag.
- The initial letter of each word in the supplied string gets capitalized by this function.
- The capitalizeFirstLetter() method is called when the "Capitalise" button is clicked by the user.
- The inputString variable is used to hold the value that was placed into the text box with the ID "inputString".
- With the space character (' ') serving as the delimiter, we divided the input string into an array of words.
- The word array now contains each word as an element.
- Using a for loop, we go through each word in the word array.
- The current index is represented by the loop variable i.
- The word at the current index i is retrieved and kept in the word variable.
- Using the charAt(0) function to obtain the initial character and the toUpperCase() function to convert it to uppercase, we capitalise the first letter of the term.
- The remainder of the term is then created by concatenating the capitalised first letter with slice(1)'s output.
- We add the capitalizedWord to the words array at the current index i.
- Using the space character (' ') as a separator, we rejoin the words array's elements into a single string.
- The capitalizedString variable holds the finished string.
- The HTML element with the ID "result" has its textContent property set to the capitalizedString.
- The capitalised string will appear in the div element with the ID "result" as a result.
Conclusion :-
As a result, we have successfully acquired the knowledge of the uppercase first letter of each word in javascript.
We also discovered that there are several ways to capitalize the initial letter of each word in a string using JavaScript.
In this illustration, the desired transformation was accomplished by using built-in string methods in JavaScript.
I hope this article on JavaScript uppercase first letter of each word helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
