4umi.com/web/javascript/camelcase

CamelCase

Text Javascript

If it is language that puts us apart from the animals, as one, and if writing distinguishes us from the pritimives and savages, then surely the invention the capital letter defines the birth of civilization. Why they thought they needed two versions of each letter is probably lost to history, but the people who developed our alphabet did so with flair.

A case for casing

With the advent of the computer new uses have emerged of the existing repertoire of characters and punctuation glyphs, the bricks in the house of language, adding meaning without losing the old. CamelCase is of them. It is often the case that words must be brought together into one word unit, to name files for a start, while retaining some eh, character of their own. Several attempts to answer this need have not led to a natural solution.

The underscore _ is often used as glue between the pieces, but never with great enthousiasm. It breaks the feel of the words as letter material, it is often wider than the original, and it is not visible when the word is underlined. The hyphen - solves these problems only half.

Enter camelCase. Thank whoever for the invention of capital letters, but now we can bring words together in a glorious dance of upper- and lowercase, going down, up and down again like the back of the cud-chewing, even-hooved mammal. Ironically enough, the core Javascript String methods toLowerCase and toUpperCase are written in pure camelcase, as are all compound names in the language! In fact, camelcasing is so common in so many programming languages now (SmallTalk, Java, VisualBasic), that many people use it without realizing they are doing something really new.

 A feral camel.
An Australian feral camel (Camelus dromedarius).

A special case is the one where the first letter of the word is also a capital. Strictly speaking, a true camelcase word begins with a lowercase letter, and words that start with an uppercase letter and have capitals in the middle as well, are cases of PascalCase.

The script

The way it is set up, the function, named camelcase, first checks with a regular expression test the given string s for the existance of an uppercase letter [A-Z] in a position where it is immediately preceded by \S, anything but whitespace, but something still, for example another letter. If this is the case, the text is assumed to be a camelcased word and the function proceeds to replace the capitalized glyphs with a space and their lowercase counterpart. If no capitals are found with "something but not whitespace" before it, another call to replace changes each space followed by a lowercase letter into a single capital.

In short, transforming a set of words into a camelcased compound word and splitting a camelcase up into separate individual words is done by the same function. fromCamelCase and toCamelCase would have been equally appropriate names.

A prototype method for strings is provided alongside the global camelcase function. Mouse over the various items to highlight them across the script. Note that trim is not a native function for strings in Javascript, although it is in many other languages, so if its service is desired, the function needs to be defined elsewhere. Doubleclick the code for the details.

function camelcase( s ) { s = trim( s );
 return ( /\S[A-Z]/.test( s ) ) ?
  s.replace( /(.)([A-Z])/g, function(t,a,b) { return a + ' ' + b.toLowerCase(); } ) :
  s.replace( /( )([a-z])/g, function(t,a,b) { return b.toUpperCase(); } );
}

String.prototype.camelCase = function() { var s = trim( this );
 return ( /\S[A-Z]/.test( s ) ) ?
  s.replace( /(.)([A-Z])/g, function(t,a,b) { return a + ' ' + b.toLowerCase(); } ) :
  s.replace( /( )([a-z])/g, function(t,a,b) { return b.toUpperCase(); } );
};

Without ado, let's put the whole thing to the test now:

var s = 'one love';
window.alert( camelcase( s ) );  //  oneLove/**/

window.alert( camelcase( camelcase( s ) )===s );  //  true/**/

while( s = prompt( 'Your text to camelize...', s ) ) { s = camelcase( s ); }/**/

Going the prototype route is really no different:

window.alert( 'IHaveADream!'.camelCase() );  //  I have aDream!/**/

window.alert( 'I have aDream!'.camelCase() );  //  I have a dream!/**/

while( s = prompt( 'Your text to camelize...', s ) ) { s = s.camelCase(); }/**/

The case of camels is also food for philosophical thought:

‘A camel never sees its own hump.’
Old African proverb.

‘The camel, though it chews the cud, does not have a split hoof.’
Leviticus 11:4.

Reference