JavaScript RegExp for CamelCase - CSS Hyphen Property

Question

I am trying to change CSS properties like this.

-moz-border-radius 

In the CSS CSS property, for example:

 MozBorderRadius 

I am using this RegExp.

 var exp = new RegExp('-([az])', 'gi'); console.log('-moz-border-radius'.replace(exp, '$1')); 

All I have to do is convert $ 1 to uppercase so that it can work in cammelcaseify (yes, I made that word ...) my JavaScript based CSS property. Is it possible?

Thank.

Answer 1

You would be better off using the function as the second parameter in replace() , and you could also use the regular expression literal instead of the RegExp constructor:

 var replaced = '-moz-border-radius'.replace(/-([az])/gi, function(s, group1) { return group1.toUpperCase(); }); 

Answer 2

You need to pass a callback function instead of a string.

For example:

 var exp = /-([az])/gi; console.log('-moz-border-radius'.replace(exp, function(match, char, index, str) { return char.toUpperCase(); } )); 

Answer 3

Another, slightly more flexible answer:

 if (typeof String.prototype.toCamel !== 'function') { String.prototype.toCamel = function(){ return this.replace(/[-_]([az])/g, function (g) { return g[1].toUpperCase(); }) }; } 

Used as follows:

 '-moz-border-radius'.toCamel(); // "MozBorderRadius" 'moz-border-radius'.toCamel(); // "mozBorderRadius" 'moz_border_radius'.toCamel(); // "mozBorderRadius" '_moz_border_radius'.toCamel(); // "MozBorderRadius" 

Answer 4

Additional Information...

MozBorderRadius = PascalCase AKA UpperCamelCase.

mozBorderRadius = camelCase.

moz_border_radius = snake_case.

 var string = "hyphen-delimited-to-camel-case" or var string = "snake_case_to_camel_case" function toCamelCase( string ){ return string.toLowerCase().replace(/(_|-)([az])/g, toUpperCase ); } function toUpperCase( string ){ return string[1].toUpperCase(); } Output: hyphenDelimitedToCamelCase 

Answer 5

You can also use indexOf with recursion for this task.

 input some-foo_sd_dsd-weqe output someFooSdDsdWeqe 

but runs slower

 MozBorderRadius test1: 3.535ms 

the code:

 function camelCased (str) { function check(symb){ let idxOf = str.indexOf(symb); if (idxOf === -1) { return str; } let letter = str[idxOf+1].toUpperCase(); str = str.replace(str.substring(idxOf+1,idxOf+2), ''); str = str.split(symb).join(idxOf !== -1 ? letter : ''); return camelCased(str); } return check('_') && check('-'); } console.log(camelCased ('-moz-border-radius'));