Chuyển đổi dấu gạch nối sang trường hợp lạc đà (camelCase)

Với regex (tôi giả sử) hoặc một số phương thức khác, làm thế nào tôi có thể chuyển đổi những thứ như:

marker-imagehoặc my-example-settingđến markerImagehoặc myExampleSetting.

Tôi đã suy nghĩ về việc chỉ cần tách bằng cách -sau đó chuyển đổi chỉ mục của hypen +1 đó thành chữ hoa. Nhưng nó có vẻ khá bẩn và hy vọng một số trợ giúp với regex có thể làm cho mã sạch hơn.

Không có jQuery ...

Thử cái này:

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

Biểu thức chính quy sẽ khớp với -itrong marker-imagevà chỉ chụp i. Điều này sau đó được đặt trong hàm gọi lại và được thay thế.

Đây là một trong những tiện ích tuyệt vời mà Lodash cung cấp nếu bạn đã giác ngộ và có nó trong dự án của bạn.

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

Bạn có thể lấy hypen và ký tự tiếp theo và thay thế nó bằng phiên bản cấp trên của nhân vật:

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

Đây là phiên bản chức năng camelCase của tôi:

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

Nó xử lý tất cả các trường hợp cạnh sau:

• mặc định chăm sóc cả dấu gạch dưới và dấu gạch nối (cấu hình với tham số thứ hai)
• chuỗi với các ký tự unicode
• chuỗi kết thúc bằng dấu gạch nối hoặc dấu gạch dưới
• chuỗi có dấu gạch nối hoặc dấu gạch dưới liên tiếp

Đây là một liên kết đến các bài kiểm tra trực tiếp: http://jsfiddle.net/avKzf/2/

Dưới đây là kết quả từ các bài kiểm tra:

• đầu vào: "ab-cd-ef", kết quả: "abCdEf"
• đầu vào: "ab-cd-ef-", kết quả: "abCdEf"
• đầu vào: "ab-cd-ef--", kết quả: "abCdEf"
• đầu vào: "ab-cd - ef--", kết quả: "abCdEf"
• đầu vào: "--ab-cd - ef--", kết quả: "AbCdEf"
• đầu vào: "--ab-cd -__- ef--", kết quả: "AbCdEf"

Lưu ý rằng các chuỗi bắt đầu bằng dấu phân cách sẽ dẫn đến một chữ cái viết hoa ở đầu. Nếu đó không phải là những gì bạn mong đợi, bạn luôn có thể sử dụng lcfirst. Đây là lcfirst của tôi nếu bạn cần nó:

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

Điều này không hét lên cho RegExptôi. Cá nhân tôi cố gắng tránh các biểu thức chính quy khi các phương thức chuỗi và mảng đơn giản sẽ đủ:

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

Đây là một tùy chọn khác kết hợp một vài câu trả lời ở đây và làm cho nó thành phương thức trên một chuỗi:

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

Được sử dụng như thế này:

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

Bạn có thể sử dụng lạc đà từ NPM.

npm install --save camelcase

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

Một mất khác.

Được sử dụng khi ...

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

cũng có thể sử dụng indexOf với đệ quy cho tác vụ đó.

input some-foo_sd_dsd-weqe
output someFooSdDsdWeqe

so sánh ::: đo thời gian thực hiện cho hai tập lệnh khác nhau:

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

mã:

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

Chỉ là một phiên bản có cờ, cho vòng lặp và không có 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;
}

Đây là cách thực hiện của tôi (chỉ để làm bẩn tay)

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

Sử dụng điều này nếu bạn cho phép số trong chuỗi của bạn.

Rõ ràng các phần bắt đầu bằng một số sẽ không được viết hoa, nhưng điều này có thể hữu ích trong một số trường hợp.

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