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!
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.
awesome, thanks for the suggestions =) I’m not very good at regex….
Great collection of string manipulation functions, cheers.
god i hate regex
Very useful! Thanks.
+1
#timesaver
This work great thanks
toCamelString.prototype.toCamel = function(){return this.replace(/([-_][a-z])/g, function($1){return $1.toUpperCase().replace(/[-_]/,'');});
};
Above is a modified method to match “-” and “_” input strings.
Thanks!
thanks!
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!
It is perfect and the OOP approach is also elegant.
Thank You.
The
toUnderscoredidn’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();});
};
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();});
};
Thanks Eugene!
As a sidenote, you can also use Lodash for this:
https://lodash.com/docs
Excellent time saver. Works like a charm. Thanks old chap!
What’s the license for the code in this page? Thanks
MIT license … free to use for any purpose.
Totally, I was not aware of lodash or underscore when this was posted in February of 2010.
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.
I added a gist for (recursively) mapping under_score properties to camelCase properties and back again. Cheers!
https://gist.github.com/nanch/a336f1154d87dc7c6d8b910d29286c66
Awesome! Thank you!
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.
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();});
};