How to convert a string to camel case in JavaScript?

Camel case is the practice of writing phrases such that each word or abbreviation in the middle of the phrase begins with a capital letter, with no intervening spaces or punctuation. For example, "Concurrent hash maps" in camel case would be written as:

ConcurrentHashMaps

There are different variations of camel case: PascalCase (first letter capitalized) and camelCase (first letter lowercase). We'll explore multiple methods to convert strings to camel case in JavaScript.

Method 1: Using split() and map()

function camelize(str) {
    // Split the string at all space characters
    return str.split(' ')
        // get rid of any extra spaces using trim
        .map(word => word.trim())
        // Convert first char to upper case for each word
        .map(word => word[0].toUpperCase() + word.substring(1).toLowerCase())
        // Join all the strings back together
        .join("");
}

console.log(camelize("Concurrent hash maps"));
console.log(camelize("hello world example"));
console.log(camelize("  multiple   spaces  here  "));

ConcurrentHashMaps
HelloWorldExample
MultipleSpacesHere

Method 2: Using Regular Expressions

function toCamelCase(str) {
    return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
        return word.toUpperCase();
    }).replace(/\s+/g, '');
}

console.log(toCamelCase("convert this string"));
console.log(toCamelCase("another example here"));
console.log(toCamelCase("123 numbers included"));

ConvertThisString
AnotherExampleHere
123NumbersIncluded

Method 3: Converting to camelCase (lowercase first letter)

function toCamelCaseLower(str) {
    return str.split(' ')
        .map((word, index) => {
            if (index === 0) {
                return word.toLowerCase();
            }
            return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
        })
        .join('');
}

console.log(toCamelCaseLower("JavaScript is awesome"));
console.log(toCamelCaseLower("camel case conversion"));

javaScriptIsAwesome
camelCaseConversion

Method 4: Handling Multiple Delimiters

function advancedCamelize(str) {
    return str
        .replace(/[-_\s]+(.)?/g, (_, char) => char ? char.toUpperCase() : '')
        .replace(/^[A-Z]/, char => char.toLowerCase());
}

console.log(advancedCamelize("hello-world_example test"));
console.log(advancedCamelize("multiple---delimiters___here"));
console.log(advancedCamelize("mixed_case-STRING example"));

helloWorldExampleTest
multipleDelimitersHere
mixedCaseStringExample

Comparison

Conclusion

Choose the appropriate method based on your needs: use the split() approach for simple cases, or the advanced regex method for handling multiple delimiters. The camelCase version (lowercase first letter) is most common in JavaScript conventions.