Converting a string with spaces into camel case

E

45

299

How can I convert a string into camel case using javascript regex?

EquipmentClass name or Equipment className or equipment class name or Equipment Class Name

should all become: equipmentClassName.

Ellerey answered 3/6, 2010 at 23:30 Comment(2)

I made a jsperf test of the various methods. the results were slightly inconclusive. it seems to depend on the input string. – Flautist 26/9, 2011 at 23:50

A new jsperf test with a few different strings to test and a wider variety of implementations: jsperf.com/camel-casing-regexp-or-character-manipulation/1 -- this leads me to the conclusion that for the average case, despite the asker's phrasing of this question, regular expressions are not what you want. Not only are they much harder to understand, they also (at least for current versions of Chrome) take about twice as long to run. – Binnie 19/10, 2017 at 23:34

E

72

I just ended up doing this:

String.prototype.toCamelCase = function(str) {
    return str
        .replace(/\s(.)/g, function($1) { return $1.toUpperCase(); })
        .replace(/\s/g, '')
        .replace(/^(.)/, function($1) { return $1.toLowerCase(); });
}

I was trying to avoid chaining together multiple replace statements. Something where I'd have $1, $2, $3 in my function. But that type of grouping is hard to understand, and your mention about cross browser problems is something I never thought about as well.

Ellerey answered 3/6, 2010 at 23:46 Comment(8)

That looks fine to me, and nothing looks suspicious as far as cross-browser issues. (Not that I'm a super-expert or anything.) – Rectangular 3/6, 2010 at 23:53

If you're going to use the String.prototype, why not just use 'this' instead of sending a 'str' parameter? – Flautist 26/9, 2011 at 23:31

Doesn't works in Safari. > "very active".toCamelCase() < TypeError: undefined is not an object (evaluating 'str .replace') – Filiform 6/8, 2015 at 14:54

For better browser compatibility please use this instead of str (and remove the parameter from the function call) – Filiform 6/8, 2015 at 15:4

You just need to use this.valueOf() instead of passing str. Alternatively (as in my case) this.toLowerCase() as my input strings were in ALL CAPS which didn't have the non-hump portions lowercased properly. Using just this returns the string object itself, which is actually an array of char, hence the TypeError mentioned above. – Sickly 24/11, 2015 at 15:55

This returns the exact opposite of what's needed. This'll return sTRING. – Gynaecology 11/5, 2017 at 10:57

Scott Klarenbach, Thank you for good solution. It just doesn't work if there are 2 whitespaces between words: toCamelCase('test test') => 'testtest'. Please update solution with small fix. First RegExp should be /\s+(.)/g. – Karajan 5/10, 2020 at 18:28

this fail if the str in UPPERCASE – Walleye 26/2, 2022 at 3:31

S

402

Looking at your code, you can achieve it with only two replace calls:

function camelize(str) {
  return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
    return index === 0 ? word.toLowerCase() : word.toUpperCase();
  }).replace(/\s+/g, '');
}

// all output "equipmentClassName"
console.log(camelize("EquipmentClass name"));
console.log(camelize("Equipment className"));
console.log(camelize("equipment class name"));
console.log(camelize("Equipment Class Name"));

Edit: Or in with a single replace call, capturing the white spaces also in the RegExp.

function camelize(str) {
  return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) {
    if (+match === 0) return ""; // or if (/\s+/.test(match)) for white spaces
    return index === 0 ? match.toLowerCase() : match.toUpperCase();
  });
}

Sceptic answered 4/6, 2010 at 0:3 Comment(13)

Great code, and it ended up winning jsperf.com/js-camelcase/5 . Care to contribute a version that can handle (remove) non-alpha chars? camelize("Let's Do It!") === "let'SDoIt!" sad face. I'll try myself but fear I will just add another replace. – Electrograph 19/5, 2015 at 7:22

