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

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

-moz-border-radius

В CSS-свойство JavaScript, например:

MozBorderRadius

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

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

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

Спасибо.

Ответы

Ответ 1

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

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

Ответ 2

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

Например:

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

Ответ 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"

Ответ 4

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

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

Ответ 5

также можно использовать 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'));