DEV Community

Web Basics: How to Capitalize a Word in JavaScript

Samantha Ming on January 31, 2019

Back to another round of Web Basics. In the last one, we learned How to Reverse a String in Javascript. By the way, for those new to my community...

Read full post

Itachi Uchiha • Jan 31 '19

I have a function exactly do that. (I use this function for 3 years. I just changed for new ES standards)

const capitalize = (str) => {
  return str
    .toLowerCase()
    .split(' ')
    .map(strWord => strWord.substring(0, 1).toUpperCase() + strWord.substring(1, strWord.length))
    .join(' ')
}

In this example, this function firstly takes a string.

After that, the whole string will be lowercase.

After that, the string will be split with empty spaces. (Ex: I HAVE NO IDEA)

Now, we have words array. I use the map method to manipulate the array.

We'll take the first letter of the word. This letter will be uppercase. The others will be lowercase.

If you know how the substring method works, you won't be confused.

And the last one, we'll concatenate the words to create our new string. That's all.

Matteo Rigon • Jan 31 '19 • Edited

const capitalize = (str) => {
    return str
        .split('')
        .map((c,i) => i ? c.toLowerCase() : c.toUpperCase())
        .join('')
}

Might be more performant since you have to loop the array anyway

Mihail Malo • Feb 4 '19 • Edited

You can just map on the string :v

const capitalize = str =>
  Array.prototype.map
    .call(str, (c, i) => i ? c.toLowerCase() : c.toUpperCase())
    .join('')

But no, it's most likely not going to be performant (even like this), because it involves indexing into every character instead of handing the underlying native string to the native method.

Worse yet, .split('') and such don't play well with composite Unicode graphemes.

Samantha Ming • Feb 4 '19

Woo, I love this solution! Nice use to the falsy value to check the first character (cause 0 is false). Thanks for sharing 💯

Mihail Malo • Feb 4 '19 • Edited

You can omit the second argument in substring, substr and slice to get the rest of the string until the end.
You can also use charAt(0) or even .charAt() to get the first char instead of a slicing method.

const capitalize = str => str
  .toLowerCase()
  .split(' ')
  .map(strWord => strWord.charAt().toUpperCase() + strWord.slice(1))
  .join(' ')

Samantha Ming • Feb 4 '19

Nice use to map! And awesome explanation with it! Thanks for sharing 🤓

José Muñoz • Jan 31 '19

here's my take on it with ES7

const capitalize = ([initial, ...rest]) => `${initial.toUpperCase()}${rest.join('').toLowerCase()}`;

a little cleaner

const capitalize = input => {
  const [initial, ...rest] = input;
  const capitalizedInitial = initial.toUpperCase();
  const loweredBody = rest.join('').toLowerCase();

  return `${capitalizedInitial}${loweredBody}`;
};

kurisutofu • Feb 5 '19 • Edited

const [initial, ...rest] = input;

I didn't think of it that way. I like it!

Samantha Ming • Feb 4 '19

One-liner solutions are most of the time my favs too! 😜

Mihail Malo • Feb 4 '19

`TextDecoder` solution:

{
  const encoder = new TextEncoder()
  const decoder = new TextDecoder()
  const capitalizeASCIIalphanum = str => {
    const arr = encoder.encode(str)
    const len = arr.length
    let val = arr[0]
    if (val > 0x60) arr[0] = val - 0x20
    for (let i = 1; i < len; i++) {
      val = arr[i]
      if (val < 0x5b) arr[i] = val + 0x20
    }
    return decoder.decode(arr)
  }


  const { log } = console
  log(capitalizeASCIIalphanum("hello"))
  log(capitalizeASCIIalphanum("GREAT"))
  log(capitalizeASCIIalphanum("aWESOME"))
}

Many checks are missing. This is intentional, because we are going to pretend that this is performant.

Mihail Malo • Feb 4 '19 • Edited

`String.prototype.replace(regex, fn)` solution:

{
  const reWord = /(\w)(\w*)/g
  const replacer = (_, head, tail) => head.toUpperCase() + tail.toLowerCase()
  const capitalize = str => str.replace(reWord, replacer)


  console.log(capitalize("hello GREAT\taWESOME\nyeoss"))
}

diek • Feb 1 '19

If you only want the first word capitalized:

'mi texto sin caPPPPitalizar'.toLowerCase().replace(/^[a-z]/i,(c)=>c.toUpperCase());
// output: "Mi texto sin cappppitalizar"

diek • Feb 1 '19

'mi texto sin caPPPPitalizar'.toLowerCase().replace(/\b\w/gi,(c)=> c.toUpperCase());

Mihail Malo • Feb 5 '19 • Edited

This is probably the best multi-word solution.
I totally forgot about \b, it is excellent.
I totally emulated it with /(?:^|\s)\w/, since capitalizing the whitespace doesn't do anything, but this is just so much better!

Does the i flag improve performance and not harm it though?

I'd potentially hoist the regex and callback constructions out of the function, although that may be crazy to do.

diek • Feb 5 '19

Hi, the i doesn't does anything in this case, it is my mania of writing it always. The mdn's docu says this about \w:

Matches any alphanumeric character from the basic Latin alphabet, including the underscore. Equivalent to [A-Za-z0-9_]

So \w is case insesitive already.

Mihail Malo • Feb 5 '19 • Edited

OH NO

'mi ke$ha'.toLowerCase().replace(/\b\w/gi, c => c.toUpperCase())
//> "Mi Ke$Ha"

:'(

diek • Feb 5 '19

That was expected, which result do you wanted?

Mihail Malo • Feb 5 '19

Try my honestly unironically inferior regex and see:

'mi ke$ha'.toLowerCase().replace(/(?:^|\s)\w/g, c => c.toUpperCase())

Samantha Ming • Feb 4 '19

regex ahhhh 😅 I need to get better at that cause I know how powerful it is 😆

kurisutofu • Feb 1 '19 • Edited

Not as fancy as other solutions but I believe this works.

const capitalize = (str) => str.charAt(0).toUpperCase() + str.substr(1).toLowerCase();

Samantha Ming • Feb 4 '19

No need to always be fancy. This works perfectly! Great 👍

Jake Murray • Jan 31 '19

Awesome guide!
This is one situation where I REALLY wish JS would take after Python.

Samantha Ming • Feb 4 '19

I'm not familiar with Python -- is it more concise?

Jake Murray • Feb 4 '19

Python has an awesome title() method that will capitalize the first letter of every word in a string while lower casing the others.

Terence Lucas Yap • Jan 31 '19

Another great post as usual. 👍

Samantha Ming • Feb 4 '19

Thanks! 😄

TextDecoder solution:

String.prototype.replace(regex, fn) solution:

OH NO

`TextDecoder` solution:

`String.prototype.replace(regex, fn)` solution: