모든 문자열을 낙타 케이스로 변환


171

Javascript 정규식을 사용하여 문자열을 낙타 케이스로 변환하는 방법은 무엇입니까?

EquipmentClass name또는 Equipment className또는 equipment class name또는Equipment Class Name

모두가되어야한다 : equipmentClassName.


1
다양한 방법 으로 jsperf 테스트를 수행했습니다. 결과는 약간 결정적이지 못했다. 입력 문자열에 의존하는 것 같습니다.
yincrash


시험에 대한 몇 가지 다른 문자열과 구현의 넓은 다양한 새로운 jsperf 시험 : jsperf.com/camel-casing-regexp-or-character-manipulation/1 - 결론이 리드 나이 평균 경우에,에도 불구하고 그 이 질문에 대한 asker의 표현에서, 정규식은 당신이 원하는 것이 아닙니다 . 이해하기가 더 어려울뿐만 아니라 (최소 현재 Chrome 버전) 실행하는 데 약 두 배가 걸립니다.
Jules

답변:


237

코드를 보면 두 번의 replace호출 만으로 코드를 얻을 수 있습니다 .

function camelize(str) {
  return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
    return index === 0 ? word.toLowerCase() : word.toUpperCase();
  }).replace(/\s+/g, '');
}

camelize("EquipmentClass name");
camelize("Equipment className");
camelize("equipment class name");
camelize("Equipment Class Name");
// all output "equipmentClassName"

편집 : 또는 한 번의 replace호출로에서 공백을 캡처합니다 RegExp.

function camelize(str) {
  return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) {
    if (+match === 0) return ""; // or if (/\s+/.test(match)) for white spaces
    return index === 0 ? match.toLowerCase() : match.toUpperCase();
  });
}

4
훌륭한 코드이며 결국 jsperf.com/js-camelcase/5을 얻었습니다 . 비 알파 문자를 처리 (제거) 할 수있는 버전을 제공 하시겠습니까? camelize("Let's Do It!") === "let'SDoIt!" 슬픈 얼굴 . 나는 나 자신을 시도 할 것이지만 나는 단지 다른 교체를 추가 할까 두려워한다.
Orwellophile

