Converti trattini in custodia per cammelli (camelCase)


146

Con regex (presumo) o qualche altro metodo, come posso convertire cose come:

marker-imageo my-example-settinga markerImageo myExampleSetting.

Stavo pensando di dividere per -poi convertire l'indice di quell'ipen +1 in maiuscolo. Ma sembra piuttosto sporco e sperava in un aiuto con regex che potesse rendere il codice più pulito.

No jQuery ...



7
in realtà lo è, ma ho cercato e non l'ho mai trovato probabilmente a causa del nome oscuro. Ti suggerisco di tenerlo aperto in modo che le persone possano effettivamente trovare la risposta. "RegExp $ 1 in maiuscolo" ... nessuno lo troverà a meno che non conoscessero già regex IMO
Oscar Godson,

Era facilmente risolvibile. Ho appena modificato il titolo
mplungjan il

Quindi un taglio e incolla delle soluzioni mi avrebbe guadagnato una risposta accettata: |
mplungjan,

c'è un modo per fare l'esatto contrario?
Pavan,

Risposte:


258

Prova questo:

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

L'espressione regolare corrisponderà a -iin marker-imagee acquisirà solo il i. Questo viene quindi messo in maiuscolo nella funzione di callback e sostituito.


53
Cordiali saluti, ecco il contrario:myString.replace(/([a-z][A-Z])/g, function (g) { return g[0] + '-' + g[1].toLowerCase() });
Cyril N.

Penso che il parametro debba essere rinominato in "m", come "match". Si può scrivere velocemente qualcosa del tipo: myString.replace(/-([a-z])/i, function (i) { return i[1].toUpperCase() });
programmi

8
Sarebbe una buona idea rendere il tuo regex più robusto aggiungendo la ibandiera. Senza di essa, il tuo modello manca di "Parti in maiuscolo" (non verrà modificato in "Parti in maiuscolo"). Inoltre, preferisco personalmente la migliore leggibilità di più parametri, ma ovviamente è una questione di stile. Tutto sommato, vorrei andare con .replace( /-([a-z])/gi, function ( $0, $1 ) { return $1.toUpperCase(); } );.
Scambio hash

Per aggiungere questo, se si desidera cammellare anche le parole separate da maiuscole / minuscole , il seguente funzionerebbe:var camelCased = myString.replace(/(-+|\s+)\w/g, function (g) { return g[1].toUpperCase(); });
wolfram77,

@ wolfram77, includi più trattini / caratteri spaziali nella regexp, quindi fai in maiuscolo il secondo carattere della corrispondenza, ovvero se il secondo carattere è uno spazio o un trattino, è quello che viene maiuscolo. Che ne dici di questo var camelCased = myString.replace(/(-+|\s+)\w/g, function (g) { return g[g.length - 1].toUpperCase(); });:?
trysis

44

Questa è una delle grandi utilità che Lodash offre se sei illuminato e lo hai incluso nel tuo progetto.

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

14

Puoi ottenere l'ipen e il personaggio successivo e sostituirlo con la versione maiuscola del personaggio:

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

3
Bello - Sono andato con questo metodo ma ES6 l'ho portato in >> str.replace (/ - ([az]) / g, (x, up) => up.toUpperCase ())
ConorLuddy

13

Ecco la mia versione della funzione 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);
    };
})();

Gestisce tutti i seguenti casi limite:

  • si occupa sia di trattini bassi che di trattini di default (configurabile con il secondo parametro)
  • stringa con caratteri unicode
  • stringa che termina con trattini o trattino basso
  • stringa con trattini o trattini bassi consecutivi

Ecco un link per i test live: http://jsfiddle.net/avKzf/2/

Ecco i risultati dei test:

  • input: "ab-cd-ef", risultato: "abCdEf"
  • input: "ab-cd-ef-", risultato: "abCdEf"
  • input: "ab-cd-ef--", risultato: "abCdEf"
  • input: "ab-cd - ef--", risultato: "abCdEf"
  • input: "--ab-cd - ef--", risultato: "AbCdEf"
  • input: "--ab-cd -__- ef--", risultato: "AbCdEf"

Si noti che le stringhe che iniziano con i delimitatori genereranno una lettera maiuscola all'inizio. Se non è quello che ti aspetteresti, puoi sempre usare prima. Ecco la mia prima se ne hai bisogno:

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

4

Questo non mi fa impazzire RegExp. Personalmente cerco di evitare le espressioni regolari quando sono sufficienti semplici metodi di stringa e matrice:

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

Ecco un'altra opzione che combina qui un paio di risposte e lo rende metodo su una stringa:

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

Usato così:

'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

Puoi usare la camelcase da NPM.

npm install --save camelcase

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

0

Un'altra interpretazione.

Usato quando ...

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

è anche possibile utilizzare indexOf con ricorsione per tale attività.

input some-foo_sd_dsd-weqe
output someFooSdDsdWeqe

confronto ::: misurare il tempo di esecuzione per due diversi script:

$ node camelCased.js
someFooSdDsdWeqe
test1: 2.986ms
someFooSdDsdWeqe
test2: 0.231ms

codice:

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

Solo una versione con flag, per loop e senza 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

Ecco la mia implementazione (solo per sporcarci le mani)

/**
 * 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

Usalo se permetti numeri nella tua stringa.

Ovviamente le parti che iniziano con un numero non saranno maiuscole, ma ciò potrebbe essere utile in alcune situazioni.

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.