javascript - Convert hyphens to camel case (camelCase) - Stack Overflow

admin管理员组

文章数量:1128731

With regex (i assume) or some other method, how can i convert things like:

marker-image or my-example-setting to markerImage or myExampleSetting.

I was thinking about just splitting by - then convert the index of that hypen +1 to uppercase. But it seems pretty dirty and was hoping for some help with regex that could make the code cleaner.

No jQuery...

With regex (i assume) or some other method, how can i convert things like:

marker-image or my-example-setting to markerImage or myExampleSetting.

I was thinking about just splitting by - then convert the index of that hypen +1 to uppercase. But it seems pretty dirty and was hoping for some help with regex that could make the code cleaner.

No jQuery...

• javascript
• regex
• camelcasing

Share Improve this question Follow asked Jul 12, 2011 at 7:46 Oscar GodsonOscar Godson 32.7k4242 gold badges125125 silver badges206206 bronze badges 7

• 1 Exact duplicate of JavaScript RegExp $1 to upper case – mplungjan Commented Jul 12, 2011 at 7:49
• 9 it is actually, but i searched and never found it probably due to the obscure name. Id suggest keeping this open so people can actually find the answer. "RegExp $1 to uppercase"... no one is going to find it unless they already knew regex IMO – Oscar Godson Commented Jul 12, 2011 at 7:56
• That was easily fixable. I just edited the title – mplungjan Commented Jul 12, 2011 at 8:13
• So a cut and paste of the solutions would have earned me an accepted answer :| – mplungjan Commented Jul 12, 2011 at 9:00
• is there a way to do the exact opposite? – Pavan Commented Jul 12, 2018 at 12:36

 |  Show 2 more comments

16 Answers 16

Sorted by: Reset to default 319

Try this:

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

The regular expression will match the -i in marker-image and capture only the i. This is then uppercased in the callback function and replaced.

This is one of the great utilities that Lodash offers if you are enlightened and have it included in your project.

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

You can get the hypen and the next character and replace it with the uppercased version of the character:

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

Here's my version of camelCase function:

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

It handles all of the following edge cases:

• takes care of both underscores and hyphens by default (configurable with second parameter)
• string with unicode characters
• string that ends with hyphens or underscore
• string that has consecutive hyphens or underscores

Here's a link to live tests: http://jsfiddle.net/avKzf/2/

Here are results from tests:

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

Notice that strings that start with delimiters will result in a uppercase letter at the beginning. If that is not what you would expect, you can always use lcfirst. Here's my lcfirst if you need it:

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

Use String's replace() method with a regular expression literal and a replacement function.

For example:

'uno-due-tre'.replace(/-./g, (m) => m[1].toUpperCase()) // --> 'unoDueTre'

Explanation:

• 'uno-due-tre' is the (input) string that you want to convert to camel case.
• /-./g (the first argument passed to replace()) is a regular expression literal.
  • The '-.' (between the slashes) is a pattern. It matches a single '-' character followed by any single character. So for the string 'uno-due-tre', the pattern '-.' matches '-d' and '-t' .
  • The 'g' (after the closing slash) is a flag. It stands for "global" and tells replace() to perform a global search and replace, ie, to replace all matches, not just the first one.
• (m) => m[1].toUpperCase() (the second argument passed to replace()) is the replacement function. It's called once for each match. Each matched substring is replaced by the string this function returns. m (the first argument of this function) represents the matched substring. This function returns the second character of m uppercased. So when m is '-d', this function returns 'D'.
• 'unoDueTre' is the new (output) string returned by replace(). The input string is left unchanged.

This doesn't scream out for a RegExp to me. Personally I try to avoid regular expressions when simple string and array methods will suffice:

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

Here is my implementation (just to make hands dirty)

/**
 * kebab-case to UpperCamelCase
 * @param {String} string
 * @return {String}
 */
function toUpperCamelCase(string) {
  return string
    .toLowerCase()
    .split('-')
    .map(it => it.charAt(0).toUpperCase() + it.substring(1))
    .join('');
}

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

Here is another option that combines a couple answers here and makes it method on a string:

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

Used like this:

'quick_brown'.toCamel(); // quickBrown
'quick-brown'.toCamel(); // quickBrown

Use this if you allow numbers in your string.

Obviously the parts that begin with a number will not be capitalized, but this might be useful in some situations.

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

Another take.

Used when...

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

is also possible use indexOf with recursion for that task.

input some-foo_sd_dsd-weqe
output someFooSdDsdWeqe

comparison ::: measure execution time for two different scripts:

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

code:

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

Just a version with flag, for loop and without 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;
}

You can use camelcase from NPM.

npm install --save camelcase

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

You can also use string and array methods; I used trim to avoid any spaces.

const properCamel = (str) =>{

  const lowerTrim = str.trim().toLowerCase(); 

  const array = lowerTrim.split('-');

  const firstWord = array.shift();

  const caps = array.map(word=>{

    return word[0].toUpperCase() + word.slice(1);

  })

  caps.unshift(firstWord)

  return caps.join('');

}

This simple solution takes into account these edge cases.

• Single word
• Single letter
• No hyphen
• More than 1 hyphen

const toCamelCase = (text) => text.replace(/(.)([^-|$]*)[-]*/g, (_,letter,word) => `${letter.toUpperCase()}${word.toLowerCase()}`)

本文标签： javascriptConvert hyphens to camel case (camelCase)Stack Overflow