2
.. 비 알파가 사건에 영향을 미치지 않아야하므로, 그것이 더 잘 수행 될 수 return this.replace(/[^a-z ]/ig, '').replace(/(?:^\w|[A-Z]|\b\w|\s+)/g,
있을지 모르겠다

4
내 ES2015 + 친구의 경우 위 코드를 기반으로 한 라이너. const toCamelCase = (str) => str.replace(/(?:^\w|[A-Z]|\b\w)/g, (ltr, idx) => idx === 0 ? ltr.toLowerCase() : ltr.toUpperCase()).replace(/\s+/g, '');
tabrindle

2
예를 들어 요청한 것은 아니지만 "EQUIPMENT CLASS NAME"이라는 다른 일반적인 입력이 있는데이 방법은 실패합니다.
알렉산더 체프 코프

1
@EdmundReed .toLowerCase()메소드를 연결하여 낙타 케이스로 변환하기 전에 전체 문자열을 소문자로 간단히 변환 할 수 있습니다 . 위의 @tabrindle 솔루션을 사용하여 :const toCamelCase = (str) => str.toLowerCase().replace(/(?:^\w|[A-Z]|\b\w)/g, (ltr, idx) => idx === 0 ? ltr.toLowerCase() : ltr.toUpperCase()).replace(/\s+/g, '');
bitfidget

102

누군가 lodash를 사용 하는 경우 _.camelCase()기능이 있습니다.

_.camelCase('Foo Bar');
// → 'fooBar'

_.camelCase('--foo-bar--');
// → 'fooBar'

_.camelCase('__FOO_BAR__');
// → 'fooBar'

2
이 답변은 분명히 더 나올 것입니다. Lodash는 서로 다른 경우간에 문자열을 변환하기위한 완전한 세트를 제공합니다.
btx

55

방금이 작업을 마쳤습니다.

String.prototype.toCamelCase = function(str) {
    return str
        .replace(/\s(.)/g, function($1) { return $1.toUpperCase(); })
        .replace(/\s/g, '')
        .replace(/^(.)/, function($1) { return $1.toLowerCase(); });
}

여러 개의 replace 문을 연결하지 않으려 고했습니다. 내 기능에 $ 1, $ 2, $ 3가있는 곳. 그러나 이러한 유형의 그룹화는 이해하기 어렵고 크로스 브라우저 문제에 대한 귀하의 언급은 결코 생각하지 못했습니다.


1
그것은 나에게 잘 보이고, 브라우저 간 문제에 이르기까지 의심스러운 것은 없습니다. (저는 슈퍼 전문가이거나 다른 것이 아닙니다.)
Pointy

47
String.prototype을 사용하려면 'str'매개 변수를 보내는 대신 'this'를 사용하는 것이 어떻습니까?
yincrash

6
더 나은 브라우저 호환성을 위해 str 대신 이것을 사용하십시오 (그리고 함수 호출에서 매개 변수를 제거하십시오)
João Paulo Motta

2
당신 this.valueOf()은 전달 하는 대신 사용해야 합니다 str. 또는 this.toLowerCase()입력 문자열이 모든 CAPS에 있었으므로 비 혹 부분이 제대로 소문자로 표시되지 않았습니다. 를 사용 this하면 문자열 객체 자체가 실제로 char 배열이므로 반환됩니다. 따라서 위에서 언급 한 TypeError입니다.
Draco18s는 더 이상 SE

2
이것은 필요한 것과 정확히 반대의 결과를 반환합니다. sTRING을 반환합니다.
Awol

41

이 솔루션을 사용할 수 있습니다 :

function toCamelCase(str){
  return str.split(' ').map(function(word,index){
    // If it is the first word make sure to lowercase all the chars.
    if(index == 0){
      return word.toLowerCase();
    }
    // If it is not the first word only upper case the first char and lowercase the rest.
    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
  }).join('');
}

이것은 낙타가 아닌 대문자입니다.
nikk wong

2
낙타 문자는 대문자로 모든 단어의 첫 문자이며 toCamelCase함수는 그렇게합니다.
ismnoiet

2
PascalCase를 생각하고 있습니다. CamelCase 는 대문자 또는 소문자 일 수 있습니다. 이와 관련하여 혼동을 피하기 위해 종종 소문자입니다.
Kody

1
건설적인 의견에 대해 @Kody, @ cchamberlain에게 감사드립니다. 업데이트 된 버전을 확인하십시오.
ismnoiet

5
질문에 정규식을 사용하여 솔루션을 요청한 경우에도 +1을 사용 하지 마십시오. 이것은 훨씬 더 명확한 솔루션이며 성능에 있어서도 확실한 승리입니다 (복잡한 정규 표현식을 처리하는 것은 단지 많은 문자열을 반복하고 이들을 결합하는 것보다 훨씬 어려운 작업이기 때문에). jsperf.com/camel-casing-regexp-or-character-manipulation/1을 참조하십시오. 여기서이 예제와 함께 여기에 몇 가지 예제를 취했습니다 (또한 성능을 위해 약간 개선되었습니다. 대부분의 경우 명확성을 위해 버전).
Jules

40

c amel C ase 를 얻으려면

ES5

var camalize = function camalize(str) {
    return str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, function(match, chr)
    {
        return chr.toUpperCase();
    });
}

ES6

var camalize = function camalize(str) {
    return str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase());
}


에 도착 C 아멜 S entence C ASE 또는 P의 ascal의 C의 ASE

var camelSentence = function camelSentence(str) {
    return  (" " + str).toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, function(match, chr)
    {
        return chr.toUpperCase();
    });
}

