Convert a String to Title Case in JavaScript

avatar

Borislav Hadzhiev

Sun Oct 31 20213 min read

banner

Photo by Echo Grid

Convert a String to Title Case in JavaScript #

To convert a string to title case, call the replace() method with the following regular expression - /\w\S*/g. As a second parameter to the replace method, pass a function that takes every word in the string, converts the first character to uppercase and the rest to lowercase.

index.js
function getTitleCase(str) { return str.replace(/\w\S*/g, word => { return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(); }); } // ๐Ÿ‘‡๏ธ "One, Two, Three" console.log(getTitleCase('one, two, three'));
If you want to avoid using regular expressions, scroll down to the next code snippet.

We passed the following 2 parameters to the String.replace method:

  1. a regular expression that matches every word in the string
  2. a function that is invoked with each match and returns a replacement

The forward slashes / / mark the beginning and end of the regular expression.

The \w special character matches latin characters [a-zA-Z], numbers [0-9] and underscore _.

The \S character matches any single character other than white space.

The combination \w\S matches one in one two.

The asterisk * character matches the preceding item (word) 0 or more times.

We used the g (global) flag, because we want to match all occurrences of space separated words in the string.

If you need help reading a regular expression, check out this regex cheatsheet by the MDN docs, it has served me well over the years.

Each word will get passed to the function, where we convert the first character to uppercase and the rest to lowercase.

Indexes are zero-based in JavaScript, meaning the first character in a string has an index of 0 and the last - an index of string.length - 1.

The return value from the function serves as a replacement for each match (word) in the string. By converting each word to title case, we get a title cased string.

If you're not a fan of regular expressions, you can use a more functional approach.

To convert a string to title case:

  1. Split the string into an array of words using the split() method.
  2. Use the map() method to convert each word to title case.
  3. Use the join() method to join the words into a single string.
index.js
function getTitleCase(str) { return str .split(' ') .map(word => { return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(); }) .join(' '); } // ๐Ÿ‘‡๏ธ "One, Two, Three" console.log(getTitleCase('one, two, three'));

We used the String.split method to get an array of the words in the string.

The parameter we passed to the method is the separator - on which character the string should be split.

We want to split the string into an array of words, so we passed in a string containing a space as the separator.

index.js
// ๐Ÿ‘‡๏ธ ['one', 'two', 'three'] console.log('one, two, three'.split(' '));

The next step is to use the Array.map method to iterate over the array.

The function we passed to the map method gets invoked with each element (word) in the array.

Similarly to what we did previously, we uppercase the first character of each word and lowercase the rest.

The last step is to use the Array.join method to join the array of strings into a single string with a space separator.

This is a 3 step process:

  1. Split the string on each space.
  2. Title case each word in the array.
  3. Join the words with a space separator.
It's a matter of personal preference, but I'd go with the second approach as not many developers like / are familiar with regular expressions. The functional approach is more intuitive and commonly used.

Further Reading #

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee