CODEWITHSUNDEEP
javascriptregexreplace
Olical
Olical

Reputation: 41362

JavaScript RegExp to CamelCase a hyphened CSS property

I am trying to change CSS properties like this one.

-moz-border-radius

To the JavaScript CSS property like so.

MozBorderRadius

I am using this RegExp.

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

All I need to do is convert $1 to upper case so it can cammelcaseify (yes I made that word up...) my CSS property into a JavaScript based one. Is this possible?

Thanks.

Upvotes: 13

Views: 4789

Answers (6)

oriadam
oriadam

Reputation: 8559

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

Upvotes: 0

Anja Ishmukhametova
Anja Ishmukhametova

Reputation: 1564

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

Upvotes: 0

SoEzPz
SoEzPz

Reputation: 15912

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

Upvotes: 0

John Naegle
John Naegle

Reputation: 8247

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"

Upvotes: 2

Tim Down
Tim Down

Reputation: 324567

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();
});

Upvotes: 30

SLaks
SLaks

Reputation: 887453

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();
    }
));

Upvotes: 4

Related Questions