참고 :
악센트가있는 언어의 경우. 다음 À-ÖØ-öø-ÿ과 같이 정규식에 포함 하십시오
.replace(/[^a-zA-ZÀ-ÖØ-öø-ÿ0-9]+(.)/g


3
가장 좋은 대답은 깨끗하고 간결합니다.
codeepic

5
ES6는 나를 위해 모든 것을 소문자로 만들었습니다
C Bauer

@Luis는 https://stackoverflow.com/posts/52551910/revisionsES6을 추가했지만 테스트하지 않았습니다. 확인하고 업데이트하겠습니다.
smilyface

액센트 단어를하지 작동합니까는 jsbin.com/zayafedubo/edit?js,console
마누엘 오티즈에게

1
낙타 문자열을 전달하면 작동하지 않습니다. 문자열이 이미 있는지 확인해야합니다.
셰이크 압둘 와히드

27

Scott의 특정 사례에서 나는 다음과 같이 갈 것입니다 :

String.prototype.toCamelCase = function() {
    return this.replace(/^([A-Z])|\s(\w)/g, function(match, p1, p2, offset) {
        if (p2) return p2.toUpperCase();
        return p1.toLowerCase();        
    });
};

'EquipmentClass name'.toCamelCase()  // -> equipmentClassName
'Equipment className'.toCamelCase()  // -> equipmentClassName
'equipment class name'.toCamelCase() // -> equipmentClassName
'Equipment Class Name'.toCamelCase() // -> equipmentClassName

정규식은 대문자로 시작하면 첫 문자와 공백 다음에 오는 알파벳 문자 (예 : 지정된 문자열에서 2 또는 3 회)와 일치합니다.

정규식을 /^([A-Z])|[\s-_](\w)/g정식으로 사용하면 하이픈과 밑줄 유형 이름도 나타납니다.

'hyphen-name-format'.toCamelCase()     // -> hyphenNameFormat
'underscore_name_format'.toCamelCase() // -> underscoreNameFormat

가격, .photo-placeholder__photo - 어떤 .DATA-제품 이름, .DATA - 제품 설명, .product - container__actions 같은 문자열 이상 2,3 hypens 또는 밑줄이있는 경우
Ashwani Shukla

1
@AshwaniShukla 여러 하이픈 및 / 또는 밑줄을 처리 하려면 문자 그룹에 승수 ( +)를 추가해야합니다 ./^([A-Z])|[\s-_]+(\w)/g
Fredric

21
function toCamelCase(str) {
  // Lower cases the string
  return str.toLowerCase()
    // Replaces any - or _ characters with a space 
    .replace( /[-_]+/g, ' ')
    // Removes any non alphanumeric characters 
    .replace( /[^\w\s]/g, '')
    // Uppercases the first character in each group immediately following a space 
    // (delimited by spaces) 
    .replace( / (.)/g, function($1) { return $1.toUpperCase(); })
    // Removes spaces 
    .replace( / /g, '' );
}

camelCase문자열에 JavaScript 함수를 찾으려고했는데 특수 문자가 제거되도록하고 싶었습니다 (그리고 위의 답변 중 일부가 무엇인지 이해하는 데 어려움이있었습니다). 이것은 cc young의 답변과 추가 된 주석 및 $ peci & l 문자 제거를 기반으로합니다.


10

몇 년 동안 사용해온 신뢰할 수있는 실제 사례 :

function camelize(text) {
    text = text.replace(/[-_\s.]+(.)?/g, (_, c) => c ? c.toUpperCase() : '');
    return text.substr(0, 1).toLowerCase() + text.substr(1);
}

대소 문자 변경 문자 :

  • 하이픈 -
  • 밑줄 _
  • 기간 .
  • 우주

9

regexp가 필요하지 않은 경우 Twinkle을 위해 오래 전에 만든 다음 코드를 살펴볼 수 있습니다 .

String.prototype.toUpperCaseFirstChar = function() {
    return this.substr( 0, 1 ).toUpperCase() + this.substr( 1 );
}

String.prototype.toLowerCaseFirstChar = function() {
    return this.substr( 0, 1 ).toLowerCase() + this.substr( 1 );
}

String.prototype.toUpperCaseEachWord = function( delim ) {
    delim = delim ? delim : ' ';
    return this.split( delim ).map( function(v) { return v.toUpperCaseFirstChar() } ).join( delim );
}

String.prototype.toLowerCaseEachWord = function( delim ) {
    delim = delim ? delim : ' ';
    return this.split( delim ).map( function(v) { return v.toLowerCaseFirstChar() } ).join( delim );
}

성능 테스트를 수행하지 않았으며 regexp 버전이 더 빠를 수도 있고 그렇지 않을 수도 있습니다.



8

ES6 접근 방식 :

const camelCase = str => {
  let string = str.toLowerCase().replace(/[^A-Za-z0-9]/g, ' ').split(' ')
                  .reduce((result, word) => result + capitalize(word.toLowerCase()))
  return string.charAt(0).toLowerCase() + string.slice(1)
}

const capitalize = str => str.charAt(0).toUpperCase() + str.toLowerCase().slice(1)

let baz = 'foo bar'
let camel = camelCase(baz)
console.log(camel)  // "fooBar"
camelCase('foo bar')  // "fooBar"
camelCase('FOO BAR')  // "fooBar"
camelCase('x nN foo bar')  // "xNnFooBar"
camelCase('!--foo-¿?-bar--121-**%')  // "fooBar121"

Jean-Pierre 같은 이름은 어떻습니까?
맥스 알렉산더 한나

5
return "hello world".toLowerCase().replace(/(?:(^.)|(\s+.))/g, function(match) {
    return match.charAt(match.length-1).toUpperCase();
}); // HelloWorld

5

lodash 는 트릭을 확실하고 잘 할 수 있습니다.

var _ = require('lodash');
var result = _.camelCase('toto-ce héros') 
// result now contains "totoCeHeros"

lodash"큰"라이브러리 (~ 4kB) 일 수도 있지만 일반적으로 스 니펫을 사용하거나 직접 빌드하는 많은 기능이 포함되어 있습니다.


각 개별 lodash 기능이있는 npm 모듈이 있으므로 모든 "큰"라이브러리를 가져올 필요는 없습니다. npmjs.com/package/lodash.camelcase
gion_13

5

다음은 작업을 수행하는 한 라이너입니다.

const camelCaseIt = string => string.toLowerCase().trim().split(/[.\-_\s]/g).reduce((string, word) => string + word[0].toUpperCase() + word.slice(1));

RegExp에 제공된 문자 목록을 기반으로 소문자 문자열을 분할합니다. [.\-_\s] ([]! 안에 추가) 단어 배열을 반환합니다. 그런 다음 문자열 배열을 대문자의 첫 글자가 포함 된 하나의 연결된 단어 문자열로 줄입니다. Reduce에는 초기 값이 없으므로 두 번째 단어부터 시작하여 첫 글자를 대문자로 시작합니다.

PascalCase를 원한다면 ,'')reduce 메소드에 초기 빈 문자열 을 추가하십시오 .


3

@Scott의 읽기 가능한 접근 방식에 따라 약간의 미세 조정

// 모든 문자열을 camelCase로 변환
var toCamelCase = 함수 (str) {
  str.toLowerCase () 반환
    .replace (/ [ ' "] / g,' ')
    .replace (/ \ W + / g, '')
    .replace (/ (.) / g, function ($ 1) {return $ 1.toUpperCase ();})
    .replace (/ / g, '');
}

3

약간 수정 된 Scott의 답변 :

toCamelCase = (string) ->
  string
    .replace /[\s|_|-](.)/g, ($1) -> $1.toUpperCase()
    .replace /[\s|_|-]/g, ''
    .replace /^(.)/, ($1) -> $1.toLowerCase()

이제 '-'와 '_'도 바꿉니다.


3

아래 14 개의 순열은 모두 "equipmentClassName"의 결과와 동일합니다.

String.prototype.toCamelCase = function() {
  return this.replace(/[^a-z ]/ig, '')  // Replace everything but letters and spaces.
    .replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, // Find non-words, uppercase letters, leading-word letters, and multiple spaces.
      function(match, index) {
        return +match === 0 ? "" : match[index === 0 ? 'toLowerCase' : 'toUpperCase']();
      });
}

String.toCamelCase = function(str) {
  return str.toCamelCase();
}

var testCases = [
  "equipment class name",
  "equipment class Name",
  "equipment Class name",
  "equipment Class Name",
  "Equipment class name",
  "Equipment class Name",
  "Equipment Class name",
  "Equipment Class Name",
  "equipment className",
  "equipment ClassName",
  "Equipment ClassName",
  "equipmentClass name",
  "equipmentClass Name",
  "EquipmentClass Name"
];

for (var i = 0; i < testCases.length; i++) {
  console.log(testCases[i].toCamelCase());
};


네. 함수가 아닌 문자열과 함께 프로토 타입 메서드를 사용하는 것이 좋습니다. 연결에 도움이됩니다.
russellmania

3

이 솔루션을 사용할 수 있습니다 :

String.prototype.toCamelCase = function(){
  return this.replace(/\s(\w)/ig, function(all, letter){return letter.toUpperCase();})
             .replace(/(^\w)/, function($1){return $1.toLowerCase()});
};

console.log('Equipment className'.toCamelCase());


이 예제는 replace 메소드에서 두 개의 다른 함수를 사용하는 방법을 보여줍니다.
Chang Hoon Lee

3

이 질문에는 또 다른 대답이 필요했기 때문에 ...

이전 솔루션 중 몇 가지를 시도했지만 모두 하나의 결함이있었습니다. 일부는 구두점을 제거하지 않았습니다. 일부는 숫자가있는 경우를 처리하지 않았습니다. 일부는 여러 문장 부호를 연속으로 처리하지 않았습니다.

그들 중 누구도와 같은 문자열을 처리하지 않았습니다 a1 2b. 이 경우에는 명시 적으로 정의 된 규칙이 없지만 다른 몇 가지 질문 은 숫자를 밑줄로 구분하는 것이 좋습니다.

이것이 가장 성능이 좋은 대답 (3 개의 정규 표현식이 하나 또는 두 개가 아닌 문자열을 통과한다는 것)이 의심 스럽지만 생각할 수있는 모든 테스트를 통과합니다. 그러나 솔직히 말해서 성능이 중요한 낙타 사례 변환을 많이 수행하는 경우를 상상할 수 없습니다.

( 이것은 npm 패키지 로 추가되었습니다 . Camel Case 대신 Pascal Case를 반환하는 선택적 부울 매개 변수도 포함되어 있습니다.)

const underscoreRegex = /(?:[^\w\s]|_)+/g,
    sandwichNumberRegex = /(\d)\s+(?=\d)/g,
    camelCaseRegex = /(?:^\s*\w|\b\w|\W+)/g;

String.prototype.toCamelCase = function() {
    if (/^\s*_[\s_]*$/g.test(this)) {
        return '_';
    }

    return this.replace(underscoreRegex, ' ')
        .replace(sandwichNumberRegex, '$1_')
        .replace(camelCaseRegex, function(match, index) {
            if (/^\W+$/.test(match)) {
                return '';
            }

            return index == 0 ? match.trimLeft().toLowerCase() : match.toUpperCase();
        });
}

테스트 사례 (Jest)

test('Basic strings', () => {
    expect(''.toCamelCase()).toBe('');
    expect('A B C'.toCamelCase()).toBe('aBC');
    expect('aB c'.toCamelCase()).toBe('aBC');
    expect('abc      def'.toCamelCase()).toBe('abcDef');
    expect('abc__ _ _def'.toCamelCase()).toBe('abcDef');
    expect('abc__ _ d_ e _ _fg'.toCamelCase()).toBe('abcDEFg');
});

test('Basic strings with punctuation', () => {
    expect(`a'b--d -- f.h`.toCamelCase()).toBe('aBDFH');
    expect(`...a...def`.toCamelCase()).toBe('aDef');
});

test('Strings with numbers', () => {
    expect('12 3 4 5'.toCamelCase()).toBe('12_3_4_5');
    expect('12 3 abc'.toCamelCase()).toBe('12_3Abc');
    expect('ab2c'.toCamelCase()).toBe('ab2c');
    expect('1abc'.toCamelCase()).toBe('1abc');
    expect('1Abc'.toCamelCase()).toBe('1Abc');
    expect('abc 2def'.toCamelCase()).toBe('abc2def');
    expect('abc-2def'.toCamelCase()).toBe('abc2def');
    expect('abc_2def'.toCamelCase()).toBe('abc2def');
    expect('abc1_2def'.toCamelCase()).toBe('abc1_2def');
    expect('abc1 2def'.toCamelCase()).toBe('abc1_2def');
    expect('abc1 2   3def'.toCamelCase()).toBe('abc1_2_3def');
});

test('Oddball cases', () => {
    expect('_'.toCamelCase()).toBe('_');
    expect('__'.toCamelCase()).toBe('_');
    expect('_ _'.toCamelCase()).toBe('_');
    expect('\t_ _\n'.toCamelCase()).toBe('_');
    expect('_a_'.toCamelCase()).toBe('a');
    expect('\''.toCamelCase()).toBe('');
    expect(`\tab\tcd`.toCamelCase()).toBe('abCd');
    expect(`
ab\tcd\r

-_

|'ef`.toCamelCase()).toBe(`abCdEf`);
});

수고하셨습니다. 감사합니다. 다른 기본 답변과 비교하여 더 많은 시나리오를 처리합니다.
sean2078

2

내 해결책이 있습니다.

const toCamelWord = (word, idx) =>
  idx === 0 ?
  word.toLowerCase() :
  word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();

const toCamelCase = text =>
  text
  .split(/[_-\s]+/)
  .map(toCamelWord)
  .join("");

console.log(toCamelCase('User ID'))


1

이 방법은 여기에서 대부분의 답변보다 성능이 뛰어나지 만 약간의 해킹이지만 대체는 없으며 정규 표현식도 없으며 단순히 camelCase 인 새 문자열을 작성합니다.

String.prototype.camelCase = function(){
    var newString = '';
    var lastEditedIndex;
    for (var i = 0; i < this.length; i++){
        if(this[i] == ' ' || this[i] == '-' || this[i] == '_'){
            newString += this[i+1].toUpperCase();
            lastEditedIndex = i+1;
        }
        else if(lastEditedIndex !== i) newString += this[i].toLowerCase();
    }
    return newString;
}

1

이것은 밑줄을 포함하여 영문자 이외의 문자를 제거하여 CMS의 답변을 바탕으로합니다 \w.

function toLowerCamelCase(str) {
    return str.replace(/[^A-Za-z0-9]/g, ' ').replace(/^\w|[A-Z]|\b\w|\s+/g, function (match, index) {
        if (+match === 0 || match === '-' || match === '.' ) {
            return ""; // or if (/\s+/.test(match)) for white spaces
        }
        return index === 0 ? match.toLowerCase() : match.toUpperCase();
    });
}

toLowerCamelCase("EquipmentClass name");
toLowerCamelCase("Equipment className");
toLowerCamelCase("equipment class name");
toLowerCamelCase("Equipment Class Name");
toLowerCamelCase("Equipment-Class-Name");
toLowerCamelCase("Equipment_Class_Name");
toLowerCamelCase("Equipment.Class.Name");
toLowerCamelCase("Equipment/Class/Name");
// All output e

1

정규식을 사용하지 않고 소문자 낙타 대소 문자 ( "TestString")에서 소문자 낙타 대소 문자 ( "testString") (대면 정규 표현식은 악의입니다) :

'TestString'.split('').reduce((t, v, k) => t + (k === 0 ? v.toLowerCase() : v), '');

2
단일 문자 매개 변수는 여전히 약간 가독성의 측면에서 악
danwellman

1

나는 약간 더 공격적인 솔루션을 만들었습니다.

function toCamelCase(str) {
  const [first, ...acc] = str.replace(/[^\w\d]/g, ' ').split(/\s+/);
  return first.toLowerCase() + acc.map(x => x.charAt(0).toUpperCase() 
    + x.slice(1).toLowerCase()).join('');
}

위의 방법은 대문자가 아닌 알파벳이 아닌 모든 문자와 단어의 소문자 부분을 제거합니다.

  • Size (comparative) => sizeComparative
  • GDP (official exchange rate) => gdpOfficialExchangeRate
  • hello => hello

1
function convertStringToCamelCase(str){
    return str.split(' ').map(function(item, index){
        return index !== 0 
            ? item.charAt(0).toUpperCase() + item.substr(1) 
            : item.charAt(0).toLowerCase() + item.substr(1);
    }).join('');
}      

1

내 제안은 다음과 같습니다.

function toCamelCase(string) {
  return `${string}`
    .replace(new RegExp(/[-_]+/, 'g'), ' ')
    .replace(new RegExp(/[^\w\s]/, 'g'), '')
    .replace(
      new RegExp(/\s+(.)(\w+)/, 'g'),
      ($1, $2, $3) => `${$2.toUpperCase() + $3.toLowerCase()}`
    )
    .replace(new RegExp(/\s/, 'g'), '')
    .replace(new RegExp(/\w/), s => s.toLowerCase());
}

또는

String.prototype.toCamelCase = function() {
  return this
    .replace(new RegExp(/[-_]+/, 'g'), ' ')
    .replace(new RegExp(/[^\w\s]/, 'g'), '')
    .replace(
      new RegExp(/\s+(.)(\w+)/, 'g'),
      ($1, $2, $3) => `${$2.toUpperCase() + $3.toLowerCase()}`
    )
    .replace(new RegExp(/\s/, 'g'), '')
    .replace(new RegExp(/\w/), s => s.toLowerCase());
};

테스트 사례 :

describe('String to camel case', function() {
  it('should return a camel cased string', function() {
    chai.assert.equal(toCamelCase('foo bar'), 'fooBar');
    chai.assert.equal(toCamelCase('Foo Bar'), 'fooBar');
    chai.assert.equal(toCamelCase('fooBar'), 'fooBar');
    chai.assert.equal(toCamelCase('FooBar'), 'fooBar');
    chai.assert.equal(toCamelCase('--foo-bar--'), 'fooBar');
    chai.assert.equal(toCamelCase('__FOO_BAR__'), 'fooBar');
    chai.assert.equal(toCamelCase('!--foo-¿?-bar--121-**%'), 'fooBar121');
  });
});

1

나는 이것이 오래된 대답이라는 것을 알고 있지만 공백과 _ (lodash)를 모두 처리합니다.

function toCamelCase(s){
    return s
          .replace(/_/g, " ")
          .replace(/\s(.)/g, function($1) { return $1.toUpperCase(); })
          .replace(/\s/g, '')
          .replace(/^(.)/, function($1) { return $1.toLowerCase(); });
}

console.log(toCamelCase("Hello world");
console.log(toCamelCase("Hello_world");

// Both print "helloWorld"

이 주셔서 감사합니다,하지만 길 잃은있을 나타납니다 "에서 .replace(/_/g", " ")그 원인 컴파일 오류?
Crashalot

1
const toCamelCase = str =>
  str
    .replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase())
    .replace(/^\w/, c => c.toLowerCase());

0

편집 : 이제 변경없이 IE8에서 작동합니다.

편집 : 나는 camelCase가 실제로 무엇인지에 대해 소수였습니다 (Leading character 소문자 대 대문자). 커뮤니티는 대체로 주요한 소문자가 낙타의 경우이고 주요 자본은 파스칼의 경우라고 믿고 있습니다. 정규식 패턴 만 사용하는 두 가지 함수를 만들었습니다. :) 그래서 우리는 통일 된 어휘를 사용합니다. 나는 대다수와 일치하도록 입장을 바꿨습니다.


두 가지 경우 모두 단일 정규 표현식이라고 생각합니다.

var camel = " THIS is camel case "
camel = $.trim(camel)
    .replace(/[^A-Za-z]/g,' ') /* clean up non-letter characters */
    .replace(/(.)/g, function(a, l) { return l.toLowerCase(); })
    .replace(/(\s.)/g, function(a, l) { return l.toUpperCase(); })
    .replace(/[^A-Za-z\u00C0-\u00ff]/g,'');
// Returns "thisIsCamelCase"

또는

var pascal = " this IS pascal case "
pascal = $.trim(pascal)
  .replace(/[^A-Za-z]/g,' ') /* clean up non-letter characters */
  .replace(/(.)/g, function(a, l) { return l.toLowerCase(); })
  .replace(/(^.|\s.)/g, function(a, l) { return l.toUpperCase(); })
  .replace(/[^A-Za-z\u00C0-\u00ff]/g,'');
// Returns "ThisIsPascalCase"

함수에서 :이 함수에서 대체가 공백이 아닌 빈 문자열로 az가 아닌 것을 바꾸고 있음을 알 수 있습니다. 이것은 대문자로 단어 경계를 만드는 것입니다. "hello-MY # world"-> "HelloMyWorld"

// remove \u00C0-\u00ff] if you do not want the extended letters like é
function toCamelCase(str) {
    var retVal = '';

    retVal = $.trim(str)
      .replace(/[^A-Za-z]/g, ' ') /* clean up non-letter characters */
      .replace(/(.)/g, function (a, l) { return l.toLowerCase(); })
      .replace(/(\s.)/g, function (a, l) { return l.toUpperCase(); })
      .replace(/[^A-Za-z\u00C0-\u00ff]/g, '');

    return retVal
}

