Lodash title case (uppercase first letter of every word)
JavascriptLodashJavascript 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
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