JavaScript: Convert CamelCase to Dashes and vice-versa




My colleague Satyam shared a nice piece of JavaScript code that converts a camelcase to dashes and dashes to Camelcase.

For eg: if the string has a camelcase in it - like ‘viceVersa’, the result expected is ‘vice-Versa’. Similarly if a string has a dash in it, like ‘dot-net’, the result expected is ‘dotNet’. Let’s see the piece of code to make this possible:

<script type="text/javascript" language="javascript">
   function camelToDash(str) {
      return str.replace(/\W+/g, '-')
                .replace(/([a-z\d])([A-Z])/g, '$1-$2');
   }

   function dashToCamel(str) {
         return str.replace(/\W+(.)/g, function (x, chr) {
                          return chr.toUpperCase();
         })
   }

   var str1 = "devCurry"; 
   str1 = camelToDash(str1);
   var str2 = "dev-curry";
   str2 = dashToCamel(str2);
   alert(str1 + " " + str2);

</script>

Let’s see some important bits of the code shown above.

The /\W+/ pattern matches one or more of any of A-Z, a-z, 0-9, and the underscore character. The "g" (global) flag specifies that the search should find all occurrences of the pattern. The $1,$2,… property represents parenthesized substring matches.

Run the code and you should see the following output

JavaScript camelcase

Will you give this article a +1 ? Thanks in advance




About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

4 Responses to "JavaScript: Convert CamelCase to Dashes and vice-versa"
  1. Elijah Manor said...
    July 19, 2011 at 5:47 AM

    Nice Regex-fu ;)

    You might consider showing another example of the camelToDash code replacing any whitespace with a dash as it is doing. Like camelToDash( "dev Curry" ) outputting "dev-Curry"

    Also, there is a typo describing the /\W+/ in the paragraph. It should say something to the fact that it "matches any character that is NOT a word character (alphanumeric or underscore)"

    Have a great day... or night for you ;)

  2. Suprotim Agarwal said...
    July 20, 2011 at 7:40 AM

    Elijah, Thanks for your comment. The code does replace whitespaces with dashes. Did you mean a dedicated function just for the whitespaces? Let me know if you meant anything else

  3. Elijah Manor said...
    July 20, 2011 at 8:27 AM

    Suprotim,

    Ohh no, I just meant to say your code does more than your examples show and was suggesting you could add another example to demonstrate it like...

    var str3 = "dev Curry";
    str3 = camelToDash( str3 ); //dev-Curry

  4. Suprotim Agarwal said...
    July 20, 2011 at 10:28 AM

    Sorry my bad! Thanks.

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions