Bindestriche in Kamelkasten umwandeln (camelCase)

146

Wie kann ich mit Regex (nehme ich an) oder einer anderen Methode Dinge konvertieren wie:

marker-imageoder my-example-settingzu markerImageoder myExampleSetting.

Ich habe darüber nachgedacht -, den Index dieses Hypen +1 nur in Großbuchstaben umzuwandeln. Aber es scheint ziemlich schmutzig zu sein und hoffte auf Hilfe bei Regex, die den Code sauberer machen könnte.

Keine jQuery ...

Oscar Patensohn
quelle
1
Exaktes Duplikat von JavaScript RegExp $ 1 in Großbuchstaben
mplungjan
7
es ist tatsächlich so, aber ich habe es gesucht und nie gefunden, wahrscheinlich aufgrund des obskuren Namens. Ich würde vorschlagen, dies offen zu halten, damit die Leute tatsächlich die Antwort finden können. "RegExp $ 1 in Großbuchstaben" ... niemand wird es finden, es sei denn, sie kannten bereits Regex IMO
Oscar Godson
Das war leicht zu beheben. Ich habe gerade den Titel bearbeitet
mplungjan
Ein Ausschneiden und Einfügen der Lösungen hätte mir also eine akzeptierte Antwort eingebracht: |
Mplungjan
Gibt es eine Möglichkeit, genau das Gegenteil zu tun?
Pavan

Antworten:

258

Versuche dies:

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

Der reguläre Ausdruck stimmt mit dem -iin überein marker-imageund erfasst nur den i. Dies wird dann in der Rückruffunktion in Großbuchstaben geschrieben und ersetzt.

Paolo Moretti
quelle
53
Zu Ihrer Information, hier ist das Gegenteil:myString.replace(/([a-z][A-Z])/g, function (g) { return g[0] + '-' + g[1].toLowerCase() });
Cyril N.
Ich denke, dass der Parameter in "m" umbenannt werden sollte, wie "match". Man kann schnell so etwas schreiben wie: myString.replace(/-([a-z])/i, function (i) { return i[1].toUpperCase() });
programaths
8
Es wäre eine gute Idee, Ihre Regex durch Hinzufügen der iFlagge robuster zu machen . Ohne sie fehlen in Ihrem Muster "großgeschriebene Teile" (wird nicht in "großgeschriebene Teile" geändert). Ich persönlich bevorzuge auch die verbesserte Lesbarkeit mehrerer Parameter, aber das ist natürlich eine Frage des Stils. Alles in allem würde ich mitgehen .replace( /-([a-z])/gi, function ( $0, $1 ) { return $1.toUpperCase(); } );.
Hashchange
Um dies hinzuzufügen, würde Folgendes funktionieren , wenn Sie auch durch Leerzeichen getrennte Wörter verwenden möchten:var camelCased = myString.replace(/(-+|\s+)\w/g, function (g) { return g[1].toUpperCase(); });
wolfram77
@ wolfram77, Sie fügen mehrere Striche / Leerzeichen in den regulären Ausdruck ein und schreiben dann das zweite Zeichen der Übereinstimmung in Großbuchstaben. Wenn das zweite Zeichen ein Leerzeichen oder ein Bindestrich ist, wird es in Großbuchstaben geschrieben. Wie wäre es damit : var camelCased = myString.replace(/(-+|\s+)\w/g, function (g) { return g[g.length - 1].toUpperCase(); });?
Trysis
44

Dies ist eines der großartigen Dienstprogramme, die Lodash bietet, wenn Sie aufgeklärt sind und es in Ihr Projekt aufnehmen.

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

Sie können den Hypen und das nächste Zeichen abrufen und durch die Großbuchstabenversion des Zeichens ersetzen:

var str="marker-image-test";
str.replace(/-([a-z])/g, function (m, w) {
    return w.toUpperCase();
});
mck89
quelle
3
Schön - ich habe diese Methode gewählt, aber ES6 hat sie in >> str.replace (/ - ([az]) / g, (x, up) => up.toUpperCase ())
ConorLuddy
13

Hier ist meine Version der camelCase-Funktion:

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

Es behandelt alle folgenden Randfälle:

  • kümmert sich standardmäßig sowohl um Unterstriche als auch um Bindestriche (konfigurierbar mit zweitem Parameter)
  • Zeichenfolge mit Unicode-Zeichen
  • Zeichenfolge, die mit Bindestrichen oder Unterstrichen endet
  • Zeichenfolge mit aufeinanderfolgenden Bindestrichen oder Unterstrichen

Hier ist ein Link zu Live-Tests: http://jsfiddle.net/avKzf/2/

Hier sind Ergebnisse von Tests:

  • Eingabe: "ab-cd-ef", Ergebnis: "abCdEf"
  • Eingabe: "ab-cd-ef-", Ergebnis: "abCdEf"
  • Eingabe: "ab-cd-ef--", Ergebnis: "abCdEf"
  • Eingabe: "ab-cd - ef--", Ergebnis: "abCdEf"
  • Eingabe: "--ab-cd - ef--", Ergebnis: "AbCdEf"
  • Eingabe: "--ab-cd -__- ef--", Ergebnis: "AbCdEf"

Beachten Sie, dass Zeichenfolgen, die mit Trennzeichen beginnen, am Anfang einen Großbuchstaben ergeben. Wenn Sie dies nicht erwarten, können Sie immer lcfirst verwenden. Hier ist meine erste, wenn Sie es brauchen:

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

Das schreit nicht nach einem RegExpfür mich. Persönlich versuche ich, reguläre Ausdrücke zu vermeiden, wenn einfache String- und Array-Methoden ausreichen:

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

quelle
1

Hier ist eine weitere Option, die hier einige Antworten kombiniert und eine Methode für eine Zeichenfolge erstellt:

if (typeof String.prototype.toCamel !== 'function') {
  String.prototype.toCamel = function(){
    return this.replace(/[-_]([a-z])/g, function (g) { return g[1].toUpperCase(); })
  };
}

So verwendet:

'quick_brown'.toCamel(); // quickBrown
'quick-brown'.toCamel(); // quickBrown
John Naegle
quelle
1
// Turn the dash separated variable name into camelCase.
str = str.replace(/\b-([a-z])/g, (_, char) => char.toUpperCase());
Alex
quelle
1

Sie können Camelcase von NPM verwenden.

npm install --save camelcase

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

Noch eine Einstellung.

Wird verwendet, wenn ...

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
SoEzPz
quelle
0

Es ist auch möglich, indexOf mit Rekursion für diese Aufgabe zu verwenden.

input some-foo_sd_dsd-weqe
output someFooSdDsdWeqe

Vergleich ::: Ausführungszeit für zwei verschiedene Skripte messen:

$ node camelCased.js
someFooSdDsdWeqe
test1: 2.986ms
someFooSdDsdWeqe
test2: 0.231ms

Code:

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');
Anja Ishmukhametova
quelle
0

Nur eine Version mit Flag, für Loop und ohne 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;
}
Jäger
quelle
0

Hier ist meine Implementierung (nur um die Hände schmutzig zu machen)

/**
 * 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('');
}
D. Dimitrioglo
quelle
0

Verwenden Sie diese Option, wenn Sie Zahlen in Ihrer Zeichenfolge zulassen .

Natürlich werden die Teile, die mit einer Zahl beginnen, nicht großgeschrieben, aber dies kann in einigen Situationen nützlich sein.

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

Entwickler
quelle