Ubah tanda hubung menjadi unta (camelCase)

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 ...

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.

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'

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

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

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

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

// Turn the dash separated variable name into camelCase.
str = str.replace(/\b-([a-z])/g, (_, char) => char.toUpperCase());

Anda dapat menggunakan camelcase dari NPM.

npm install --save camelcase

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

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

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');

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

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

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