하이픈을 낙타 케이스로 변환 (camelCase)


146

정규식 (나는 가정) 또는 다른 방법으로 다음과 같은 것을 어떻게 변환 할 수 있습니까?

marker-imagemy-example-setting에게 markerImage또는 myExampleSetting.

나는 -그 hypen +1의 색인을 대문자로 변환하여 나누는 것에 대해 생각하고있었습니다 . 그러나 그것은 더러워 보였고 코드를 깨끗하게 만들 수있는 정규 표현식에 대한 도움을 원했습니다.

jQuery가 없습니다 ...



7
실제로, 그러나 나는 모호한 이름으로 인해 검색하고 찾지 못했습니다. 사람들이 실제로 답을 찾을 수 있도록 이것을 열어 두는 것이 좋습니다. 이미 정규식 IMO 알고하지 않는 한 "정규식 대문자로 $ 1"... 아무도 그것을 찾을 것 없다
오스카 대자

그것은 쉽게 고칠 수있었습니다. 난 그냥 제목 편집
mplungjan

따라서 솔루션의 잘라 내기 및 붙여 넣기를 사용하면 대답을 얻을 수있었습니다. |
mplungjan

정확히 반대하는 방법이 있습니까?
Pavan

답변:


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.

매개 변수의 이름을 "match"와 같이 "m"으로 바꾸어야한다고 생각합니다. 다음과 같이 빠르게 쓸 수 있습니다. 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

이것에 덧붙여, 낙타 케이스 공간으로 분리 된 단어 를 원한다면 , 다음과 같이 작동합니다.var camelCased = myString.replace(/(-+|\s+)\w/g, function (g) { return g[1].toUpperCase(); });
wolfram77

@ wolfram77, 정규 표현식에 대시 / 공백 문자를 여러 개 포함 한 다음 일치하는 두 번째 문자를 대문자로 지정하십시오. 두 번째 문자가 공백 또는 대시이면 대문자가됩니다. 이건 var camelCased = myString.replace(/(-+|\s+)\w/g, function (g) { return g[g.length - 1].toUpperCase(); });어때?
trysis

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

다음과 같은 경우를 모두 처리합니다.

  • 기본적으로 밑줄과 하이픈을 모두 처리합니다 (두 번째 매개 변수로 구성 가능).
  • 유니 코드 문자가 포함 된 문자열
  • 하이픈 또는 밑줄로 끝나는 문자열
  • 연속적인 하이픈 또는 밑줄이있는 문자열

라이브 테스트 링크는 다음과 같습니다. 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

for 루프와 정규 표현식이없는 플래그가있는 버전 :

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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.