Umwandlung einer Schnur in einen Kamelkoffer


170

Wie kann ich einen String mit Javascript Regex in einen Kamelfall konvertieren?

EquipmentClass nameoder Equipment classNameoder equipment class nameoderEquipment Class Name

sollten alle werden : equipmentClassName.


1
Ich habe einen jsperf- Test der verschiedenen Methoden durchgeführt. Die Ergebnisse waren leicht nicht schlüssig. es scheint von der Eingabezeichenfolge abzuhängen.
Yincrash


Ein neuer jsperf-Test mit ein paar verschiedenen zu testenden Zeichenfolgen und einer größeren Auswahl an Implementierungen: jsperf.com/camel-casing-regexp-or-character-manipulation/1 - dies führt mich zu dem Schluss, dass für den Durchschnittsfall trotz Wenn der Fragesteller diese Frage formuliert, sind reguläre Ausdrücke nicht das, was Sie wollen. Sie sind nicht nur viel schwerer zu verstehen, sondern dauern auch (zumindest für aktuelle Versionen von Chrome) etwa doppelt so lange.
Jules

Antworten:


237

Wenn Sie sich Ihren Code ansehen, können Sie ihn mit nur zwei replaceAufrufen erreichen:

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"

Bearbeiten: Oder mit einem einzigen replaceAnruf, wobei die Leerzeichen auch in der erfasst werden 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
Großartiger Code, und am Ende gewann er jsperf.com/js-camelcase/5 . Möchten Sie eine Version hinzufügen, die Nicht-Alpha-Zeichen verarbeiten (entfernen) kann? camelize("Let's Do It!") === "let'SDoIt!" trauriges Gesicht . Ich werde es selbst versuchen, aber ich fürchte, ich werde nur einen weiteren Ersatz hinzufügen.
Orwellophile

