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


146

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



7
c'est en fait, mais j'ai cherché et je ne l'ai jamais trouvé probablement à cause du nom obscur. Je suggère de garder cela ouvert afin que les gens puissent trouver la réponse. "RegExp $ 1 to uppercase" ... personne ne le trouvera à moins qu'il ne connaisse déjà l'expression régulière OMI
Oscar Godson

C'était facilement réparable. Je viens de
modifier

Un copier-coller des solutions m'aurait donc valu une réponse acceptée: |
mplungjan le

y a-t-il un moyen de faire exactement le contraire?
Pavan

Réponses:


258

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


53
Pour info, voici le contraire:myString.replace(/([a-z][A-Z])/g, function (g) { return g[0] + '-' + g[1].toLowerCase() });
Cyril N.

Je pense que le paramètre devrait être renommé en "m", comme "match". On peut rapidement écrire quelque chose comme: myString.replace(/-([a-z])/i, function (i) { return i[1].toUpperCase() });
programaths

8
Ce serait une bonne idée de rendre votre regex plus robuste en ajoutant le idrapeau. Sans cela, votre modèle manque "Capitalized-Parts" (ne sera pas changé en "capitalizedParts"). De plus, je préfère personnellement la lisibilité améliorée de plusieurs paramètres, mais c'est évidemment une question de style. Dans l'ensemble, j'irais avec .replace( /-([a-z])/gi, function ( $0, $1 ) { return $1.toUpperCase(); } );.
hashchange

Pour ajouter à cela, si vous voulez également des mots séparés par des espaces de chameau , ce qui suit fonctionnerait:var camelCased = myString.replace(/(-+|\s+)\w/g, function (g) { return g[1].toUpperCase(); });
wolfram77

@ wolfram77, Vous incluez plusieurs tirets / espaces dans l'expression rationnelle, puis mettez en majuscule le deuxième caractère de la correspondance, ce qui signifie que si le deuxième caractère est un espace ou un tiret, c'est celui qui est mis en majuscule. Que diriez-vous de ceci var camelCased = myString.replace(/(-+|\s+)\w/g, function (g) { return g[g.length - 1].toUpperCase(); });:?
trysis le

44

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'

14

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

3
Nice - Je suis allé avec cette méthode mais ES6 l'a insérée dans >> str.replace (/ - ([az]) / g, (x, up) => up.toUpperCase ())
ConorLuddy

13

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

4

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

1

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

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

1

Vous pouvez utiliser camelcase de NPM.

npm install --save camelcase

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

0

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

0

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

0

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

0

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

0

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.