web-dev-qa-db-ja.com

文字列をキャメルケースに変換する

Javascript regexを使用して文字列をラクダケースに変換するにはどうすればよいですか？

EquipmentClass nameまたはEquipment classNameまたはequipment class nameまたはEquipment Class Name

すべてがequipmentClassNameになります。

javascriptregexcamelcasing
129
Scott

私はちょうどこれをやった：

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

複数の置換ステートメントが連鎖するのを避けようとしていました。私の関数に$ 1、$ 2、$ 3がある場所。しかし、このタイプのグループ化は理解するのが難しく、クロスブラウザの問題についてのあなたの言及は、私も考えもしなかったものです。

42
Scott

コードを見ると、たった2つの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();
  });
}
191
CMS

誰かが lodash を使用している場合、 _.camelCase() 関数があります。

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

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

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

このソリューションを使用できます：

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

スコットの具体的なケースでは、次のようなものに行きます。

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
24
Fredric
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関数を見つけようとしていて、特殊文字が削除されることを確認したかった（そして、上記の答えのいくつかが何をしていたのか理解するのに苦労した）。これはc c youngの回答に基づいており、コメントが追加され、$ peci＆l文字が削除されています。

20
Eilidh

正規表現が不要な場合は、 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 );
}

パフォーマンステストは行っていないため、正規表現のバージョンの方が速い場合とない場合があります。

8
azatoth

取得するにはcamel 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());
}


取得するにはCamel S entence C aseまたはPascal 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

8
smilyface

私の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"
7
eledgaar

lodash トリックを確実に行うことができます：

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

lodashは「大きな」ライブラリ（〜4kB）かもしれませんが、通常はスニペットを使用するか、自分でビルドする多くの関数が含まれています。

5
Alain Beauvois

作業を行うライナーが1つあります。

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

RegExp [.\-_\s]（[]！内にさらに追加）で提供される文字のリストに基づいて小文字の文字列を分割し、Word配列を返します。次に、文字列の配列を、大文字の最初の文字で連結された1つの単語の文字列に減らします。 reduceには初期値がないため、最初の文字の大文字化は2番目のWordから始まります。

PascalCaseが必要な場合は、reduceメソッドに最初の空の文字列,'')を追加するだけです。

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

以下の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());
};
3
Mr. Polywhirl

このソリューションを使用できます：

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());
3
Chang Hoon Lee

@Scottの読み取り可能なアプローチに従って、少し微調整します

 //文字列をcamelCase 
 var toCamelCase = function（str）に変換します{
 return str.toLowerCase（）
 .replace（/ ['"]/g、 ''）
 .replace（/\W +/g、 ''）
 .replace（/（。）/ g、function（$ 1）{return $ 1.toUpperCase（）;} ）
 .replace（//g、 ''）; 
}
3
cc young

スコットの答えを少し修正しました：

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

現在は、「-」と「_」も置き換えられています。

2
sunstory

私の解決策があります：

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'))
2
Daniil Khudiakov

これは、アルファベット以外の文字を含むアンダースコアを削除することにより、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
wheeler

私はやや攻撃的なソリューションを作成することになりました。

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
bjornl

これが私の提案です：

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
kalicki2k
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
user6921695

大文字のキャメルケース（ "TestString"）から下位のキャメルケース（ "testString"）へ。

'TestString'.split('').reduce((t, v, k) => t + (k === 0 ? v.toLowerCase() : v), '');
1
Christoph Bühler

この方法は、ここでのほとんどの回答よりも優れているようです。ただし、少しハックがありますが、置換、正規表現はなく、単に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
Thieu

これはうまくいくと思う。

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
Darryl Ceguerra

EDIT：変更なしでIE8で動作するようになりました。

EDIT：camelCaseが実際に何であるかについては少数派でした（先頭文字が小文字か大文字か）。コミュニティ全体では、主要な小文字はキャメルケースであり、主要な資本はパスカルケースであると考えています。正規表現パターンのみを使用する2つの関数を作成しました。 :)だから私たちは統一されたボキャブラリーを使用します。私はスタンスを大多数に合うように変えました。

