Converter hífens em caixa de camelo (camelCase)


146

Com regex (presumo) ou algum outro método, como posso converter coisas como:

marker-imageou my-example-settingpara markerImageou myExampleSetting.

Eu estava pensando em apenas dividir -e converter o índice desse hypen +1 em maiúsculas. Mas parece bastante sujo e esperava alguma ajuda com o regex que pudesse tornar o código mais limpo.

Sem jQuery ...



7
é realmente, mas eu procurei e nunca o encontrei provavelmente devido ao nome obscuro. Eu sugiro manter isso aberto para que as pessoas possam encontrar a resposta. "RegExp $ 1 para maiúsculas" ... ninguém vai encontrá-lo, a menos que eles já sabiam regex IMO
Oscar Godson

Isso foi facilmente corrigível. I acabou de editar o título
mplungjan

Portanto, um recortar e colar das soluções me rendeu uma resposta aceita: |
Mjungkon #

existe uma maneira de fazer exatamente o oposto?
Pavan

Respostas:


258

Tente o seguinte:

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

A expressão regular corresponderá ao -iin marker-imagee capturará apenas o i. Isso é maiúsculo na função de retorno de chamada e substituído.


53
FYI, aqui é o contrário:myString.replace(/([a-z][A-Z])/g, function (g) { return g[0] + '-' + g[1].toLowerCase() });
Cyril N.

Eu acho que o parâmetro deve ser renomeado para "m", como "match". Pode-se rapidamente escrever algo como: myString.replace(/-([a-z])/i, function (i) { return i[1].toUpperCase() });
programaths

8
Seria uma boa idéia tornar seu regex mais robusto adicionando a iflag. Sem ele, seu padrão perde "Peças em maiúsculas" (não será alterado para "Peças em maiúsculas"). Além disso, eu pessoalmente prefiro a legibilidade aprimorada de vários parâmetros, mas isso é obviamente uma questão de estilo. Ao todo, eu iria com .replace( /-([a-z])/gi, function ( $0, $1 ) { return $1.toUpperCase(); } );.
hashchange

Para adicionar sobre isso, se você quiser camelo caso espaço separado palavras, bem como, a seguir funcionaria:var camelCased = myString.replace(/(-+|\s+)\w/g, function (g) { return g[1].toUpperCase(); });
wolfram77

@ wolfram77, Você inclui vários traços / caracteres de espaço na regexp e, em maiúscula, o segundo caractere da correspondência, o que significa que, se o segundo caractere for um espaço ou um traço, ele será maiúsculo. Que tal isso var camelCased = myString.replace(/(-+|\s+)\w/g, function (g) { return g[g.length - 1].toUpperCase(); });:?
trysis

44

Este é um dos grandes utilitários que a Lodash oferece se você for esclarecido e incluí-lo em seu projeto.

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

14

Você pode obter o hypen e o próximo caractere e substituí-lo pela versão em maiúscula do caractere:

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

3
Nice - Eu fui com este método, mas ES6'd-lo em >> str.replace (/ - ([az]) / g, (x, para cima) => up.toUpperCase ())
ConorLuddy

13

Aqui está a minha versão da função 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);
    };
})();

Ele lida com todos os seguintes casos de borda:

  • cuida de sublinhados e hífens por padrão (configurável com o segundo parâmetro)
  • string com caracteres unicode
  • string que termina com hífens ou sublinhado
  • sequência que possui hífens ou sublinhados consecutivos

Aqui está um link para testes ao vivo: http://jsfiddle.net/avKzf/2/

Aqui estão os resultados dos testes:

  • entrada: "ab-cd-ef", resultado: "abCdEf"
  • entrada: "ab-cd-ef-", resultado: "abCdEf"
  • entrada: "ab-cd-ef--", resultado: "abCdEf"
  • entrada: "ab-cd - ef--", resultado: "abCdEf"
  • entrada: "--ab-cd - ef--", resultado: "AbCdEf"
  • entrada: "--ab-cd -__- ef--", resultado: "AbCdEf"

Observe que as seqüências que começam com delimitadores resultarão em uma letra maiúscula no início. Se não é o que você esperaria, você sempre pode usar lcfirst. Aqui está o meu lcfirst se você precisar:

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

4

Isso não grita por um RegExppara mim. Pessoalmente, tento evitar expressões regulares quando métodos simples de string e matriz forem suficientes:

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

Aqui está outra opção que combina algumas respostas aqui e o torna um método em uma string:

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

Usado assim:

'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

Você pode usar camelcase no NPM.

npm install --save camelcase

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

0

Outra tomada.

Usado 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

também é possível usar indexOf com recursão para essa tarefa.

input some-foo_sd_dsd-weqe
output someFooSdDsdWeqe

Comparação ::: mede o tempo de execução de dois scripts diferentes:

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

código:

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

Apenas uma versão com flag, for loop e sem 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

Aqui está a minha implementação (apenas para sujar as mãos)

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

Use isso se você permitir números em sua string.

Obviamente, as partes que começam com um número não serão capitalizadas, mas isso pode ser útil em algumas situações.

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.