web-dev-qa-db-fra.com

Conversion de traits d'union en étui de chameau (camelCase)

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

marker-image ou my-example-setting à markerImage ou myExampleSetting.

Je pensais simplement diviser par - puis convertir l’index de cet hypen +1 en majuscule. Mais cela semble assez sale et espérait une aide avec regex qui pourrait rendre le code plus propre.

Non jQuery ...

javascriptregexcamelcasing
116
Oscar Godson

Essaye ça:

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

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

209
user193476

Ceci est l’un des meilleurs utilitaires que Lodash offre si vous êtes éclairé et qu’il soit inclus dans votre projet.

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

Vous pouvez obtenir le trait d'union et le caractère suivant et le remplacer par la version majuscule du caractère:

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

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 Edge suivants:

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

Voici un lien pour des 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 génèrent une lettre majuscule au début . Si ce n'est pas ce à quoi vous vous attendiez, vous pouvez toujours utiliser lcfirst . Voici mon lcfirst si vous en avez besoin:

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

Cela ne crie pas pour une RegExp pour moi. Personnellement, j'essaie d'éviter les expressions régulières lorsque des méthodes simples avec chaînes et tableaux suffisent:

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

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
John Naegle

Voici ma mise en œuvre (juste pour 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
D.Dimitrioglo

Juste une version avec flag, for loop 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
LieberHunter

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
SoEzPz

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

input some-foo_sd_dsd-weqe
output someFooSdDsdWeqe

compare ::: mesure le temps d'exécution pour 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
miukki

Vous pouvez utiliser camelcase de NPM.

npm install --save camelcase

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