JavaScript Capitalize First Letter

Table of Contents How to do in JavaScript capitalize first letter of string?1. JavaScript capitalized first letter of the word (slice () method).charAt() methodtoUpperCase() methodslice () method2. JavaScript capitalize first letter of string (display on an …

JavaScript Capitalize First Letter

How to do in JavaScript capitalize first letter of string?

In HTML and CSS, there is a built-in method “capitalize” to capitalized first letter of each word or string. JavaScript is not easy as other web languages to perform.

We cannot directly perform JavaScript capitalize 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+ I).

In this article, you will learn how to capitalize the first letter with these four methods

  • JavaScript capitalized first letter of the word (slice () method).
  • JavaScript capitalize first letter of string (display on an HTML page).
  • JavaScript first letter capitalized, and the rest of the letters are lowercase in a word.
  • JavaScript capitalize first letter of each word of a sentence (substring () method).

1. JavaScript capitalized 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 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 “d” in the below example.

toUpperCase() method

This method only applies to strings or words. It converts the defined index position character to the 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 procedure and print out in console tab
const letter = 'drasticcode';
const res = letter.charAt(0).toUpperCase() + letter.slice(1);
console.log(res);
//   output
//   Drasticcode

2. JavaScript capitalize first letter of string (display on an HTML page)

Use the JavaScript inside HTML tags. This will help you to experience JavaScript capitalize first letter on the web page without opening the console tab.

  • Use an input field that takes input from the user.
  • Use button with click () function that performs defined JavaScript function which is inside the script tags. 
  • innerHTML property helps to get JavaScript code and print after apply functions and modifying them.
<!DOCTYPE html>
<html>
	<head>
		Capitalize first letter 
	</head>	
	<body style = "text-align:center;">
		<h1 style = "color:blue;" >
			DrasticCode
		</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
JavaScript Capitalize First Letter

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 other all are lowercase, you need to follow the below method

3. JavaScript first letter 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('draticCode')
//output 
//Drasticcode

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

This method helps to create capitalize 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 and helps to manipulate each word individually. 
  • map () function creates an array and applies the function on that array.
  • Inside map () apply 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 capitalized first letter of each word and JavaScript capitalized first letter of each word of a sentence.

Suggested Read: Get URL Parameters with JavaScript

Leave a Comment