Lodash title case (uppercase first letter of every word)

Question

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

you can do same thing from HTML also, **style="text-transform: capitalize"** — Apurv Chaudhary, Oct 09 '18 at 10:41
The reason why this doesn't exist in `lodash` is because different use cases expect different results from it. When `titleCase`-ing french names (e.g: `jean-pierre`), the expected result is `Jean-Pierre`. But when `titleCase`-ing npm package names, the expected result from `some-package-name` is `Some Package Name`. — tao, Feb 17 '22 at 23:02
Since `lodash` doesn't offer a good solution because of special characters issue, here's another ready to use package for that: `titleCase(str.toLowerCase())` from https://www.npmjs.com/package/title-case . Tis properly handles special characters and capitalization after `-` and `'` — maganap, Nov 26 '22 at 15:11

4castle · Accepted Answer · 2016-06-28T19:37:30.727

319

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>

edited Jun 28 '16 at 19:37

answered Jun 28 '16 at 19:14

4castle

32,613
11
69
106

4

`_.startCase("aaa BBB ccc") === "Aaa BBB Ccc"` – Brandon Jun 28 '16 at 19:21
@Brandon How about now? – 4castle Jun 28 '16 at 19:23
2

I like it. I didn't know about `startCase`. – Brandon Jun 28 '16 at 19:23
3

_.startCase("camelString") === "Camel String" but _.startCase(_.toLower("camelString")) === "Camelstring" seems like lodash needs a titleCase method – aristidesfl Sep 15 '16 at 11:08
@aristidesfl To handle the situation where the input was camelCase, you would need to run it through [`_.lowerCase`](https://lodash.com/docs/4.15.0#lowerCase) first instead of `_.toLower`. But yeah, it's too bad there isn't a function that just goes straight to it. – 4castle Sep 15 '16 at 14:56
@aristidesfl But it would break the string `'This string ShouLD be ALL in title CASe'` so I didn't do it. Since `ShouLD` would become `Shou L D` – 4castle Sep 15 '16 at 15:08
@4castle true. however I suspect that in most situations where you want to display title case, you don't start with random CrAzY CaSE. Most often one wants to convert from other type of case, and the suggested method handles those better (upper, camel, pascal, snake) http://stackoverflow.com/a/39510222/1445812 – aristidesfl Sep 18 '16 at 17:32
@aristidesfl Right, but this question is about a CrAzY CaSE, so that answer does not answer the question. – 4castle Sep 18 '16 at 17:35
@4castle even though the question is not specifically about CraZy CaSE, the provided example is CrAzY CaSE, so fair enough. Can't get tired of typing in CrAzY CaSE. – aristidesfl Sep 22 '16 at 17:33
9

I like this, however, it removes characters such as `:`, that is a problem. – JabberwockyDecompiler May 25 '18 at 15:04
4

It does not work for first names with accent (Spanish "Martínez Cortés Peña" becomes "Martinez Cortes Pena") or with hyphens (French "Jean-Louis" becomes "Jean Louis"). Same goes for any "*Case" functions of lodash – Flo May 10 '19 at 20:29
1

We should avoid _ imports (import _ from 'lodash'`) this simply passes a bad practice to people – Leap Hawk Jan 21 '21 at 09:05
This will work for the example in the question however, it's important to note that it removes special characters like underscores and hyphens from the string. – Piyush Balapure Jan 19 '22 at 07:10
this is not title case /: words like "the" get capitalized to "The". – John Miller May 04 '23 at 18:17
@JohnMiller Title case has many different definitions. See the various rules here: https://capitalizemytitle.com/#capitalizationrules The OP specified they just want to uppercase the first letter of every word. – 4castle May 09 '23 at 12:30

score 74 · Answer 2 · answered Sep 15 '16 at 11:44

74

_.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'

answered Sep 15 '16 at 11:44

aristidesfl

1,310
10
15

1

equivalent to `_.startCase(_.lowerCase(string))` – Ivan Yulin Dec 08 '21 at 10:46
`camelCase` stomped on by the `startCase`, it's no longer a camel. – MrYellow Aug 24 '22 at 01:53

score 49 · Answer 3 · answered Jul 17 '17 at 03:01

49

with lodash version 4.

_.upperFirst(_.toLower(str))

answered Jul 17 '17 at 03:01

James Nguyen

722
6
16

5

This one is better than `startCase` because it can handle more letters than a-z, for example å, ä and ö. – Lars Nyström Mar 05 '18 at 10:21
18

upperFirst will only change the first word's first character, not for subsequent words. I don't believe this is better than startCase for this particular reason. – Raghavan Nov 01 '18 at 00:26
Finally a correct answer! – MrYellow Aug 24 '22 at 01:54

score 31 · Answer 4 · answered Jun 28 '16 at 19:16

31

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

answered Jun 28 '16 at 19:16

CD..

72,281
25
154
163

2

Definitely the most concise, like it. Obviously still requires splitting into an array, but that's still the shortest and sweetest solution from what I can tell. Also, per the issue 1528 that @AlexandreThebaldi indicated, probably should use `upperFirst` instead of `capitalize`. – brandonscript Jun 28 '16 at 19:19
... but _.startCase definitely wins :) – brandonscript Jun 28 '16 at 19:25
5

`_.startCase` removes punctuation. Example `_.startCase('first second etc...` returns the string `First Second Etc` – LuckyStarr Jul 12 '17 at 14:55
This was better for my use case as `startCase` converts everything to a blank for example `user_name` will be `User Name`, and i only wanted `User_name` like the `text-transform: capitalize` property of CSS – gonzarodriguezt Aug 16 '19 at 20:05

score 18 · Answer 5 · answered Jun 27 '18 at 06:11

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

Yep, but what about mixed case strings? Neither of these will make ‘jOn DoE’ into ‘Jon Doe’ without `_.lower()`. — brandonscript, Jun 27 '18 at 06:13

score 7 · Answer 6 · answered Mar 29 '21 at 17:45

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("-") => "-"

score 4 · Answer 7 · answered Oct 22 '21 at 14:16

4

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'

answered Oct 22 '21 at 14:16

Rafal Enden

3,028
1
21
16

score 3 · Answer 8 · answered Jun 28 '16 at 19:13

3

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)

answered Jun 28 '16 at 19:13

Brandon

38,310
8
82
87

Tarun Majumder · Answer 9 · 2020-05-28T05:00:33.377

3

Below code will work perfectly:

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

edited May 28 '20 at 05:00

answered Dec 01 '18 at 16:12

Tarun Majumder

59
7

score 2 · Answer 10 · answered Sep 14 '19 at 06:25

2

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'

answered Sep 14 '19 at 06:25

Justin Brown

21
2

You need to require capitalize and words from lodash. – Justin Brown Sep 15 '19 at 15:06
https://lodash.com/docs/4.17.15#words https://lodash.com/docs/4.17.15#capitalize – Justin Brown Sep 15 '19 at 15:08
Yes, but you’re not calling the functions from lodash; unless you’ve aliased them somehow `var words = ._words` – brandonscript Sep 19 '19 at 15:26

score 1 · Answer 11 · answered Jun 28 '16 at 19:13

1

 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.

answered Jun 28 '16 at 19:13

agmcleod

13,321
13
57
96

@vbotio looks like `_.upperFirst` only applies to the first character (a synonym for `_.capitalize()`?) – brandonscript Jun 28 '16 at 19:17
2

`capitalize` and `upperFirst` do different things. – Brandon Jun 28 '16 at 19:19
_.capitalize applies to the entire string – vbotio Jun 28 '16 at 19:19

Luke Robertson · Answer 12 · 2019-05-23T07:02:01.890

1

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

edited May 23 '19 at 07:02

answered May 23 '19 at 06:30

Luke Robertson

1,592
16
21

m-a-r-c-e-l-i-n-o · Answer 13 · 2016-06-28T21:07:02.113

0

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>

edited Jun 28 '16 at 21:07

answered Jun 28 '16 at 19:33

m-a-r-c-e-l-i-n-o

2,622
18
26

I'd guess that the verbosity and length of the answer makes it almost undesirable. I didn't downvote, but it wouldn't be my first choice. – brandonscript Jun 29 '16 at 02:04

score 0 · Answer 14 · answered Dec 31 '17 at 16:20

0

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.

answered Dec 31 '17 at 16:20

albertpeiro

356
4
14

This, however, fails to titleCase a string that has all uppercase letters. – alewis729 Mar 29 '21 at 16:27

score -3 · Answer 15 · answered Mar 29 '22 at 17:25

-3

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

answered Mar 29 '22 at 17:25

hassen bejaoui

1
1

No, this doesn't work for already uppercased letters. – brandonscript Mar 30 '22 at 19:32

score -4 · Answer 16 · answered Mar 22 '18 at 08:31

-4

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

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

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

answered Mar 22 '18 at 08:31

LI Zhuoran

1
1

Would be good to test the use case for a sentence of words. Suspect this does not capitalize all the first letters of each word. – brandonscript Mar 23 '18 at 05:08
Indeed, 'the sentence' outputs 'The sentence' – Andres Zapata Apr 24 '18 at 21:48

Lodash title case (uppercase first letter of every word)

16 Answers16

Linked