Question

我正在尝试更改像这样的CSS属性。

-moz-border-radius

像这样的JavaScript CSS属性。

MozBorderRadius

我正在使用此RegExp。

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

所有我需要做的就是将$ 1转换为大写，这样它就可以将我的CSS属性camumelcase化（是的，我将这个词改为......）为基于JavaScript的属性。这可能吗？

感谢。

Answer 1

最好使用函数作为replace()中的第二个参数，您也可以使用正则表达式文字而不是RegExp构造函数：

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

Answer 2

您需要传递callback function而不是字符串。

例如：

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

其他信息......

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

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

Answer 6

如果您需要将整个以连字符分隔的键的对象转换为驼峰式：

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

示例

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

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

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

JavaScript RegEx到CamelCase一个带连字符的CSS属性

6 个答案: