String Functions for Javascript – trim, to camel case, to dashed, and to underscore

So I was messing with a little template builder, and decided to try and dynamically read and write CSS to elements on a page. This brought up the difference between JavaScript having camel case representations of the dashed css properties. Soooooo, I had to write little string functions to convert camel case to dashed strings and visa versa. Heres what I came up with:

Trim String

1
2
3
String.prototype.trim = function(){
	return this.replace(/^\s+|\s+$/g, "");
};

To Camel Case

1
2
3
String.prototype.toCamel = function(){
	return this.replace(/(\-[a-z])/g, function($1){return $1.toUpperCase().replace('-','');});
};

To Dashed from Camel Case

1
2
3
String.prototype.toDash = function(){
	return this.replace(/([A-Z])/g, function($1){return "-"+$1.toLowerCase();});
};

To Underscore from Camel Case

1
2
3
String.prototype.toUnderscore = function(){
	return this.replace(/([A-Z])/g, function($1){return "_"+$1.toLowerCase();});
};

Enjoy!

26 Comments to String Functions for Javascript – trim, to camel case, to dashed, and to underscore

  1. Sam Hall's Gravatar Sam Hall
    December 13, 2010 at 7:15 pm | Permalink

    The brackets in the regex can be removed. The naming of the variable as $1 is misleading as the inline function is being passed the regex match, and not the back reference.

  2. james's Gravatar james
    December 21, 2010 at 2:23 am | Permalink

    awesome, thanks for the suggestions =) I’m not very good at regex….

  3. June 30, 2011 at 7:42 pm | Permalink

    Great collection of string manipulation functions, cheers.

  4. August 2, 2011 at 3:49 am | Permalink

    god i hate regex

  5. April 13, 2012 at 5:11 am | Permalink

    Very useful! Thanks.

  6. April 24, 2013 at 5:43 am | Permalink

    +1
    #timesaver

  7. Tom's Gravatar Tom
    July 29, 2013 at 3:39 pm | Permalink

    This work great thanks

  8. Mr. O's Gravatar Mr. O
    November 8, 2013 at 7:26 am | Permalink

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

  9. Mr. O's Gravatar Mr. O
    November 8, 2013 at 9:07 am | Permalink

    Above is a modified method to match “-” and “_” input strings.

  10. james's Gravatar james
    November 8, 2013 at 9:21 am | Permalink

    Thanks!

  11. Dave's Gravatar Dave
    November 19, 2013 at 4:54 am | Permalink

    thanks!

  12. April 28, 2014 at 9:40 pm | Permalink

    Hello, I think your site could possibly be having browser compatibility issues.
    When I look at your blog in Safari, it looks fine however, if opening in Internet Explorer, it has some overlapping issues.
    I merely wanted to provide you with a quick heads up!
    Besides that, excellent blog!

  13. November 19, 2014 at 3:32 pm | Permalink

    It is perfect and the OOP approach is also elegant.
    Thank You.

  14. David A's Gravatar David A
    July 22, 2015 at 12:01 pm | Permalink

    The toUnderscore didn’t worked so well for me… this one is simpler and does the job:


    String.prototype.toUnderscore = function(){
    return this.replace(/([A-Z])/g, "_$1").replace(/^_/,'').toLowerCase();});
    };

  15. Eugene's Gravatar Eugene
    January 23, 2016 at 8:26 pm | Permalink

    Hello, toDash function will convert “SampleWord” to “-sample-word”,
    if you want result to be “sample-word” than use this method:

    camelToDash = function(s){
    return s.replace(/([A-Z])/g, function($1, p1, pos){return (pos > 0 ? "-" : "") + $1.toLowerCase();});
    };

  16. james's Gravatar james
    January 23, 2016 at 8:47 pm | Permalink

    Thanks Eugene!

  17. June 30, 2016 at 5:31 am | Permalink

    As a sidenote, you can also use Lodash for this:

    https://lodash.com/docs

  18. September 26, 2016 at 1:52 pm | Permalink

    Excellent time saver. Works like a charm. Thanks old chap!

  19. Alessandro's Gravatar Alessandro
    November 6, 2016 at 3:41 pm | Permalink

    What’s the license for the code in this page? Thanks

  20. james's Gravatar james
    November 6, 2016 at 3:49 pm | Permalink

    MIT license … free to use for any purpose.

  21. james's Gravatar james
    November 6, 2016 at 3:51 pm | Permalink

    Totally, I was not aware of lodash or underscore when this was posted in February of 2010.

  22. February 27, 2017 at 9:59 am | Permalink

    2017-02 and this is still relevant! Using this to convert underscored property names from an API to local variables to follow javascript conventions in a React app.

  23. February 27, 2017 at 10:31 am | Permalink

    I added a gist for (recursively) mapping under_score properties to camelCase properties and back again. Cheers!

    https://gist.github.com/nanch/a336f1154d87dc7c6d8b910d29286c66

  24. James Roberts's Gravatar James Roberts
    February 27, 2017 at 10:34 am | Permalink

    Awesome! Thank you!

  25. January 21, 2018 at 9:40 am | Permalink

    Thank you very much for sharing this functions. They helped me from time to time when not using other JavaScript libraries such as jQuery or underscore.js.

    I reused them in my new JavaScript repo at Github: https://github.com/remluben/rj
    “A collection of useful helper functions” and wrote some simple QUnit tests for them.

    Keep on the good work.
    Best regards.

  26. Daryl's Gravatar Daryl
    April 24, 2018 at 8:43 am | Permalink

    Sometimes you’d have a few characters in uppercase such as an acronym. Example: DotNET. You wouldn’t want this to be dot_n_e_t, so add a replace for all consecutive capitals first. Then do the snake case conversion.

    String.prototype.toUnderscore = function(){
    return this.replace(/[A-Z]([A-Z]*)/g, function($1){return "_"+$1.toLowerCase();})
    .replace(/([A-Z])/g, function($1){return "_"+$1.toLowerCase();});
    };

Leave a Reply

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>