Ubah tanda hubung menjadi unta (camelCase)

146

Dengan regex (saya berasumsi) atau metode lain, bagaimana saya bisa mengonversi hal-hal seperti:

marker-imageatau my-example-settingke markerImageatau myExampleSetting.

Saya sedang berpikir tentang hanya membelah pada -saat itu mengkonversi indeks dari hypen +1 ke huruf besar. Tapi sepertinya cukup kotor dan berharap bantuan dengan regex yang bisa membuat kode lebih bersih.

Tidak ada jQuery ...

Oscar Godson
sumber
1
Duplikat yang tepat dari JavaScript RegExp $ 1 ke huruf besar
mplungjan
7
sebenarnya, tetapi saya mencari dan tidak pernah menemukannya mungkin karena nama yang tidak jelas. Saya menyarankan agar ini tetap terbuka sehingga orang benar-benar dapat menemukan jawabannya. "RegExp $ 1 ke huruf besar" ... tidak ada yang akan menemukannya kecuali mereka sudah tahu regex IMO
Oscar Godson
Itu mudah diperbaiki. Saya baru saja mengedit judul
mplungjan
Jadi solusi yang pasti akan memberi saya jawaban yang diterima: |
mplungjan
apakah ada cara untuk melakukan hal yang sebaliknya?
Pavan

Jawaban:

258

Coba ini:

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

Ekspresi reguler akan cocok dengan -iin marker-imagedan hanya menangkap i. Ini kemudian ditingkatkan dalam fungsi panggilan balik dan diganti.

Paolo Moretti
sumber
53
FYI, ini kebalikannya:myString.replace(/([a-z][A-Z])/g, function (g) { return g[0] + '-' + g[1].toLowerCase() });
Cyril N.
Saya pikir parameternya harus diubah namanya menjadi "m", seperti "cocok". Orang dapat dengan cepat menulis sesuatu seperti: myString.replace(/-([a-z])/i, function (i) { return i[1].toUpperCase() });
programath
8
Ini akan menjadi ide yang baik untuk membuat regex Anda lebih kuat dengan menambahkan ibendera. Tanpanya, pola Anda meleset dari "Kapitalisasi-Bagian" (tidak akan diubah menjadi "Kapitalisasi bagian"). Juga, saya pribadi lebih suka peningkatan keterbacaan beberapa parameter, tapi itu jelas masalah gaya. Secara keseluruhan, saya akan pergi dengan .replace( /-([a-z])/gi, function ( $0, $1 ) { return $1.toUpperCase(); } );.
hashchange
Untuk menambahkan ini, jika Anda ingin unta kata - kata ruang terpisah juga, berikut ini akan bekerja:var camelCased = myString.replace(/(-+|\s+)\w/g, function (g) { return g[1].toUpperCase(); });
wolfram77
@ wolfram77, Anda memasukkan beberapa tanda hubung / karakter spasi dalam regexp, lalu huruf besar karakter kedua dari pertandingan, yang berarti jika karakter kedua adalah spasi atau tanda hubung, itu adalah karakter yang mendapatkan huruf besar. Bagaimana dengan ini var camelCased = myString.replace(/(-+|\s+)\w/g, function (g) { return g[g.length - 1].toUpperCase(); });:?
trysis
44

Ini adalah salah satu utilitas hebat yang ditawarkan Lodash jika Anda tercerahkan dan memasukkannya ke dalam proyek Anda.

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

Anda bisa mendapatkan hypen dan karakter berikutnya dan menggantinya dengan versi karakter yang lebih besar:

var str="marker-image-test";
str.replace(/-([a-z])/g, function (m, w) {
    return w.toUpperCase();
});
mck89
sumber
3
Bagus - Saya menggunakan metode ini tetapi ES6 melakukannya ke >> str.replace (/ - ([az]) / g, (x, atas) => up.toUpperCase ())
ConorLuddy
13

Inilah versi fungsi camelCase saya:

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

Ini menangani semua kasus tepi berikut:

  • mengurus garis bawah dan tanda hubung secara default (dapat dikonfigurasi dengan parameter kedua)
  • string dengan karakter unicode
  • string yang diakhiri dengan tanda hubung atau garis bawah
  • string yang memiliki tanda hubung atau garis bawah berurutan

Berikut tautan ke tes langsung: http://jsfiddle.net/avKzf/2/

Berikut adalah hasil dari tes:

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

Perhatikan bahwa string yang dimulai dengan pembatas akan menghasilkan huruf besar di awal. Jika bukan itu yang Anda harapkan, Anda selalu dapat menggunakan lcfirst. Ini pertama saya jika Anda membutuhkannya:

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

Ini tidak menjerit bagi RegExpsaya. Secara pribadi saya mencoba untuk menghindari ekspresi reguler ketika metode string dan array yang sederhana sudah cukup:

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

sumber
1

Berikut adalah opsi lain yang menggabungkan jawaban pasangan di sini dan menjadikannya metode pada string:

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

Digunakan seperti ini:

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

Anda dapat menggunakan camelcase dari NPM.

npm install --save camelcase

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

Pengambilan lagi.

Digunakan saat ...

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
sumber
0

mungkin juga menggunakan indexOf dengan rekursi untuk tugas itu.

input some-foo_sd_dsd-weqe
output someFooSdDsdWeqe

perbandingan ::: mengukur waktu eksekusi untuk dua skrip yang berbeda:

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

kode:

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
sumber
0

Hanya versi dengan flag, untuk loop dan tanpa 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;
}
Pemburu
sumber
0

Ini implementasi saya (hanya untuk membuat tangan kotor)

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

Gunakan ini jika Anda mengizinkan angka dalam string Anda.

Jelas bagian-bagian yang dimulai dengan angka tidak akan dikapitalisasi, tetapi ini mungkin berguna dalam beberapa situasi.

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
sumber