JavaScript RegExp to CamelCase a hyphened CSS property

Question

I am trying to change CSS properties like this one.

-moz-border-radius

To the JavaScript CSS property like so.

MozBorderRadius
         


        

Answer 1

is also possible use indexOf with recursion for that task.

input some-foo_sd_dsd-weqe
output someFooSdDsdWeqe

but is works slower

MozBorderRadius
test1: 3.535ms

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'));

Answer 2

if you need to convert an entire object of hypen-delimited keys to camelCase:

const css2js = (obj) => Object.fromEntries(Object.entries(obj).map(x => [x[0].replace(/(-)([a-z])/g, c => c[1].toUpperCase()), x[1]]));

example

const a = {
    "background-color": "#00aa",
    marginTop: "10px"
};

console.log(css2js(a)); // {backgroundColor: "#00aa", marginTop: "10px"}

https://codepen.io/oriadam/pen/eYBNeyP

Answer 3

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

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

Answer 4

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

For example:

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

Answer 5

Another, slightly more flexible answer:

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

Used like this:

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

Answer 6

Additional Information...

MozBorderRadius = PascalCase A.K.A 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(/(_|-)([a-z])/g, toUpperCase );
}

function toUpperCase( string ){
  return string[1].toUpperCase();
}

Output: hyphenDelimitedToCamelCase