2
.. da das Nicht-Alpha den Fall nicht beeinflussen sollte, bin ich nicht sicher, ob es besser gemacht werden kann als return this.replace(/[^a-z ]/ig, '').replace(/(?:^\w|[A-Z]|\b\w|\s+)/g,...
Orwellophile

4
Für meine ES2015 + Freunde: Ein Einzeiler basierend auf dem obigen Code. const toCamelCase = (str) => str.replace(/(?:^\w|[A-Z]|\b\w)/g, (ltr, idx) => idx === 0 ? ltr.toLowerCase() : ltr.toUpperCase()).replace(/\s+/g, '');
Tabrindle

2
Dies war zwar kein Beispiel, aber eine weitere häufige Eingabe, die Sie wahrscheinlich sehen werden, ist "EQUIPMENT CLASS NAME", für die diese Methode fehlschlägt.
Alexander Tsepkov

1
@EdmundReed Sie können einfach die gesamte Zeichenfolge in Kleinbuchstaben konvertieren, bevor Sie sie in Kamelbuchstaben konvertieren, indem Sie die .toLowerCase()Methode in verketten . mit @ tabrindle Lösung oben: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

Wenn jemand lodash benutzt , gibt es eine _.camelCase()Funktion.

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

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

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

2
Diese Antwort sollte definitiv weiter oben erscheinen. Lodash bietet einen vollständigen Satz zum Konvertieren von Zeichenfolgen zwischen verschiedenen Fällen.
BTX

55

Am Ende habe ich das gemacht:

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

Ich habe versucht zu vermeiden, mehrere Ersetzungsanweisungen miteinander zu verketten. Etwas, bei dem ich $ 1, $ 2, $ 3 in meiner Funktion hätte. Aber diese Art der Gruppierung ist schwer zu verstehen, und Ihre Erwähnung von Cross-Browser-Problemen ist etwas, woran ich auch nie gedacht habe.


1
Das sieht für mich gut aus und nichts sieht in Bezug auf browserübergreifende Probleme verdächtig aus. (Nicht, dass ich ein Superexperte oder so bin.)
Pointy

47
Wenn Sie den String.prototype verwenden möchten, verwenden Sie einfach 'this', anstatt einen 'str'-Parameter zu senden.
Yincrash

6
Für eine bessere Browserkompatibilität verwenden Sie bitte diese anstelle von str (und entfernen Sie den Parameter aus dem Funktionsaufruf)
João Paulo Motta

2
Sie müssen nur verwenden, this.valueOf()anstatt zu übergeben str. Alternativ (wie in meinem Fall), this.toLowerCase()da sich meine Eingabezeichenfolgen in ALL CAPS befanden, bei denen die Nicht-Buckel-Teile nicht richtig in Kleinbuchstaben geschrieben waren. Mit using wird nur thisdas Zeichenfolgenobjekt selbst zurückgegeben, das eigentlich ein Array von Zeichen ist, daher der oben erwähnte TypeError.
Draco18s vertraut SE nicht mehr

2
Dies gibt genau das Gegenteil von dem zurück, was benötigt wird. Dies wird sTRING zurückgeben.
Awol

41

Sie können diese Lösung verwenden:

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

Dies ist Großbuchstaben, kein Kamel.
Nikk Wong

2
Der Kamelfall ist das erste Zeichen jedes Wortes in einem Großbuchstaben, und die toCamelCaseFunktion macht genau das.
ismnoiet

2
Sie denken an PascalCase . CamelCase kann entweder in Groß- oder Kleinbuchstaben geschrieben werden. In diesem Zusammenhang wird häufig Kleinbuchstaben verwendet, um Verwirrung zu vermeiden.
Kody

1
Vielen Dank an @Kody, @ cchamberlain für Ihren konstruktiven Kommentar. Schauen Sie sich die aktualisierte Version an.
ismnoiet

5
+1 für nicht reguläre Ausdrücke verwenden, auch wenn die Frage nach einer Lösung , mit ihnen gefragt. Dies ist eine viel klarere Lösung und auch ein klarer Gewinn für die Leistung (da die Verarbeitung komplexer regulärer Ausdrücke eine viel schwierigere Aufgabe ist, als nur eine Reihe von Zeichenfolgen zu durchlaufen und Teile davon zusammenzufügen). Siehe jsperf.com/camel-casing-regexp-or-character-manipulation/1, wo ich einige der Beispiele hier zusammen mit diesem genommen habe (und auch meine eigene bescheidene Verbesserung davon für die Leistung, obwohl ich dies wahrscheinlich vorziehen würde Version aus Gründen der Klarheit in den meisten Fällen).
Jules

40

Um C amel C ase zu bekommen

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


Zu erhalten C amel S entence C ase oder P Ascal C ase

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

Hinweis:
Für Sprachen mit Akzenten. À-ÖØ-öø-ÿFügen Sie der Regex Folgendes hinzu
.replace(/[^a-zA-ZÀ-ÖØ-öø-ÿ0-9]+(.)/g


3
Die beste Antwort hier - sauber und prägnant.
Codeepic

5
ES6 hat gerade alles für mich klein geschrieben
C Bauer

@Luis hat https://stackoverflow.com/posts/52551910/revisionsES6 hinzugefügt , ich habe es nicht getestet. Ich werde überprüfen und aktualisieren.
Smilyface

Funktioniert nicht für Wörter mit Akzenten jsbin.com/zayafedubo/edit?js,console
Manuel Ortiz

1
Es wird nicht funktionieren, wenn Sie eine Kamelschnur übergeben. Wir müssen überprüfen, ob wir bereits eine Schnur haben.
Sheikh Abdul Wahid

27

In Scotts speziellem Fall würde ich mich für etwas entscheiden wie:

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

Der reguläre Ausdruck stimmt mit dem ersten Zeichen überein, wenn er mit einem Großbuchstaben beginnt, und mit jedem alphabetischen Zeichen, das auf ein Leerzeichen folgt, dh zwei- oder dreimal in den angegebenen Zeichenfolgen.

Durch Aufpeppen des regulären Ausdrucks /^([A-Z])|[\s-_](\w)/gwerden auch Bindestriche und Unterstriche von Typnamen getarnt.

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

Was ist, wenn die Zeichenfolge mehr als 2,3 Hypens oder Unterstriche enthält, z. B. Datenproduktname, Datenproduktbeschreibung, Produktcontainer, Aktionen, Preis, Foto-Platzhalter, Foto
Ashwani Shukla,

1
@AshwaniShukla Um mehrere Bindestriche und / oder Unterstriche zu verarbeiten, müssen Sie der Zeichengruppe einen Multiplikator ( +) hinzufügen , dh:/^([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, '' );
}

Ich habe versucht, eine JavaScript-Funktion für camelCaseeine Zeichenfolge zu finden, und wollte sicherstellen, dass Sonderzeichen entfernt werden (und ich hatte Probleme zu verstehen, was einige der obigen Antworten taten). Dies basiert auf der Antwort von cc young mit zusätzlichen Kommentaren und dem Entfernen von $ peci & l-Zeichen.


10

Zuverlässiges Arbeitsbeispiel, das ich seit Jahren verwende:

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

Groß- / Kleinschreibung ändernde Zeichen:

  • Bindestrich -
  • unterstreichen _
  • Zeitraum .
  • Platz

9

Wenn kein regulärer Ausdruck erforderlich ist, sollten Sie sich den folgenden Code ansehen, den ich vor langer Zeit für Twinkle erstellt habe :

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

Ich habe keine Leistungstests durchgeführt, und Regexp-Versionen sind möglicherweise schneller oder nicht.


Im Durchschnitt 5x schneller, wenn Sie nur 1 Wort benötigen jsbin.com/wuvagenoka/edit?html,js,output
Omu

8

Mein ES6- Ansatz:

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"

Was ist mit Namen wie Jean-Pierre?
Max Alexander Hanna

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

5

lodash kann den Trick sicher und gut machen:

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

Obwohl es sich lodashmöglicherweise um eine "große" Bibliothek handelt (~ 4 KB), enthält sie viele Funktionen, für die Sie normalerweise ein Snippet verwenden oder selbst erstellen würden.


Es gibt npm-Module mit jeder einzelnen lodash-Funktion, so dass Sie nicht die gesamte "große" Bibliothek importieren
müssen

5

Hier ist ein Einzeiler, der die Arbeit erledigt:

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

Es teilt die Zeichenfolge in Kleinbuchstaben basierend auf der Liste der in RegExp bereitgestellten Zeichen auf [.\-_\s](fügen Sie mehr in [] hinzu!) Und gibt ein Wortarray zurück. Anschließend wird das Array von Zeichenfolgen auf eine verkettete Zeichenfolge mit Großbuchstaben reduziert. Da die Reduzierung keinen Anfangswert hat, werden die ersten Buchstaben beginnend mit dem zweiten Wort in Großbuchstaben geschrieben.

Wenn Sie PascalCase möchten, fügen Sie der Reduktionsmethode einfach eine anfängliche leere Zeichenfolge hinzu ,'').


3

Nach dem lesbaren Ansatz von @ Scott ein wenig Feinabstimmung

// Konvertiere einen String in camelCase
var toCamelCase = Funktion (str) {
  return str.toLowerCase ()
    .replace (/ ['"] / g,' ')
    .replace (/ \ W + / g, '')
    .replace (/ (.) / g, function ($ 1) {return $ 1.toUpperCase ();})
    .replace (/ / g, '');
}}

3

wenig modifizierte Scotts Antwort:

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

jetzt ersetzt es auch '-' und '_'.


3

Alle 14 Permutationen unten erzeugen das gleiche Ergebnis von "deviceClassName".

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


Ja. Ich mag die Verwendung von Prototypmethoden mit Strings anstelle von Funktionen. Es hilft bei der Verkettung.
Russellmania

3

Sie können diese Lösung verwenden:

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


Dieses Beispiel zeigt Ihnen, wie Sie zwei weitere Funktionen in der Ersetzungsmethode verwenden.
Chang Hoon Lee

3

Weil diese Frage noch eine andere Antwort brauchte ...

Ich habe mehrere der vorherigen Lösungen ausprobiert, und alle hatten den einen oder anderen Fehler. Einige haben die Interpunktion nicht entfernt; Einige behandelten Fälle mit Zahlen nicht. Einige haben nicht mehrere Satzzeichen hintereinander verarbeitet.

Keiner von ihnen handhabte eine Schnur wie a1 2b. Für diesen Fall gibt es keine explizit definierte Konvention, aber einige andere Fragen zum Stapelüberlauf schlugen vor, die Zahlen durch einen Unterstrich zu trennen.

Ich bezweifle, dass dies die performanteste Antwort ist (drei reguläre Ausdrücke durchlaufen die Zeichenfolge und nicht eine oder zwei), aber sie besteht alle Tests, die mir einfallen. Um ehrlich zu sein, kann ich mir keinen Fall vorstellen, in dem Sie so viele Kamel-Fall-Konvertierungen durchführen, dass die Leistung von Bedeutung wäre.

(Ich habe dies als npm-Paket hinzugefügt . Es enthält auch einen optionalen booleschen Parameter, um Pascal Case anstelle von Camel Case zurückzugeben.)

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

Testfälle (Scherz)

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

Hervorragende Arbeit, danke. Behandelt viel mehr Szenarien als die anderen elementaren Antworten.
Sean2078

2

Da ist meine Lösung:

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

Diese Methode scheint die meisten Antworten hier zu übertreffen, sie ist jedoch ein bisschen hackig, keine Ersetzungen, keine Regex, sondern einfach eine neue Zeichenfolge aufzubauen, die camelCase ist.

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

Dies baut auf der Antwort von CMS auf, indem nicht alphabetische Zeichen einschließlich Unterstrichen entfernt werden, die \wnicht entfernt werden.

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

Oberes Kamelgehäuse ("TestString") bis unteres Kamelgehäuse ("testString") ohne Verwendung von Regex (seien wir ehrlich, Regex ist böse):

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

2
Einzelzeichenparameter sind in Bezug auf die Lesbarkeit immer noch etwas schlecht
danwellman

1

Am Ende habe ich eine etwas aggressivere Lösung gefunden:

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

In diesem obigen Abschnitt werden alle nicht alphanumerischen Zeichen und Kleinbuchstaben von Wörtern entfernt, die ansonsten in Großbuchstaben bleiben würden, z

  • 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

Hier ist mein Vorschlag:

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

oder

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

Testfälle:

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

Ich weiß, dass dies eine alte Antwort ist, aber dies behandelt sowohl Leerzeichen als auch _ (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"

Vielen Dank dafür, aber es scheint einen Streuner "zu geben .replace(/_/g", " "), der Kompilierungsfehler verursacht.
Crashalot

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

0

EDIT : Jetzt in IE8 ohne Änderungen arbeiten.

EDIT : Ich war in der Minderheit darüber, was camelCase eigentlich ist (Hauptzeichen Kleinbuchstaben vs. Großbuchstaben.). Die gesamte Gemeinde glaubt, dass ein führender Kleinbuchstabe ein Kamelfall und ein führendes Kapital ein Pascalfall ist. Ich habe zwei Funktionen erstellt, die nur Regex-Muster verwenden. :) Also verwenden wir ein einheitliches Vokabular. Ich habe meine Haltung geändert, um der Mehrheit zu entsprechen.


Ich glaube, Sie brauchen in beiden Fällen nur einen einzigen regulären Ausdruck:

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"

oder

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"

In Funktionen: Sie werden feststellen, dass in diesen Funktionen das Ersetzen jedes Nicht-Az durch ein Leerzeichen gegen eine leere Zeichenfolge austauscht. Dies dient dazu, Wortgrenzen für die Großschreibung zu erstellen. "hallo-MEINE # Welt" -> "HalloMyWorld"

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

Anmerkungen:

  • Ich habe A-Za-z verlassen, um das Muster (/ [^ AZ] / ig) zur besseren Lesbarkeit mit dem Flag (i) für die Groß- und Kleinschreibung zu versehen.
  • Dies funktioniert in IE8 (srsly, der IE8 nicht mehr verwendet). Verwenden der (F12) -Entwicklungstools, die ich in IE11, IE10, IE9, IE8, IE7 und IE5 getestet habe. Funktioniert in allen Dokumentmodi.
  • Dadurch wird der erste Buchstabe der Zeichenfolgen, die mit oder ohne Leerzeichen beginnen, korrekt umschrieben.

Genießen


Der erste Buchstabe ist noch groß geschrieben?
Dave Clarke

Ja. Es wird aktiviert, wenn es zu Beginn niedriger oder höher ist.
Joe Johnston

2
Nun, das ist kein Kamelfall - und stimmt nicht mit den Anforderungen des OP überein?
Dave Clarke

Hoffentlich liefert diese Bearbeitung die Ergebnisse, nach denen das OP gesucht hat. Für mein Leben hatte ich keine Ahnung, wofür die Ablehnung war. Nicht auf das OP antworten ... Das wird es tun. :)
Joe Johnston

1
Ich glaube, "PascalCase" ist das, was wir camelCase mit einem führenden Kapital nennen.
Ted Morin

0

Ich denke das sollte funktionieren ..

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

Verwenden Sie String.prototype.toCamelCase () nicht, da String.prototypen schreibgeschützt sind. Die meisten js-Compiler geben diese Warnung aus.

Wie ich können diejenigen, die wissen, dass die Zeichenfolge immer nur ein Leerzeichen enthält, einen einfacheren Ansatz verwenden:

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

Haben Sie einen guten Tag. :) :)

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.