161

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

marker-imageまたはmy-example-settingtomarkerImageまたはmyExampleSetting。

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

jQueryはありません...

4

16 に答える 16

295

これを試して：

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

正規表現はinに一致し-i、 。marker-imageのみをキャプチャしiます。次に、これはコールバック関数で大文字になり、置き換えられます。

于 2011-07-12T07:49:38.330 に答える
52

これは、あなたが悟りを開いてプロジェクトに含めた場合にLodashが提供する優れたユーティリティの1つです。

var str = 'my-hyphen-string';
str = _.camelCase(str);
// results in 'myHyphenString'
于 2015-07-07T13:21:41.947 に答える
17

ハイフンと次の文字を取得して、大文字の文字に置き換えることができます。

var str="marker-image-test";
str.replace(/-([a-z])/g, function (m, w) {
    return w.toUpperCase();
});
于 2011-07-12T07:49:42.010 に答える
14

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

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);
}
于 2013-09-01T09:22:01.643 に答える
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
于 2017-07-14T19:38:23.323 に答える
3

正規表現リテラルと置換関数を使用してStringのreplace()メソッドを使用します。

例えば：

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

説明：

  • 'uno-due-tre'キャメルケースに変換する（入力）文字列です。
  • /-./g（に渡される最初の引数replace()）は正規表現リテラルです。
    • （'-.'スラッシュの間）はパターンです。'-'これは、単一の文字の後に任意の単一の文字が続く場合に一致します。したがって、文字列'uno-due-tre'の場合、パターンはとに'-.'一致'-d'し'-t'ます。
    • （'g'閉じスラッシュの後）はフラグです。これは「グローバル」の略でreplace()、グローバル検索と置換を実行するように指示します。つまり、最初の一致だけでなく、すべての一致を置換します。
  • (m) => m[1].toUpperCase()（に渡される2番目の引数replace()）は置換関数です。試合ごとに1回呼び出されます。一致した各サブ文字列は、この関数が返す文字列に置き換えられます。m（この関数の最初の引数）は、一致した部分文字列を表します。この関数は、m大文字の2番目の文字を返します。したがって、mがの場合'-d'、この関数はを返します'D'。
  • 'unoDueTre'によって返される新しい（出力）文字列replace()です。入力文字列は変更されません。
于 2021-01-22T03:52:22.700 に答える
2 
// Turn the dash separated variable name into camelCase.
str = str.replace(/\b-([a-z])/g, (_, char) => char.toUpperCase());
于 2014-09-15T06:13:34.017 に答える
2

これが私の実装です（手を汚すためだけに）

/**
 * 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('');
}
于 2018-10-01T17:45:49.657 に答える
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
于 2014-03-05T15:08:24.253 に答える
1

NPMのキャメルケースを使用できます。

npm install --save camelcase

const camelCase = require('camelcase');
camelCase('marker-image'); // => 'markerImage';
camelCase('my-example-setting'); // => 'myExampleSetting';
于 2019-08-06T18:16:02.847 に答える
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
于 2015-06-17T17:25:05.520 に答える
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');
于 2017-01-11T10:32:24.227 に答える
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;
}
于 2018-08-30T18:30:25.090 に答える
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)}`);

于 2020-06-11T13:47:05.093 に答える
0

文字列メソッドと配列メソッドを使用することもできます。スペースを避けるためにトリムを使用しました。

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

}
于 2021-03-22T08:08:28.890 に答える
0

この単純なソリューションは、これらのエッジケースを考慮に入れています。

  • 一つの単語
  • 一文字
  • ハイフンなし
  • 1つ以上のハイフン

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

于 2021-09-09T19:33:46.100 に答える