Skip to main content Accessibility Feedback

Converting a string to title case with vanilla JavaScript

Yesterday we looked at how to convert strings to uppercase and lowercase with vanilla JavaScript. Today, let’s look at how to convert them to title case (the first letter of every word capitalized).

There’s no native method for this, but we can combine a few methods into a helper function to title case strings.

  1. First, we’ll convert our entire string to lowercase.
  2. Next, we’ll split the string into an array of words using as the delimiter.
  3. Then, we’ll loop through each word in our array.
  4. After that, we’ll capitalize the first letter, and lowercase the rest of the string.
  5. Finally, we’ll combine all of the words back together into a string.
// https://gist.github.com/SonyaMoisset/aa79f51d78b39639430661c03d9b1058#file-title-case-a-sentence-for-loop-wc-js
var toTitleCase = function (str) {
    str = str.toLowerCase().split(' ');
    for (var i = 0; i < str.length; i++) {
        str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1);
    }
    return str.join(' ');
};

And we’d use it like this.

var str = 'HeRe is a MIXED capitalization StRiNg.';

// returns: "Here Is A Mixed Capitalization String."
var str = toTitleCase(str);

🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips