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

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

regex (내가 가정한) 또는 다른 방법으로 다음과 같은 것을 변환할 수 있는 방법은 무엇입니까?

marker-image아니면my-example-settingmarkerImage아니면myExampleSetting.

난 그냥 그냥 그냥 헤어질까 생각 중이었어요.-그런 다음 해당 하이픈의 인덱스 +1을 대문자로 변환합니다.하지만 꽤 더러운 것 같고 코드를 더 깨끗하게 만들 수 있는 regex에 대한 도움을 바라고 있었습니다.

JQuery가 없습니다.

시도해 보기:

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

은 합니다와 합니다.-i인에marker-image고e만 합니다.i교체됩니다. 그러면 콜백 기능에서 대문자로 표시되고 바뀝니다.

이것은 여러분이 깨우쳐 프로젝트에 포함시킨다면 Lodash가 제공하는 훌륭한 유틸리티 중 하나입니다.

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

하이픈과 다음 문자를 가져와 대문자 버전의 문자로 대체할 수 있습니다.

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

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를 사용할 수 있습니다.필요하시면 제 LC를 먼저 드리겠습니다.

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

정규식 리터럴 및 대체 함수와 함께 의 방법을 사용합니다.

예를 들어,

'uno-due-tre'.replace(/-./g, (m) => m[1].toUpperCase()) // --> 'unoDueTre'

설명:

• 'uno-due-tre'는 카멜 케이스로 변환할 (입력) 문자열입니다.
• /-./g( 에 전달된 첫 번째 인수는 정규식 리터럴입니다.
  • '-.'(슬래시 사이)는 패턴입니다.과와 합니다.'-'문자 다음에 하나의 문자가 표시됩니다.서은go서r.'uno-due-tre', '-.'성냥'-d'그리고.'-t'.
  • 'g'(클로징 슬래시 뒤에)는 플래그입니다.이 용어는 "global"의 약자로, 글로벌 검색을 수행하고 첫 번째 경기만 교체하는 것이 아니라 모든 경기를 교체하라는 것입니다.
• (m) => m[1].toUpperCase()(에 전달된 두 번째 인수는 대체 함수입니다.경기마다 한 번씩 호출됩니다.일치하는 각 부분 문자열은 이 함수가 반환하는 문자열로 바뀝니다.m(이 함수의 첫 번째 인수)는 일치하는 부분 문자열을 나타냅니다.이 함수는 다음의 두번째 문자를 반환합니다.m대문자의그래서 언제m가'-d', 이 함수는 반환됩니다.'D'.
• 'unoDueTre'는 에 의해 반환되는 새 (출력) 문자열입니다.입력 문자열은 변경되지 않은 상태로 유지됩니다.

이건 소리를 지르지 않습니다.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

이것이 제가 구현한 것입니다. (손을 더럽히기 위해서입니다.)

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

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

여기에 몇 가지 답변을 조합하여 문자열에 메소드로 만드는 다른 옵션이 있습니다.

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

한 번 더.

사용할 때 사용...

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

또한 해당 작업에 대해 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');

플래그가 있는 버전, 루프용, 그리고 Regex가 없는 버전:

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

카멜케이스는 NPM에서 사용 가능합니다.

npm install --save camelcase

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

문자열에 숫자를 허용하는 경우 이를 사용합니다.

분명히 숫자로 시작하는 부분은 대문자로 표시되지 않지만 일부 상황에서는 유용할 수 있습니다.

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

문자열과 배열 방법을 사용할 수도 있습니다. 공백을 피하기 위해 트림을 사용했습니다.

const properCamel = (str) =>{

  const lowerTrim = str.trim().toLowerCase(); 

  const array = lowerTrim.split('-');

  const firstWord = array.shift();

  const caps = array.map(word=>{

    return word[0].toUpperCase() + word.slice(1);

  })

  caps.unshift(firstWord)

  return caps.join('');

}

이 간단한 솔루션은 이러한 에지 사례를 고려합니다.

• 낱말
• 한글자
• 하이픈 없음
• 하이픈 1개 이상

const toCamelCase = (text) => text.replace(/(.)([^-|$]*)[-]*/g, (_,letter,word) => `${letter.toUpperCase()}${word.toLowerCase()}`)

언급URL : https://stackoverflow.com/questions/6660977/convert-hyphens-to-camel-case-camelcase