🚀 Ways to Title Case Strings with Javascript

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


This content originally appeared on DEV Community and was authored by Yuli Petrilli

As part of a recent fix I had to do during work, I needed to title case an input of a group of sentences that would later be used to validate other 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 use this article to list a few ways to title case sentences but also to share the solution i ended up using and that could probably be of help to someone.

Let's begin!

What Title Case means

This 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:

Output example 1

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

javascript str.toLowerCase().split(' ')

then, when using the map(), this will do a callback function for each element in the array where with

javascript (word.charAt(0).toUpperCase() + word.substr(1))

we transform the element and build a new array from the results.

Output:
Using map()

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:
my case

Conclusion

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.

Happy learning and thank you for reading!

If this article was helpful to you, don't forget to hit that ❤️ button and support me with a follow, i will keep posting more content about tech, programming, career development and more! :)


This content originally appeared on DEV Community and was authored by Yuli Petrilli


Print Share Comment Cite Upload Translate Updates
APA

Yuli Petrilli | Sciencx (2023-03-16T23:56:50+00:00) 🚀 Ways to Title Case Strings with Javascript. Retrieved from https://www.scien.cx/2023/03/16/%f0%9f%9a%80-ways-to-title-case-strings-with-javascript/

MLA
" » 🚀 Ways to Title Case Strings with Javascript." Yuli Petrilli | Sciencx - Thursday March 16, 2023, https://www.scien.cx/2023/03/16/%f0%9f%9a%80-ways-to-title-case-strings-with-javascript/
HARVARD
Yuli Petrilli | Sciencx Thursday March 16, 2023 » 🚀 Ways to Title Case Strings with Javascript., viewed ,<https://www.scien.cx/2023/03/16/%f0%9f%9a%80-ways-to-title-case-strings-with-javascript/>
VANCOUVER
Yuli Petrilli | Sciencx - » 🚀 Ways to Title Case Strings with Javascript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/03/16/%f0%9f%9a%80-ways-to-title-case-strings-with-javascript/
CHICAGO
" » 🚀 Ways to Title Case Strings with Javascript." Yuli Petrilli | Sciencx - Accessed . https://www.scien.cx/2023/03/16/%f0%9f%9a%80-ways-to-title-case-strings-with-javascript/
IEEE
" » 🚀 Ways to Title Case Strings with Javascript." Yuli Petrilli | Sciencx [Online]. Available: https://www.scien.cx/2023/03/16/%f0%9f%9a%80-ways-to-title-case-strings-with-javascript/. [Accessed: ]
rf:citation
» 🚀 Ways to Title Case Strings with Javascript | Yuli Petrilli | Sciencx | https://www.scien.cx/2023/03/16/%f0%9f%9a%80-ways-to-title-case-strings-with-javascript/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.