Перевести дефисы в регистр верблюдов (camelCase)


146

С помощью регулярных выражений (я предполагаю) или каким-либо другим методом, как я могу конвертировать такие вещи, как:

marker-imageили my-example-settingк markerImageили myExampleSetting.

Я думал о том, чтобы просто разделить, а -затем преобразовать индекс этого гипена +1 в верхний регистр. Но это выглядит довольно грязно и надеется на некоторую помощь с регулярным выражением, которая может сделать код чище.

Нет jQuery ...


1
Точная
копия

7
это на самом деле, но я искал и не нашел его, вероятно, из-за неясного имени. Я бы предложил оставить это открытым, чтобы люди могли найти ответ. «RegExp $ 1 в верхний регистр» ... никто не найдет его, если он уже не знает регулярное выражение IMO
Оскар Годсон

Это было легко исправить. Я только что отредактировал заголовок
mplungjan

Таким образом, множество решений заработало бы мне принятый ответ: |
mplungjan

Есть ли способ сделать прямо противоположное?
Паван

Ответы:


258

Попробуй это:

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

Регулярное выражение будет соответствовать -iin marker-imageи захватывать только i. Это затем в верхнем регистре в функции обратного вызова и заменяется.


53
К вашему сведению, здесь все наоборот:myString.replace(/([a-z][A-Z])/g, function (g) { return g[0] + '-' + g[1].toLowerCase() });
Кирилл Н.

Я думаю, что параметр должен быть переименован в "m", как "match". Можно быстро написать что-то вроде: myString.replace(/-([a-z])/i, function (i) { return i[1].toUpperCase() });
программы

8
Было бы неплохо сделать ваше регулярное выражение более надежным, добавив iфлаг. Без этого ваш шаблон пропускает «прописные части» (не будет изменен на «заглавные части»). Кроме того, я лично предпочитаю улучшенную читаемость нескольких параметров, но это, очевидно, вопрос стиля. В общем, я бы пошел с .replace( /-([a-z])/gi, function ( $0, $1 ) { return $1.toUpperCase(); } );.
hashchange

Чтобы добавить к этому, если вы хотите, чтобы слова верблюда также были разделены пробелами , сработало бы следующее:var camelCased = myString.replace(/(-+|\s+)\w/g, function (g) { return g[1].toUpperCase(); });
wolfram77

@ wolfram77, Вы включаете несколько регулярных выражений в тире / пробел, затем вводите в верхний регистр второй символ совпадения, то есть, если второй символ - пробел или тире, то он становится прописным. Как насчет этого: var camelCased = myString.replace(/(-+|\s+)\w/g, function (g) { return g[g.length - 1].toUpperCase(); });?
Trysis

44

Это одна из замечательных утилит, которую предлагает Lodash, если вы просветлены и включили ее в свой проект.

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

14

Вы можете получить гипс и следующий символ и заменить его на заглавную версию персонажа:

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

3
Хорошо - я пошел с этим методом, но ES6 поместил его в >> str.replace (/ - ([az]) / g, (x, up) => up.toUpperCase ())
ConorLuddy

13

Вот моя версия функции 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);
    };
})();

Он обрабатывает все следующие крайние случаи:

  • по умолчанию обрабатывает как подчеркивания, так и дефисы (настраивается с помощью второго параметра)
  • строка с символами Юникода
  • строка, которая заканчивается дефисами или подчеркиванием
  • строка с последовательными дефисами или подчеркиванием

Вот ссылка на живые тесты: http://jsfiddle.net/avKzf/2/

Вот результаты тестов:

  • вход: "ab-cd-ef", результат: "abCdEf"
  • вход: "ab-cd-ef-", результат: "abCdEf"
  • вход: "ab-cd-ef--", результат: "abCdEf"
  • вход: "ab-cd - ef--", результат: "abCdEf"
  • вход: "--ab-cd - ef--", результат: "AbCdEf"
  • вход: "--ab-cd -__- ef--", результат: "AbCdEf"

Обратите внимание, что строки, начинающиеся с разделителей, в начале будут содержать заглавную букву. Если это не то, что вы ожидаете, вы всегда можете использовать lcfirst. Вот мое первое, если вам это нужно:

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

4

Это не кричит для RegExpменя. Лично я стараюсь избегать регулярных выражений, когда достаточно простых методов строк и массивов:

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

Вот еще один вариант, который объединяет пару ответов здесь и делает его методом в строке:

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

Используется так:

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


0

Еще один дубль.

Используется, когда ...

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

Также возможно использовать indexOf с рекурсией для этой задачи.

input some-foo_sd_dsd-weqe
output someFooSdDsdWeqe

сравнение ::: измерить время выполнения для двух разных скриптов:

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

код:

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

Просто версия с флагом, для цикла и без регулярных выражений:

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

Вот моя реализация (просто чтобы испачкать руки)

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

Используйте это, если вы разрешаете числа в вашей строке.

Очевидно, что части, начинающиеся с цифры, не будут написаны заглавными буквами, но это может быть полезно в некоторых ситуациях.

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.