How to Convert String to Title Case in JavaScript

JavaScript provides the string methods toLowerCase() and toUpperCase(), but it does not have a built-in capitalize() method that converts a whole sentence to title case. In this guide, title case means lowercasing the input and then uppercasing the first character of each word separated by a regular space. This practical convention is useful for simple English text, but it is not a universal title-style rule.

The examples use split() to make an array of words, change each word’s first character, and use join() to rebuild a string. The loop and map() examples use charAt() for the first character and slice() for the rest. All three self-contained examples were executed successfully; each is followed by its selectable console output.

Title Case a String With a for Loop in JavaScript

The loop version makes each step explicit. First, toLowerCase() normalizes the letters, and split(' ') separates the string at literal spaces. The loop then replaces each array element with its first character in uppercase followed by the remainder of the word. Finally, join(' ') puts the words back into one string. The JavaScript split() reference describes the string operation used to create the array.

Run this example:

function titleCase(str) {
  const words = str.toLowerCase().split(' ');
  for (let i = 0; i < words.length; i++) {
    words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
  }
  return words.join(' ');
}

console.log(titleCase('hello pumpkin pumpkin you my hello honey bunny!'));

Hello Pumpkin Pumpkin You My Hello Honey Bunny!

This approach is useful when you want to add per-word logic inside the loop, such as skipping a particular word or applying a rule based on its position.

Title Case a String With the map() Method in JavaScript

map() applies a callback to each item in an array and returns a new array containing the callback results. Here it performs the same first-character conversion as the loop, while leaving the original split array untouched. join(' ') then combines the transformed words.

Run this example:

function titleCase(str) {
  return str.toLowerCase()
    .split(' ')
    .map(function (word) {
      return word.charAt(0).toUpperCase() + word.slice(1);
    })
    .join(' ');
}

console.log(titleCase('you gone MAD?'));

You Gone Mad?

Choose this version when a direct transform of every word reads clearly. Since map() returns an array, keep the final join(' ') to produce a string rather than an array.

Use the replace() Method to Title Case a String in JavaScript

You can also use replace() to uppercase the first character of each split word. The regular expression below matches one character at the start of a word; the callback converts that character, and an empty word has no match and stays empty. The surrounding split and join steps are the same as in the other examples.

Run this example:

function titleCase(str) {
  return str.toLowerCase()
    .split(' ')
    .map(function (word) {
      return word.replace(/^([\s\S])/, function (first) {
        return first.toUpperCase();
      });
    })
    .join(' ');
}

console.log(titleCase("i'm just appreciating hoho!"));

I'm Just Appreciating Hoho!

This version keeps the first-character change inside replace()’s callback. It still processes each word separately, so replace() does not remove the need for split() and join() in this implementation.

Choose an Approach and Understand Its Limits

Use the for loop when you want the transformation steps to be easy to extend with conditions. Use map() for a compact per-word transformation that returns a new array. The replace() version offers another way to change the first character, though it adds a regular expression where charAt() and slice() may be easier to read. None is inherently faster based on the evidence available here, so choose the form that best communicates the rule you need.

These examples split on the literal space character, not on every kind of whitespace. A tab or newline inside the input remains part of a word, and repeated spaces produce empty array elements; the shown transformations leave those empty elements empty and join(' ') preserves the repeated spaces. If input can contain varied whitespace, normalize or split it with an appropriate whitespace rule first, while deciding whether repeated spacing should be preserved.

The examples also capitalize a JavaScript character at the start of each space-delimited piece, rather than applying every language’s title-case conventions. Punctuation remains in place, so an apostrophe inside a word is not treated as a new word boundary. Case conversion for some scripts and names can require locale-aware or language-specific rules. Adapt the word-boundary and casing policy to your data instead of assuming that this simple transformation is suitable for every language or display name.