function toPascalCase(str) {
    var retVal = '';

    retVal = $.trim(str)
      .replace(/[^A-Za-z]/g, ' ') /* clean up non-letter characters */
      .replace(/(.)/g, function (a, l) { return l.toLowerCase(); })
      .replace(/(^.|\s.)/g, function (a, l) { return l.toUpperCase(); })
      .replace(/[^A-Za-z\u00C0-\u00ff]/g, '');

    return retVal
}

노트:

  • 나는 가독성을 위해 대소 문자를 구분하지 않는 플래그 (i) 를 패턴 (/ [^ AZ] / ig)에 추가하는 대신 A-Za-z를 남겼습니다 .
  • 이것은 IE8 에서 작동합니다 (더 이상 IE8을 사용하는 사람) . IE11, IE10, IE9, IE8, IE7 및 IE5에서 테스트 한 (F12) dev 도구 사용. 모든 문서 모드에서 작동합니다.
  • 이것은 공백으로 시작하거나 공백없이 시작하는 첫 번째 문자열을 올바르게 입력합니다.

즐겨


첫 글자는 여전히 대문자입니까?
Dave Clarke

예. 시작하기에 더 낮거나 높은 경우 대문자로 표시됩니다.
Joe Johnston

2
낙타 사건이 아니고 OP가 요청한 것과 일치하지 않습니까?
Dave Clarke

