JavaScript RegExp для CamelCase дефисное свойство CSS

Question

Я пытаюсь изменить свойства CSS, подобные этому.

-moz-border-radius

К CSS-свойству JavaScript вот так.

MozBorderRadius

Я использую этот RegExp.

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

Все, что мне нужно сделать, это преобразовать $ 1 в верхний регистр, чтобы он мог распутать (да, я сделал это слово ...) мое свойство CSS в свойство на основе JavaScript. Это возможно?

Спасибо.

Answer 1

Было бы лучше использовать функцию в качестве второго параметра в replace(), и вместо конструктора RegExp можно также использовать литерал регулярного выражения:

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

Answer 2

Вам нужно передать функцию обратного вызова вместо строки.

Например:

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

Answer 3

Другой, немного более гибкий ответ:

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

Используется так:

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

Answer 4

также возможно использовать indexOf с рекурсией для этой задачи.

input some-foo_sd_dsd-weqe
output someFooSdDsdWeqe

но работает медленнее

MozBorderRadius
test1: 3.535ms

Код:

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 5

Дополнительная информация ...

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(/(_|-)([a-z])/g, toUpperCase );
}

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

Output: hyphenDelimitedToCamelCase