.. since the non-alpha shouldn't affect the case, I'm not sure it can be done better than return this.replace(/[^a-z ]/ig, '').replace(/(?:^\w|[A-Z]|\b\w|\s+)/g,... – Electrograph 19/5, 2015 at 7:28

Can you talk about the advantage of /(?:^\w|[A-Z]|\b\w)/ over /\b\w/? To me they look identical (although the second one is slightly simpler). – Lundberg 10/1, 2016 at 9:27

For my ES2015+ friends: a one liner based on the above code.

const toCamelCase = (str) => str.replace(/(?:^\w|[A-Z]|\b\w)/g, (ltr, idx) => idx === 0 ? ltr.toLowerCase() : ltr.toUpperCase()).replace(/\s+/g, '');

– Vendible 18/1, 2017 at 17:6

While this wasn't a case asked by example, another common input you'll likely see is "EQUIPMENT CLASS NAME", for which this method fails. – Sheepherder 13/2, 2017 at 20:56

@EdmundReed you can simply convert the whole string to lowercase prior to converting to camel case by chaining the .toLowerCase() method in. Eg. using @tabrindle's solution above:

const toCamelCase = (str) => str.toLowerCase().replace(/(?:^\w|[A-Z]|\b\w)/g, (ltr, idx) => idx === 0 ? ltr.toLowerCase() : ltr.toUpperCase()).replace(/\s+/g, '');

– Eugeniaeugenics 22/12, 2017 at 0:50

Will this work with _ MARK_BTNS_NEW, this string is not converted to camel case – Fluttery 21/9, 2018 at 19:14

For undescore with upper case added str=str.toLowerCase().replace(/_/g, ' '); – Fluttery 21/9, 2018 at 19:18

Not sure why str.replace(/(\b\w)/g) is not good enough. toUpperCase() should be a no-op on a non alpha character anyway. – Azarria 8/3, 2019 at 0:38

@KeithTyler This always converts the first charater to uppercase – Incumbent 12/7, 2019 at 14:3

NOTE: i needed to convert snake_case strings (from DB columns), but this doesn't seem to work – Hadleigh 16/7, 2019 at 14:50

works not nice with umlauts and abbreviation. E. g.: camelize("ETA mit Männer") => "eTAMitMäNner" – Karajan 5/10, 2020 at 18:6

@Eugeniaeugenics works for stuff like ID, for which this answer doesn't work, but it doesn't help for TitanCase like in the question, it would make it titancase – Intuitive 14/9, 2023 at 18:54

J

199

If anyone is using lodash, there is a _.camelCase() function.

_.camelCase('Foo Bar');
// → 'fooBar'

_.camelCase('--foo-bar--');
// → 'fooBar'

_.camelCase('__FOO_BAR__');
// → 'fooBar'

Jenelljenelle answered 5/5, 2016 at 2:15 Comment(2)

Why should one install a whole lodash package just for this purpose and the OP specifically wanted a solution using javascript regex. – Pallor 18/8, 2020 at 10:37

@PeterMoses 1) My answer reads "If anyone is using lodash", not "you should install Lodash to do this" 2) Whilst the question body refers to JavaScript RegEx, many people land here because the title reads "Converting any string into camel case" 3) You do not need to import the "whole" lodash library; you can import just the methods you need, or use per method packages like lodash.camelcase instead (which has since been deprecated) 4) You can mitigate a large bundle by implementing tree shaking – Jenelljenelle 19/8, 2020 at 5:24

S

103

To get camelCase

ES5

var camalize = function camalize(str) {
    return str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, function(match, chr)
    {
        return chr.toUpperCase();
    });
}

ES6

var camalize = function camalize(str) {
    return str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase());
}

To get camelCase or PascalCase

var camelSentence = function camelSentence(str) {
    return  (" " + str).toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, function(match, chr)
    {
        return chr.toUpperCase();
    });
}

Note :
For those language with accents. Do include À-ÖØ-öø-ÿ with the regex as following
.replace(/[^a-zA-ZÀ-ÖØ-öø-ÿ0-9]+(.)/g This is only for one language. For another language, you have to search and find

Sandhog answered 28/9, 2018 at 9:5 Comment(9)

ES6 just made everything lowercase for me – Batholomew 12/3, 2019 at 21:41

@Luis added https://stackoverflow.com/posts/52551910/revisions ES6, I haven't tested it. I will check and update. – Sandhog 13/3, 2019 at 7:10

Does not work for words with accents jsbin.com/zayafedubo/edit?js,console – Topographer 3/5, 2019 at 13:19

@ManuelOrtiz - jsbin.com/cibimatove/2/edit?js,console I have edited. Please check. Also please don't mind if it was a meaningful word. I don't know the language with those accents. The code is .replace(/[^a-zA-ZÀ-ÖØ-öø-ÿ0-9]+(.)/g – Sandhog 9/5, 2019 at 6:42

it will not work if you pass camelized string. We need to check if we have already camalized string. – Bessbessarabia 23/8, 2019 at 11:39

@SheikhAbdulWahid - I haven't tested your case though. But that is a different case and which need a condition !. A function with camalize will camalize it. That's all. But of course, we can think of adding a new condition in between. – Sandhog 30/8, 2019 at 8:20

It doesn't work right when the string opens with a space: ` one two` -> OneTwo, should be oneTwo. Works properly in my answer ;) – Constrained 14/1, 2020 at 14:45

you can try adding a space in the regex like how I added the other language script [^a-zA-Z0-9 ] – Sandhog 16/1, 2020 at 13:32

Why use var in ES6 also this doesnt work for TitanCase – Intuitive 14/9, 2023 at 18:52

E

72

I just ended up doing this:

String.prototype.toCamelCase = function(str) {
    return str
        .replace(/\s(.)/g, function($1) { return $1.toUpperCase(); })
        .replace(/\s/g, '')
        .replace(/^(.)/, function($1) { return $1.toLowerCase(); });
}