다행스럽게도이 수정 사항으로 인해 OP가 원하는 결과를 얻을 수있었습니다. 내 인생을 위해 공감대가 무엇인지 전혀 몰랐다. OP에 응답하지 않습니다 ... 그렇게 할 것입니다. :)
Joe Johnston

1
"PascalCase"는 우리가 주도하는 자본으로 낙타 케이스라고합니다.
테드 모린

0

나는 이것이 효과가 있다고 생각한다 ..

function cammelCase(str){
    let arr = str.split(' ');
    let words = arr.filter(v=>v!='');
    words.forEach((w, i)=>{
        words[i] = w.replace(/\w\S*/g, function(txt){
            return txt.charAt(0).toUpperCase() + txt.substr(1);
        });
    });
    return words.join('');
}

0

String.prototypes는 읽기 전용이므로 String.prototype.toCamelCase ()를 사용하지 마십시오. 대부분의 js 컴파일러는이 경고를 표시합니다.

나처럼 문자열에 항상 하나의 공간 만 포함한다는 것을 아는 사람들은 더 간단한 접근법을 사용할 수 있습니다.

let name = 'test string';

let pieces = name.split(' ');

pieces = pieces.map((word, index) => word.charAt(0)[index===0 ? 'toLowerCase' :'toUpperCase']() + word.toLowerCase().slice(1));

return pieces.join('');

좋은 하루 되세요. :)

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