Lodash title case (uppercase first letter of every word)

JavascriptLodash

Javascript Problem Overview


I'm looking through the lodash docs and other Stack Overflow questions - while there are several native JavaScript ways of accomplishing this task, is there a way I can convert a string to title case using purely lodash functions (or at least existing prototypal functions) so that I don't have to use a regular expression or define a new function?

e.g.

This string ShouLD be ALL in title CASe

should become

This String Should Be All In Title Case

Javascript Solutions


Solution 1 - Javascript

This can be done with a small modification of startCase:

_.startCase(_.toLower(str));

console.log(_.startCase(_.toLower("This string ShouLD be ALL in title CASe")));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>

Solution 2 - Javascript

_.startCase(_.camelCase(str))

For non-user-generated text, this handles more cases than the accepted answer

> startCase(camelCase('myString'))
'My String'
> startCase(camelCase('my_string'))
'My String'
> startCase(camelCase('MY_STRING'))
'My String'
> startCase(camelCase('my string'))
'My String'
> startCase(camelCase('My string'))
'My String'

Solution 3 - Javascript

with lodash version 4.

_.upperFirst(_.toLower(str))

Solution 4 - Javascript

'This string ShouLD be ALL in title CASe'
  .split(' ')
  .map(_.capitalize)
  .join(' ');

Solution 5 - Javascript

There are mixed answers to this question. Some are recommending using _.upperFirst while some recommending _.startCase.

Know the difference between them.

i) _.upperFirst will transform the first letter of your string, then string might be of a single word or multiple words but the only first letter of your string is transformed to uppercase.

_.upperFirst('jon doe')

output:

Jon doe

check the documentation https://lodash.com/docs/4.17.10#upperFirst

ii) _.startCase will transform the first letter of every word inside your string.

_.startCase('jon doe')

output:

Jon Doe

https://lodash.com/docs/4.17.10#startCase

Solution 6 - Javascript

That's the cleanest & most flexible implementation imo from testing it on my own use cases.

import { capitalize, map } from "lodash";

const titleCase = (str) => map(str.split(" "), capitalize).join(" ");

// titleCase("ALFRED NÚÑEZ") => "Alfred Núñez"
// titleCase("alfred núñez") => "Alfred Núñez"
// titleCase("AlFReD nÚñEZ") => "Alfred Núñez"
// titleCase("-") => "-"

Solution 7 - Javascript

Here's a way using ONLY lodash methods and no builtin methods:

_.reduce(_.map(_.split("Hello everyOne IN the WOrld", " "), _.capitalize), (a, b) => a + " " + b)

Solution 8 - Javascript

Below code will work perfectly:

var str = "TITLECASE";
_.startCase(str.toLowerCase());

Solution 9 - Javascript

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

You can also split out the map function to do separate words

Solution 10 - Javascript

This can be done with only lodash

properCase = string =>
		words(string)
			.map(capitalize)
			.join(' ');

const proper = properCase('make this sentence propercase');

console.log(proper);
//would return 'Make This Sentence Propercase'

Solution 11 - Javascript

From https://github.com/lodash/lodash/issues/3383#issuecomment-430586750

'JHON&JOHN C/O DR. BLah'.replace(/\w+/g, _.capitalize);

result:

'Jhon&John C/O Dr. Blah'

Solution 12 - Javascript

 var s = 'This string ShouLD be ALL in title CASe';
 _.map(s.split(' '), (w) => _.capitalize(w.toLowerCase())).join(' ')

Unless i missed it, lodash doesnt have its own lower/upper case methods.

Solution 13 - Javascript

Not as concise as @4castle's answer, but descriptive and lodash-full, nonetheless...

var basicTitleCase = _
    .chain('This string ShouLD be ALL in title CASe')
    .toLower()
    .words()
    .map(_.capitalize)
    .join(' ')
    .value()

console.log('Result:', basicTitleCase)
console.log('Exact Match:' , basicTitleCase === 'This String Should Be All In Title Case')

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>

Solution 14 - Javascript

Here's another solution for my use case: "devil's backbone"

Simply:

function titleCase (str) {
  return _.map(str.split(' '), _.upperFirst).join(' ');
}

Using startCase would remove the apostrophe, so I had to work around that limitation. The other solutions seemed pretty convoluted. I like this as it's clean, easy to understand.

Solution 15 - Javascript

you can simply use the lowdash capitalize methode , it Converts the first character of string to upper case and the remaining to lower case. https://lodash.com/docs/#capitalize

const str = 'titlecase this string ';
_.capitalize(str); //Titlecase This String

Solution 16 - Javascript

with lodash 4, you can use _.capitalize()

_.capitalize('JOHN') It returns 'John'

See https://lodash.com/docs/4.17.5#capitalize for details

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionbrandonscriptView Question on Stackoverflow
Solution 1 - Javascript4castleView Answer on Stackoverflow
Solution 2 - JavascriptaristidesflView Answer on Stackoverflow
Solution 3 - JavascriptJames NguyenView Answer on Stackoverflow
Solution 4 - JavascriptCD..View Answer on Stackoverflow
Solution 5 - JavascriptVishal ShettyView Answer on Stackoverflow
Solution 6 - Javascriptalewis729View Answer on Stackoverflow
Solution 7 - JavascriptBrandonView Answer on Stackoverflow
Solution 8 - JavascriptTarun MajumderView Answer on Stackoverflow
Solution 9 - JavascriptLuke RobertsonView Answer on Stackoverflow
Solution 10 - JavascriptJustin BrownView Answer on Stackoverflow
Solution 11 - JavascriptRafal EndenView Answer on Stackoverflow
Solution 12 - JavascriptagmcleodView Answer on Stackoverflow
Solution 13 - Javascriptm-a-r-c-e-l-i-n-oView Answer on Stackoverflow
Solution 14 - JavascriptalbertpeiroView Answer on Stackoverflow
Solution 15 - Javascripthassen bejaouiView Answer on Stackoverflow
Solution 16 - JavascriptLI ZhuoranView Answer on Stackoverflow