Konwertuj łączniki na skrzynkę wielbłąda (camelCase)

146

Z wyrażeniem regularnym (zakładam) lub inną metodą, w jaki sposób mogę przekonwertować takie rzeczy, jak:

marker-imagelub my-example-settingdo markerImagelub myExampleSetting.

Myślałem o podzieleniu, -a następnie przekonwertowaniu indeksu łącznika +1 na wielkie litery. Ale wydaje się dość brudny i liczyłem na pomoc z regexem, który mógłby uczynić kod czystszym.

Brak jQuery ...

Oscar Godson
źródło
1
Dokładny duplikat kodu JavaScript RegExp $ 1 do wielkich liter
mplungjan
7
tak jest, ale szukałem i nigdy go nie znalazłem, prawdopodobnie z powodu niejasnej nazwy. Sugeruję pozostawienie tego otwartego, aby ludzie mogli rzeczywiście znaleźć odpowiedź. „RegExp $ 1 to uppercase” ... nikt nie znajdzie tego, chyba że znał już wyrażenie regularne IMO
Oscar Godson
To było łatwe do naprawienia. Właśnie zredagowałem tytuł
mplungjan
Więc wycinanie i wklejanie rozwiązań dałoby mi akceptowaną odpowiedź: |
mplungjan
czy istnieje sposób, aby zrobić dokładnie odwrotnie?
Pavan

Odpowiedzi:

258

Spróbuj tego:

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

Wyrażenie regularne dopasuje -iin marker-imagei przechwyci tylko i. To jest następnie wielkie litery w funkcji wywołania zwrotnego i zastępowane.

Paolo Moretti
źródło
53
FYI, tutaj jest odwrotnie:myString.replace(/([a-z][A-Z])/g, function (g) { return g[0] + '-' + g[1].toLowerCase() });
Cyril N.
Myślę, że należy zmienić nazwę parametru na „m”, np. „Match”. Można szybko napisać coś takiego: myString.replace(/-([a-z])/i, function (i) { return i[1].toUpperCase() });
programy
8
Byłoby dobrym pomysłem, aby Twoje wyrażenie regularne było bardziej niezawodne przez dodanie iflagi. Bez tego wzorzec pomija „części z wielkimi literami” (nie zostanie zmieniony na „części z wielkimi literami”). Osobiście wolę też lepszą czytelność wielu parametrów, ale to oczywiście kwestia stylu. W sumie poszedłbym z .replace( /-([a-z])/gi, function ( $0, $1 ) { return $1.toUpperCase(); } );.
hashchange
Aby dodać do tego, jeśli chcesz również wielbłądzić słowa oddzielone spacjami , zadziałałyby następujące:var camelCased = myString.replace(/(-+|\s+)\w/g, function (g) { return g[1].toUpperCase(); });
wolfram77
@ wolfram77, W wyrażeniu regularnym umieszczasz wiele kresek / spacji, a następnie wpisujesz wielką literę drugiego znaku dopasowania, co oznacza, że ​​jeśli drugi znak to spacja lub myślnik, to jest to ten, który jest pisany wielkimi literami. A co powiesz na to var camelCased = myString.replace(/(-+|\s+)\w/g, function (g) { return g[g.length - 1].toUpperCase(); });:?
trysis
44

Jest to jedno z najlepszych narzędzi oferowanych przez firmę Lodash, jeśli jesteś oświecony i uwzględniono je w swoim projekcie.

var str = 'my-hyphen-string';
str = _.camelCase(str);
// results in 'myHyphenString'
ShadeTreeDeveloper
źródło
14

Możesz pobrać myślnik i następny znak i zastąpić go wersją znaku pisaną wielkimi literami:

var str="marker-image-test";
str.replace(/-([a-z])/g, function (m, w) {
    return w.toUpperCase();
});
mck89
źródło
3
Fajnie - poszedłem z tą metodą, ale ES6 wstawił ją do >> str.replace (/ - ([az]) / g, (x, up) => up.toUpperCase ())
ConorLuddy
13

Oto moja wersja funkcji 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);
    };
})();

Obsługuje wszystkie następujące przypadki skrajne:

  • domyślnie obsługuje zarówno podkreślenia, jak i łączniki (konfigurowalne drugim parametrem)
  • ciąg znaków ze znakami Unicode
  • ciąg kończący się myślnikami lub podkreśleniem
  • ciąg zawierający kolejne łączniki lub podkreślenia

Oto link do testów na żywo: http://jsfiddle.net/avKzf/2/

Oto wyniki testów:

  • wejście: „ab-cd-ef”, wynik: „abCdEf”
  • wejście: „ab-cd-ef-”, wynik: „abCdEf”
  • wejście: „ab-cd-ef--”, wynik: „abCdEf”
  • wejście: „ab-cd - ef--”, wynik: „abCdEf”
  • wejście: „--ab-cd - ef--”, wynik: „AbCdEf”
  • wejście: „--ab-cd -__- ef--”, wynik: „AbCdEf”

Zwróć uwagę, że ciągi zaczynające się od ograniczników będą skutkować dużą literą na początku. Jeśli nie tego byś się spodziewał, zawsze możesz skorzystać z lcfirst. Oto moje pierwsze lc, jeśli go potrzebujesz:

function lcfirst(str) {
    return str && str.charAt(0).toLowerCase() + str.substring(1);
}
Joon
źródło
4

To nie krzyczy RegExpdo mnie. Osobiście staram się unikać wyrażeń regularnych, gdy wystarczą proste metody łańcuchowe i tablicowe:

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

źródło
1

Oto kolejna opcja, która łączy tutaj kilka odpowiedzi i sprawia, że ​​jest to metoda na łańcuchu:

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

Używane w ten sposób:

'quick_brown'.toCamel(); // quickBrown
'quick-brown'.toCamel(); // quickBrown
John Naegle
źródło
1
// Turn the dash separated variable name into camelCase.
str = str.replace(/\b-([a-z])/g, (_, char) => char.toUpperCase());
Alex
źródło
1

Możesz użyć camelcase z NPM.

npm install --save camelcase

const camelCase = require('camelcase');
camelCase('marker-image'); // => 'markerImage';
camelCase('my-example-setting'); // => 'myExampleSetting';
Lanil Marasinghe
źródło
0

Kolejne ujęcie.

Używane, gdy ...

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
SoEzPz
źródło
0

jest również możliwe użycie indexOf z rekurencją dla tego zadania.

input some-foo_sd_dsd-weqe
output someFooSdDsdWeqe

porównanie ::: mierzenie czasu wykonania dla dwóch różnych skryptów:

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

kod:

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');
Anja Ishmukhametova
źródło
0

Tylko wersja z flagą, dla pętli i bez 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;
}
myśliwy
źródło
0

Oto moja realizacja (żeby zabrudzić ręce)

/**
 * 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('');
}
D.Dimitrioglo
źródło
0

Użyj tego, jeśli zezwalasz na liczby w swoim ciągu.

Oczywiście części zaczynające się od liczby nie będą pisane wielkimi literami, ale może to być przydatne w niektórych sytuacjach.

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

cbdeveloper
źródło