Ways to Title Case Strings with Javascript

As part of a fix I had to do during work some time ago, I needed to title case an input of a group of sentences that would later be used to validate some other business logic. The problem was that these sentences needed certain considerations when applying the title case.

So, even when this is a specific case for a specific need I saw this as a good opportunity to not only save my script solution in case I need it in the future but to also use it for this article to share a few ways to title case sentences.

I hope you find this helpful, let’s begin!

What Title Case means

Title case just means converting to uppercase the first letter of every word in a sentence while the other ones remain in lowercase.

Examples

There are different ways you can find and use to convert a sentence to title case in Javascript, here are a few:

1. Using replace method and regex

function convertToTitleCase(str) {
  if (!str) {
      return ""
  }
  return str.toLowerCase().replace(/\b\w/g, s => s.toUpperCase());
}

console.log(convertToTitleCase('welcome to my article'));
console.log(convertToTitleCase('THE avengers'));

The shortest way to accomplish this, we use regex to match only the first letter of each word to then replace it as uppercase.

Side note: it’s good to normalize the string by converting everything first to lowercase before actually converting to title case.

Output:

2. Using the map() function

function convertToTitleCase(str) {
  if (!str) {
      return ""
  }
  
  return str.toLowerCase().split(' ').map(function (word) {
     return word.charAt(0).toUpperCase().concat(word.substr(1));
  }).join(' ');
}

console.log(convertToTitleCase('welcome AGAIN to MY aRticle'));
console.log(convertToTitleCase('THE avengers MOVIe'));

We first turn the sentence into an array with str.toLowerCase().split(' ') then, when using the map(), this will do a callback function for each element in the array where with word.charAt(0).toUpperCase() + word.substr(1) we transform the element and build a new array from the results.

Output:

Applying title case with exceptions

There can be cases where not all words in the sentence would need to be converted, which was the case i run into, here was my solution, which is basically using the map() way but adding the condition to check if the current word was or not eligible for title case.

const exceptions = ['of', 'the', 'and'];

function convertToTitleCase(str) {
  if (!str) {
      return ""
  }
  
  return str.toLowerCase().split(' ').map((word, i) => {
            return exceptions.includes(word) && i != 0 ? word : word.charAt(0).toUpperCase().concat(word.substr(1));
		}).join(' ');
} 

console.log(convertToTitleCase('lord OF the rings'));	
console.log(convertToTitleCase('people AND people'));	
console.log(convertToTitleCase('someTHING ABOUT THE article'));

Output:

Final Thoughts

There are many options out there we could use to convert sentences to title case, we just need to go with the one that works best for our needs.

Also, keep in mind that there could be edge cases where converting to title case can be used or adapted to, it will depend on what exactly needs to be accomplished with it and how it’s going to be used since there can be scenarios where it will could probably be impossible to always be correct when the input has been transformed.

Are you ready for more? Check out this 👉 Javascript Object Destructuring Explained with Examples