Bindestriche in Kamelkasten umwandeln (camelCase)

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 ...

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.

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'

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

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

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

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

// Turn the dash separated variable name into camelCase.
str = str.replace(/\b-([a-z])/g, (_, char) => char.toUpperCase());

Sie können Camelcase von NPM verwenden.

npm install --save camelcase

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

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

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

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

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

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