将连字符转换为驼峰式大小写(camelCase)


146

使用正则表达式(我假设)或其他方法,我该如何转换:

marker-imagemy-example-settingmarkerImagemyExampleSetting

我当时正在考虑拆分,-然后将该hypen +1的索引转换为大写。但是它看起来很脏,并且希望对正则表达式有所帮助,以使代码更简洁。

没有 jQuery ...



7
它实际上是,但是我搜索却从未找到它,可能是由于名字晦涩难懂。我建议您保持开放状态,以便人们真正找到答案。“ RegExp $ 1大写” ...除非他们已经知道regex IMO,否则没人会找到它
Oscar Godson

那很容易解决。我刚刚编辑了标题
mplungjan

因此,对解决方案进行剪切和粘贴将为我赢得一个可接受的答案:|
mplungjan

有办法做到完全相反吗?
帕万

Answers:


258

试试这个:

var camelCased = myString.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });

正则表达式将匹配-iin marker-image并仅捕获i。然后在回调函数中将其大写并替换。


53
仅供参考,相反:myString.replace(/([a-z][A-Z])/g, function (g) { return g[0] + '-' + g[1].toLowerCase() });
Cyril N.

我认为该参数应重命名为“ m”,例如“ match”。一个人可以快速编写如下内容: myString.replace(/-([a-z])/i, function (i) { return i[1].toUpperCase() });
programaths

8
通过添加i标志使您的正则表达式更可靠是一个好主意。没有它,您的模式将丢失“大写部分”(不会更改为“大写部分”)。另外,我个人更喜欢提高多个参数的可读性,但这显然是样式问题。总而言之,我会同意的.replace( /-([a-z])/gi, function ( $0, $1 ) { return $1.toUpperCase(); } );
hashchange'3

var camelCased = myString.replace(/(-+|\s+)\w/g, function (g) { return g[1].toUpperCase(); });
除此之外

@ wolfram77,您在正则表达式中包含多个破折号/空格字符,然后将匹配的第二个字符大写,这意味着如果第二个字符是空格或破折号,则该字符将变为大写。怎么样:var camelCased = myString.replace(/(-+|\s+)\w/g, function (g) { return g[g.length - 1].toUpperCase(); });
trysis'7

44

如果您受到启发并将其包含在项目中,这是Lodash提供的出色实用程序之一。

var str = 'my-hyphen-string';
str = _.camelCase(str);
// results in 'myHyphenString'

14

您可以获取连字符和下一个字符,然后将其替换为字符的大写版本:

var str="marker-image-test";
str.replace(/-([a-z])/g, function (m, w) {
    return w.toUpperCase();
});

3
不错-我采用了这种方法,但ES6将其转换为>> str.replace(/-([az])/ g,(x,up)=> up.toUpperCase())
ConorLuddy,

13

这是我的camelCase函数版本:

var camelCase = (function () {
    var DEFAULT_REGEX = /[-_]+(.)?/g;

    function toUpper(match, group1) {
        return group1 ? group1.toUpperCase() : '';
    }
    return function (str, delimiters) {
        return str.replace(delimiters ? new RegExp('[' + delimiters + ']+(.)?', 'g') : DEFAULT_REGEX, toUpper);
    };
})();

它处理以下所有边缘情况:

  • 默认情况下照顾下划线和连字符(可使用第二个参数配置)
  • 具有unicode字符的字符串
  • 以连字符或下划线结尾的字符串
  • 带有连续连字符或下划线的字符串

这是实时测试的链接:http : //jsfiddle.net/avKzf/2/

以下是测试结果:

  • 输入:“ ab-cd-ef”,结果:“ abCdEf”
  • 输入:“ ab-cd-ef-”,结果:“ abCdEf”
  • 输入:“ ab-cd-ef--”,结果:“ abCdEf”
  • 输入:“ ab-cd--ef--”,结果:“ abCdEf”
  • 输入:“-ab-cd--ef--”,结果:“ AbCdEf”
  • 输入:“-ab-cd -__- ef--”,结果:“ AbCdEf”

请注意,以定界符开头的字符串将以大写字母开头。如果那不是您期望的,则可以始终使用lcfirst。如果需要的话,这是我的lcfirst:

function lcfirst(str) {
    return str && str.charAt(0).toLowerCase() + str.substring(1);
}

4

这不会RegExp对我大喊大叫。就个人而言,当简单的字符串和数组方法就足够时,我会尽量避免使用正则表达式:

let upFirst = word => 
  word[0].toUpperCase() + word.toLowerCase().slice(1)

let camelize = text => {
  let words = text.split(/[-_]/g) // ok one simple regexp.
  return words[0].toLowerCase() + words.slice(1).map(upFirst)
}

camelize('marker-image') // markerImage

1

这是另一个在此处组合了几个答案并使之成为字符串的方法的选项:

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

像这样使用:

'quick_brown'.toCamel(); // quickBrown
'quick-brown'.toCamel(); // quickBrown

1
// Turn the dash separated variable name into camelCase.
str = str.replace(/\b-([a-z])/g, (_, char) => char.toUpperCase());

1

您可以使用NPM中的camelcase

npm install --save camelcase

const camelCase = require('camelcase');
camelCase('marker-image'); // => 'markerImage';
camelCase('my-example-setting'); // => 'myExampleSetting';

0

另取。

用于...

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

0

也可以将indexOf与该任务一起递归使用。

input some-foo_sd_dsd-weqe
output someFooSdDsdWeqe

比较:::测量两个不同脚本的执行时间:

$ node camelCased.js
someFooSdDsdWeqe
test1: 2.986ms
someFooSdDsdWeqe
test2: 0.231ms

码:

console.time('test1');
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 ('some-foo_sd_dsd-weqe'));
console.timeEnd('test1');



console.time('test2');

    function camelCased (myString){
     return myString.replace(/(-|\_)([a-z])/g, function (g) { return  g[1].toUpperCase(); });
   }


console.log(camelCased ('some-foo_sd_dsd-weqe'));
console.timeEnd('test2');

0

只是一个带有标志的版本,用于循环而没有正则表达式:

function camelCase(dash) { 

  var camel = false;
  var str = dash;
  var camelString = '';

  for(var i = 0; i < str.length; i++){
    if(str.charAt(i) === '-'){
      camel = true;

    } else if(camel) {
      camelString += str.charAt(i).toUpperCase();
      camel = false;
    } else {
      camelString += str.charAt(i);
    }
  } 
  return camelString;
}

0

这是我的实现(只是使双手变脏)

/**
 * kebab-case to UpperCamelCase
 * @param {String} string
 * @return {String}
 */
function toUpperCamelCase(string) {
  return string
    .toLowerCase()
    .split('-')
    .map(it => it.charAt(0).toUpperCase() + it.substr(1))
    .join('');
}

0

如果您允许在字符串中使用数字,请使用此选项。

显然,以数字开头的部分不会大写,但这在某些情况下可能有用。

function fromHyphenToCamelCase(str) {
  return str.replace(/-([a-z0-9])/g, (g) => g[1].toUpperCase())
}

function fromHyphenToCamelCase(str) {
  return str.replace(/-([a-z0-9])/g, (g) => g[1].toUpperCase())
}

const str1 = "category-123";
const str2 = "111-222";
const str3 = "a1a-b2b";
const str4 = "aaa-2bb";

console.log(`${str1} => ${fromHyphenToCamelCase(str1)}`);
console.log(`${str2} => ${fromHyphenToCamelCase(str2)}`);
console.log(`${str3} => ${fromHyphenToCamelCase(str3)}`);
console.log(`${str4} => ${fromHyphenToCamelCase(str4)}`);

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.