当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Convert hyphens to camel case (camelCase)

问题描述:

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

网友答案:

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.

网友答案:

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();
});
网友答案:

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'
网友答案:

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);
}
网友答案:

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
网友答案:
# Turn the dash separated variable name into camelCase.
str = str.replace(/\b-([a-z])/g, function(all, char) { return char.toUpperCase() });
网友答案:

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');
网友答案:

I don't see the point IMHO: The use of camelCase vs hyphen seperated identifiers is over debated I know, but I would like to share a recent observation: When editing the identifier in a text editor, it is easier to edit a hyphen separated identifier as apposed to camelCase.

Reason?

A double click on "first" in "first-name" selects only the first in the event that you may wish to refactor it to "last-name" this ensures that only the part that is relevant will be changed.

Using camelCase would require a full word edit in the case of lastDayOfMonth when instead you could just change it (if using hyphen) by double-clicking the "first" in "first-day-of-month" and changing it to "last" to get "last-day-of-month". It's a matter of taste of course, but notice that you provided for easier editing of code for perhaps others.

Secondly it's a habit that pays off when it comes to naming files that may get displayed in urls. I prefer to read hyphen separated file names in a url.

分享给朋友:
您可能感兴趣的文章:
随机阅读: