Convertir les traits d'union en cas de chameau (camelCase)

Avec regex (je suppose) ou une autre méthode, comment puis-je convertir des choses comme:

marker-imageou my-example-settingà markerImageou myExampleSetting.

Je pensais simplement diviser en -convertissant l'indice de cet hypen +1 en majuscules. Mais cela semble assez sale et espérait de l'aide avec les regex qui pourraient rendre le code plus propre.

Pas de jQuery ...

Essaye ça:

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

L'expression régulière correspondra au -iin marker-imageet ne capturera que le i. Ceci est ensuite mis en majuscule dans la fonction de rappel et remplacé.

C'est l'un des grands utilitaires que Lodash propose si vous êtes éclairé et que vous l'avez inclus dans votre projet.

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

Vous pouvez obtenir l'hypen et le caractère suivant et le remplacer par la version en majuscules du caractère:

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

Voici ma version de la fonction camelCase:

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

Il gère tous les cas de bord suivants:

• prend en charge les traits de soulignement et les traits d'union par défaut (configurable avec le deuxième paramètre)
• chaîne avec des caractères Unicode
• chaîne qui se termine par des tirets ou des traits de soulignement
• chaîne comportant des tirets ou des traits de soulignement consécutifs

Voici un lien vers les tests en direct: http://jsfiddle.net/avKzf/2/

Voici les résultats des tests:

• entrée: "ab-cd-ef", résultat: "abCdEf"
• entrée: "ab-cd-ef-", résultat: "abCdEf"
• entrée: "ab-cd-ef--", résultat: "abCdEf"
• entrée: "ab-cd - ef--", résultat: "abCdEf"
• entrée: "--ab-cd - ef--", résultat: "AbCdEf"
• entrée: "--ab-cd -__- ef--", résultat: "AbCdEf"

Notez que les chaînes commençant par des délimiteurs se traduiront par une lettre majuscule au début. Si ce n'est pas ce à quoi vous vous attendez, vous pouvez toujours utiliser lcfirst. Voici mon premier si vous en avez besoin:

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

Cela ne me crie RegExppas. Personnellement, j'essaie d'éviter les expressions régulières lorsque de simples méthodes de chaîne et de tableau suffiront:

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

Voici une autre option qui combine quelques réponses ici et en fait une méthode sur une chaîne:

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

Utilisé comme ceci:

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

Vous pouvez utiliser camelcase de NPM.

npm install --save camelcase

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

Une autre prise.

Utilisé quand ...

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

est également possible d'utiliser indexOf avec récursivité pour cette tâche.

input some-foo_sd_dsd-weqe
output someFooSdDsdWeqe

comparaison ::: mesure le temps d'exécution de deux scripts différents:

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

Juste une version avec drapeau, boucle for et sans 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;
}

Voici ma mise en œuvre (juste pour se salir les mains)

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

Utilisez ceci si vous autorisez les nombres dans votre chaîne.

Évidemment, les parties commençant par un nombre ne seront pas capitalisées, mais cela peut être utile dans certaines situations.

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