ハイフンをキャメルケースに変換(camelCase)


146

正規表現(私は想定)または他の方法を使用して、次のようなものを変換するにはどうすればよいですか?

marker-imageまたはmy-example-settingmarkerImageまたはmyExampleSetting

分割して-、ハイフン+1のインデックスを大文字に変換することを考えていました。しかし、それはかなり汚いようであり、コードをよりクリーンにすることができる正規表現の助けを期待していました。

jQuery なし ...



7
実際にはそうですが、名前がわかりにくいためか、検索して見つけられませんでした。私は、人々が実際に答えを見つけられるように、これをオープンにしておくことをお勧めします。"RegExp $ 1 to uppercase" ...彼らが正規表現IMOをすでに知っていなければ、誰もそれを見つけることはできません
オスカーゴッドソン

それは簡単に修正できました。タイトルを編集しました
mplungjan

したがって、ソリューションをカットアンドペーストすれば、受け入れられる答えが得られます:|
mplungjan

正反対の方法はありますか?
パヴァン

回答:


258

これを試して:

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

正規表現がマッチする-imarker-image、キャプチャのみi。これはコールバック関数で大文字になり、置き換えられます。


53
FYI、ここでは逆です:myString.replace(/([a-z][A-Z])/g, function (g) { return g[0] + '-' + g[1].toLowerCase() });
シリル・N.

パラメータは「match」のように「m」に名前を変更する必要があると思います。すぐに次のようなものを書くことができます: myString.replace(/-([a-z])/i, function (i) { return i[1].toUpperCase() });
programaths

8
iフラグを追加して、正規表現をより堅牢にすることをお勧めします。これがないと、パターンは「capitalized-Parts」を逃します(「capitalizedParts」に変更されません)。また、私は個人的には複数のパラメーターの読みやすさの向上を好みますが、それは明らかにスタイルの問題です。全体として、私はと一緒に行き.replace( /-([a-z])/gi, function ( $0, $1 ) { return $1.toUpperCase(); } );ます。
hashchange 2015年

あなたはキャメルケースにしたい場合は、この時に追加するには、スペースで区切られた単語をうまくとして、次のように動作します:var camelCased = myString.replace(/(-+|\s+)\w/g, function (g) { return g[1].toUpperCase(); });
wolfram77

@ wolfram77、正規表現に複数のダッシュ/スペース文字を含め、一致の2番目の文字を大文字にします。つまり、2番目の文字がスペースまたはダッシュの場合、大文字になります。これはどうvar camelCased = myString.replace(/(-+|\s+)\w/g, function (g) { return g[g.length - 1].toUpperCase(); });ですか?
トリシス

44

これは、啓発されてプロジェクトに含まれている場合にLodashが提供する優れたユーティリティの1つです。

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())に
それを追加しました

13

これがキャメルケース関数の私のバージョンです:

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

次のすべてのエッジケースを処理します。

  • デフォルトでアンダースコアとハイフンの両方を処理します(2番目のパラメーターで構成可能)
  • 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());


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

比較::: 2つの異なるスクリプトの実行時間を測定します。

$ 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.