While formatting text on a web page, we often feel the need to capitalize the first letter of each word. If you want to do the same, there's an easy way to do it in JavaScript.
You will follow the same process of capitalizing the first letter of a string, just you need to do this for each word.
In this post, we'll cover two different methods for converting the first letter of an individual word to uppercase. This will make your content more readable and easy to consume.
Capitalize the First Letter of Each Word with JavaScript Methods
To capitalize the first letter of each word in JavaScript, you need to split the sentence or paragraph into an array of words using the split() method. Now you can loop through this array and convert the first letter of every word to uppercase.
Finally, you can again convert the array into a string using the join() method on this array.
const sentence = 'the quick brown fox jumps over the lazy dog'
const words = sentence.split(' ')
const capitalized = words.map((word) => {
return word.charAt(0).toUpperCase() + word.slice(1)
}).join(' ')
console.log(capitalized)
// The Quick Brown Fox Jumps Over The Lazy Dog
Here I am converting the sentence into an array of individual words using the split() method. It separates the words based on the spaces.
You can use different methods to loop through an array in JavaScript. I am going through each item (word) in this array using the map() method and returning the same word with its first letter capitalized.
Finally, the join() method is joining the array of capitalized words back into a string with spaces between each word.
Also Read: In-Depth Guide to Shuffle Any Type of JavaScript Array
Use Regex to Convert the First Letter of Each Word to UpperCase
If you don't want to use different JavaScript methods to convert the first letter of each word to uppercase, you can also a regular expression (Regex) to do so.
You just need to use the replace() method. It is very easy and concise. It replaces each occurrence of a lowercase letter that's either at the beginning of the string or preceded by a space.
The replace() method takes two arguments: a regular expression that matches the lowercase letters at the beginning of each word and a function that converts the matched letters to uppercase.
const sentence = 'the quick brown fox jumps over the lazy dog'
const capitalized = sentence.replace(/(^\w{1})|(\s+\w{1})/g, (letter) => {
return letter.toUpperCase()
})
console.log(capitalized)
// The Quick Brown Fox Jumps Over The Lazy Dog
The callback function in the replace() method takes the matched letter as input and returns its uppercase version by calling toUpperCase() method.
The regular expression used here is /(^\w{1})|(\s+\w{1})/g. Let me break it down for you:
- The ^ character at the beginning of the expression matches the start of the string.
- The \w character matches any word character (letters, digits, and underscores).
- The {1} specifies that only one occurrence of the preceding pattern should be matched.
- The | character separates two alternatives.
- The \s+ matches one or more whitespace characters.
- The g flag at the end of the expression specifies a global search, meaning that all matches in the string will be replaced.
Finally, this replace() method returns the capitalized version of our sentence.
Also Read: How to Capitalize the First Letter of Each Sentence in JavaScript
Conclusion
You can greatly enhance the readability of your text by capitalizing the first letter of each word. There are several ways available in JavaScript, including using JavaScript methods or a regular expression.
I have discussed both ways in this blog post for you. You can choose any one of these for your project to convert the first letter of every individual word in JavaScript.
