wake-up-neo.net

Konvertieren Sie Bindestriche in Camel Case (camelCase)

Mit Regex (nehme ich an) oder einer anderen Methode, wie kann ich Dinge konvertieren wie:

marker-image oder my-example-setting in markerImage oder myExampleSetting.

Ich habe darüber nachgedacht, nur nach - zu teilen und dann den Index dieses Hypens +1 in Großbuchstaben zu konvertieren. Aber es scheint ziemlich schmutzig zu sein und hoffte auf eine Hilfe mit Regex, die den Code sauberer machen könnte.

Nein jQuery ...

116
Oscar Godson

Versuche dies:

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

Der reguläre Ausdruck stimmt mit dem -i in marker-image überein und erfasst nur die i. Diese wird dann in der Callback-Funktion groß geschrieben und ersetzt.

209
user193476

Dies ist eines der großen Hilfsprogramme, 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'
33

Sie können den Bindestrich und das nächste Zeichen erhalten und durch die obere Version des Zeichens ersetzen:

var str="marker-image-test";
str.replace(/-([a-z])/g, function (m, w) {
    return w.toUpperCase();
});
14
mck89

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 Edge-Fälle:

  • übernimmt standardmäßig sowohl Unterstriche als auch Bindestriche (konfigurierbar mit zweitem Parameter)
  • zeichenfolge mit Unicode-Zeichen
  • zeichenfolge, die mit Bindestrichen oder Unterstrich endet
  • zeichenfolge mit aufeinander folgenden Bindestrichen oder Unterstrichen

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

Hier sind Ergebnisse aus 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 zu einem Großbuchstaben führen. Wenn dies nicht der Fall ist, können Sie lcfirst ..__ verwenden.

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

Dies schreit nicht nach einer RegExp fü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
2
user2467065
// Turn the dash separated variable name into camelCase.
str = str.replace(/\b-([a-z])/g, (_, char) => char.toUpperCase());
1
alex

Hier ist eine weitere Option, die ein paar Antworten hier kombiniert und es zu einer Methode macht:

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

So benutzt:

'quick_brown'.toCamel(); // quickBrown
'quick-brown'.toCamel(); // quickBrown
1
John Naegle

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

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;
}
0
LieberHunter

Noch ein Take.

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

verwenden Sie auch indexOf mit Rekursion für diese Task. 

input some-foo_sd_dsd-weqe
output someFooSdDsdWeqe

vergleich ::: Messen Sie die Ausführungszeit für zwei verschiedene Skripts:

$ 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');
0
miukki

Sie können camelcase von NPM verwenden.

npm install --save camelcase

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