どちらの場合でも、必要なのは単一の正規表現だけです。

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"

関数内：これらの関数では、a-z以外のすべての文字列がスペースと空の文字列で置き換えられます。これは、大文字の単語の境界を作成することです。 「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
}

ノート：

  • A-Za-zのままにして、読みやすさのために大文字と小文字を区別しないフラグ（i）をパターン（/ [^ A-Z]/ig）に追加しました。
  • これはIE8（srsly、もうIE8を使用している人）で動作します。IE11でテストした（F12）開発ツールの使用、IE10、IE9、IE8、IE7、およびIE5。すべてのドキュメントモードで機能します。
  • これにより、空白の有無にかかわらず、文字列の最初の文字が正しく大文字に変換されます。

楽しい

0
Joe Johnston

私はこれが古い答えであることを知っていますが、これは空白と_（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"
0
Sampgun

String.prototypesは読み取り専用であるため、String.prototype.toCamelCase（）を使用しないでください。ほとんどのjsコンパイラーはこの警告を表示します。

私のように、文字列には常に1つのスペースしか含まれないことを知っている人は、より簡単なアプローチを使用できます。

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

良い一日を過ごしてください。 :)

0
Jaskaran Singh

TurboCommonsライブラリを使用した非常に簡単な方法：

npm install turbocommons-es5

<script src="turbocommons-es5/turbocommons-es5.js"></script>

<script>
    var StringUtils = org_turbocommons.StringUtils;
    console.log(StringUtils.formatCase('EquipmentClass', StringUtils.FORMAT_LOWER_CAMEL_CASE));
    console.log(StringUtils.formatCase('Equipment className', StringUtils.FORMAT_LOWER_CAMEL_CASE));
    console.log(StringUtils.formatCase('equipment class name', StringUtils.FORMAT_LOWER_CAMEL_CASE));
    console.log(StringUtils.formatCase('Equipment Class Name', StringUtils.FORMAT_LOWER_CAMEL_CASE));
</script>

また、StringUtils.FORMAT_CAMEL_CASEおよびStringUtils.FORMAT_UPPER_CAMEL_CASEを使用して、大文字小文字のバリエーションを生成することもできます。

詳細はこちら：

文字列をCamelCase、UpperCamelCaseまたはlowerCamelCaseに変換

0
Jaume Mussons Abad

基本的なアプローチは、大文字またはスペースに一致する正規表現で文字列を分割することです。次に、ピースを接着して戻します。トリックは、ブラウザ間で正規表現の分割が壊れる/奇妙なさまざまな方法に対処します。これらの問題を修正するために誰かが書いたライブラリまたは何かがあります。探します。

ここにリンクがあります： http://blog.stevenlevithan.com/archives/cross-browser-split

0
Pointy

この質問にはさらに別の答えが必要だったので...

以前のソリューションをいくつか試しましたが、すべてに何らかの欠陥がありました。句読点を削除しなかった人もいます。数字のあるケースを処理しなかった人もいます。複数の句読点を連続して処理しなかった人もいました。

それらのどれもa1 2bのような文字列を処理しませんでした。このケースには明確に定義された規則はありませんが、いくつかの他の stackoverflowの質問 はアンダースコアで数字を区切ることを提案しました。

これが最もパフォーマンスの高い答え（1つまたは2つではなく、3つの正規表現が文字列を通過する）であるとは思いませんが、考えられるすべてのテストに合格します。正直なところ、パフォーマンスが問題になるほど多くのラクダケース変換を実行しているケースを本当に想像することはできません。

（これを npmパッケージ として追加しました。また、キャメルケースではなくパスカルケースを返すオプションのブールパラメータも含まれています。）

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