JavaScript Capitalize First Letter

How does JavaScript capitalize the first letter of a string?
In HTML and CSS, there is a built-in method “capitalize” to capitalize the first letter of each word or string. JavaScript is not easy as other web languages to perform.
We cannot directly perform JavaScript to capitalize the first letter; we will create a function with the help of some other methods such as slice, substring, uppercase, etc.
Note: all the queries that are not embedded with HTML tags, will run inside the browser console tab (Shit+ Ctrl+ J).
In this article, you will learn how to capitalize the first letter with these four methods

JavaScript capitalized the word's first letter (slice () method).
JavaScript capitalizes the first letter of the string (displayed on an HTML page).
JavaScript's first letter is capitalized, and the rest of the letters are lowercase in a word.
JavaScript capitalizes the first letter of each word of a sentence (substring () method).

1. JavaScript capitalized the first letter of the word (slice () method).

This is the method to the capitalized first letter of a string or word.
Define a variable that contains a word in which the first letter you want to capitalize using JavaScript.

● charAt() method
charAt() returns the character of given index. charAt(0) select the first letter such as “a” in the below example.
● toUpperCase() method
This method only applies to strings or words. It converts the defined index position character to uppercase letters.
● slice () method
By using the slice method, slice the rest of the letters from the first letter and gives the same output sequence as input without any change.
Define a variable named “res” that will store all the procedures and print them out in the console tab

const letter = 'aisha';
const res = letter.charAt(0).toUpperCase() + letter.slice(1);
console.log(res);
//   output
//   Aisha

2. JavaScript capitalizes the first letter of the string (displayed on an HTML page)

Use the JavaScript inside HTML tags. This will help you to experience JavaScript capitalizing the first letter on the web page without opening the console tab.
● Use an input field that takes input from the user.
● Use the button with the click () function that performs the defined JavaScript function which is inside the script tags.
● innerHTML property helps to get JavaScript code and print after applying functions and modifying them.

<!DOCTYPE html>
<html>
    <head>

    </head> 

    <body style = "text-align:center;">
        <h1 style = "color:blue;" >
            Capitalize the first letter
        </h1>

        <input id = "input" type="text" name="input"/>
        <button onclick="capitalizeFirstLetter()">
            Click to Capitalize
        </button
        <h3 id = "div" style="color: orange">
        </h3>   
        <script>
        function capitalizeFirstLetter() {
        const input = document.getElementById("input");
        const x = document.getElementById("div");
        const string = input.value;
        x.innerHTML = string[0].toUpperCase() +string.slice(1);
        }
        </script>
    </body>
</html>

Output

Note: this method will only convert the first letter to uppercase and other all prints as input. if you have camel letters input, this method is not going to show you pretty good output. To perform the first letter as capital and others all are lowercase, you need to follow the below method

3. JavaScript's first letter is capitalized, and the rest of the letters are lowercase in a word

● In this method after slicing the first letter with the rest of the letters, apply uppercase to the first letter and lowercase to the rest of them.
● Call the defined function “capitalize” with the string and get the output.

function capitalize(string) {
return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();} 
capitalize('aisha')
//output 
//Aisha

4. JavaScript capitalizes the first letter of each word of a sentence (substring () method).

This method helps to create capitalize the first letter of each word of a sentence with the help of JavaScript. To perform this first create a function of input that will take input sentences from the user.
● substring and slice both work the same, but substring () is a bit faster than the slice () method.
● All input convert to lowercase and split with space that will help to manipulate each word individually.
● map () function creates an array and applies the function on that array.
● Inside map () apply the function for the first letter of each word that is separated with space to return as uppercase

function capitalize(input) {  
    return input.toLowerCase().split(' ').map(s => s.charAt(0).toUpperCase() + s.substring(1)).join(' ');  }  
capitalize ('i am a web developer')
// output
// "I Am A Web Developer"

Conclusion

In this article, we covered four ways to get JavaScript to capitalize the first letter of each word and JavaScript to capitalize the first letter of each word of a sentence.

Blog

JavaScript Capitalize First Letter

Aisha Rajput

1. JavaScript capitalized the first letter of the word (slice () method).

2. JavaScript capitalizes the first letter of the string (displayed on an HTML page)

3. JavaScript's first letter is capitalized, and the rest of the letters are lowercase in a word

4. JavaScript capitalizes the first letter of each word of a sentence (substring () method).

Conclusion

Join Our Newsletter. No Spam, Only the good stuff.

Related