Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

How to Capitalize the First Letter of Each Word (Title Case) in JavaScript

by
Read Time:4 minsLanguages:

In this quick article, we’ll see how you can capitalize the first letter of all words in a string in JavaScript—also known as converting the text to title case.

JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern web browsers support it without the need for plugins. In this series, we’re discussing different tips and tricks that will help you in your day-to-day JavaScript development.

As a JavaScript developer, sometimes you need to capitalize the first letter of all words in a string—for example if you are emitting an Envato Tuts+ style title. There's no built-in function in JavaScript which allows you to capitalize all words in a string, but there are different ways that you could use to achieve it. Specifically, there are different JavaScript functions that you can use to achieve the desired effect.

We’ll discuss how to do it along with a couple of examples.

JavaScript Example: Capitalize the First Letter of All Words

In this section, we’ll build a custom JavaScript function which allows you to capitalize the first letter of all words in JavaScript.

Let’s have a quick look at the following example.

As you can see, we’ve made the convertFirstLetterToUpperCase JavaScript function, which takes a single argument. You need to pass a string as the first argument of the convertFirstLetterToUpperCase JavaScript function, and it processes the input string and returns the string by capitalizing the first letter of all words.

Let’s understand how it works. Firstly, we’ve used the toLowerCase JavaScript string method to convert the input string to lowercase letters. It makes sure that the resulting string is in lowercase. Next, we’ve used the split JavaScript string method to split the string with white space, and as a result, we have an array of strings.

Now, we just need to loop through all the elements of the array and capitalize the first letter of each element. Firstly, we’ve used the charAt JavaScript string method to get the first character, and then we’ve used the toUpperCase JavaScript string method to make it uppercase. Finally, we’ve used the substring JavaScript string method to get the rest of the string. By concatenating these two strings, it gives us the capitalized string.

Finally, we’ve used the join JavaScript array method to join all the elements of an array with the white space, and it returns the string. So that’s how it capitalizes the first letter of all words in a string.

JavaScript Example: Capitalize the First Letter of All Words With the Map Method

In the previous section, we discussed the JavaScript example to demonstrate how you can capitalize the first letter of all words in a string.

In this section, we’ll revise the aforementioned example with the map JavaScript array method. Let’s have a quick look at the following example.

As you can see, it’s a single line function which allows you to do it much more easily. That's thanks to the map method, which allows us to loop through array elements with much cleaner syntax. If you notice, we've used the slice JavaScript array method instead of the substring method in this version.

JavaScript Example: Convert to Title Case

In the previous section, we saw how to capitalize the first letter of all words in a string. That isn't actually how a title should look, though. In title case, we only capitalize the first letter of major words, and we leave minor words lower case.

Here's a sample of how to apply the same Envato Tuts+ title-case rules that we use on all our posts.

As you can see, we've added a regular expression, smallWords, to test whether a word is minor and should be left lowercase. We also created a simple function to check whether a word is at the beginning or end of the string, and whether it matches the small words list. Once again, we use the map method to transform each word. This time, we're also making use of the index parameter that map makes available—this is how we find out whether the word is at the beginning or end of the string.

Conclusion

Today, we discussed how to capitalize the first letter of all words in JavaScript, along with a couple of real-world examples. Finally, you saw how to code a slightly simplified version of the title case format we use here at Envato Tuts+.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.