How to convert "camelCase" to "Camel Case"?

This can be concisely done with regex lookahead (live demo):

function splitCamelCaseToString(s) {
    return s.split(/(?=[A-Z])/).join(' ');
}

(I thought that the g (global) flag was necessary, but oddly enough, it isn't in this particular case.)

Using lookahead with split ensures that the matched capital letter is not consumed and avoids dealing with a leading space if UpperCamelCase is something you need to deal with. To capitalize the first letter of each, you can use:

function splitCamelCaseToString(s) {
    return s.split(/(?=[A-Z])/).map(function(p) {
        return p.charAt(0).toUpperCase() + p.slice(1);
    }).join(' ');
}

The map array method is an ES5 feature, but you can still use it in older browsers with some code from MDC. Alternatively, you can iterate over the array elements using a for loop.


"thisStringIsGood"
    // insert a space before all caps
    .replace(/([A-Z])/g, ' $1')
    // uppercase the first character
    .replace(/^./, function(str){ return str.toUpperCase(); })

displays

This String Is Good

(function() {

  const textbox = document.querySelector('#textbox')
  const result = document.querySelector('#result')
  function split() {
      result.innerText = textbox.value
        // insert a space before all caps
        .replace(/([A-Z])/g, ' $1')
        // uppercase the first character
        .replace(/^./, (str) => str.toUpperCase())
    };

  textbox.addEventListener('input', split);
  split();
}());
#result {
  margin-top: 1em;
  padding: .5em;
  background: #eee;
  white-space: pre;
}
<div>
  Text to split
  <input id="textbox" value="thisStringIsGood" />
</div>

<div id="result"></div>

I had an idle interest in this, particularly in handling sequences of capitals, such as in xmlHTTPRequest. The listed functions would produce "Xml H T T P Request" or "Xml HTTPRequest", mine produces "Xml HTTP Request".

function unCamelCase (str){
    return str
        // insert a space between lower & upper
        .replace(/([a-z])([A-Z])/g, '$1 $2')
        // space before last upper in a sequence followed by lower
        .replace(/\b([A-Z]+)([A-Z])([a-z])/, '$1 $2$3')
        // uppercase the first character
        .replace(/^./, function(str){ return str.toUpperCase(); })
}

There's also a String.prototype version in a gist.


I think this should be able to handle consecutive uppercase characters as well as simple camelCase.

For example: someVariable => someVariable, but ABCCode != A B C Code.

The below regex works on your example but also the common example of representing abbreviations in camcelCase.

"somethingLikeThis"
    .replace(/([a-z])([A-Z])/g, '$1 $2')
    .replace(/([A-Z])([a-z])/g, ' $1$2')
    .replace(/\ +/g, ' ') => "something Like This"

"someVariableWithABCCode"
    .replace(/([a-z])([A-Z])/g, '$1 $2')
    .replace(/([A-Z])([a-z])/g, ' $1$2')
    .replace(/\ +/g, ' ') => "some Variable With ABC Code"

You could also adjust as above to capitalize the first character.