Home » Javascript » Javascript camelCase to Regular Form

Javascript camelCase to Regular Form

Posted by: admin November 29, 2017 Leave a comment

Questions:

I’ve been trying to get a JavaScript regex command to turn something like thisString into This String but the closest I’ve gotten is replacing a letter, resulting in something like Thi String or This tring. Any ideas?

To clarify I can handle the simplicity of capitalizing a letter, I’m just not as strong with RegEx, and splitting somethingLikeThis into something Like This is where I’m having trouble.

Answers:
"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() {

  var $textbox = $('#textbox'),
    $result = $('#result'),
    splitter = function() {
      $result.html($textbox.val()
        // insert a space before all caps
        .replace(/([A-Z])/g, ' $1')
        // uppercase the first character
        .replace(/^./, function(str) {
          return str.toUpperCase();
        }));
    };

  $textbox.on('input', splitter);
  
  splitter();
}());
#result {
  margin-top: 10px;
  padding-top: 10px;
  border-top: solid 1px #c3c3c3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  Text to split
  <input id="textbox" value="thisStringIsGood" />
</div>

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

Questions:
Answers:

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.

Questions:
Answers:

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.

Questions:
Answers:
function spacecamel(s){
    return s.replace(/([a-z])([A-Z])/g, '$1 $2');
}

spacecamel(‘somethingLikeThis’)

// returned value: something Like This

Questions:
Answers:

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.

Questions:
Answers:

A solution that handles numbers as well:

function capSplit(str){
   return str.replace
      ( /(^[a-z]+)|[0-9]+|[A-Z][a-z]+|[A-Z]+(?=[A-Z][a-z]|[0-9])/g
      , function(match, first){
          if (first) match = match[0].toUpperCase() + match.substr(1);
          return match + ' ';
          }
       )
   }

Tested here [JSFiddle, no library. Not tried IE]; should be pretty stable.

Questions:
Answers:

If you don’t care about older browsers (or don’t mind using a fallback reduce function for them), this can split even strings like ‘xmlHTTPRequest’ (but certainly the likes of ‘XMLHTTPRequest’ cannot).

function splitCamelCase(str) {
        return str.split(/(?=[A-Z])/)
                  .reduce(function(p, c, i) {
                    if (c.length === 1) {
                        if (i === 0) {
                            p.push(c);
                        } else {
                            var last = p.pop(), ending = last.slice(-1);
                            if (ending === ending.toLowerCase()) {
                                p.push(last);
                                p.push(c);
                            } else {
                                p.push(last + c);
                            }
                        }
                    } else {
                        p.push(c.charAt(0).toUpperCase() + c.slice(1));
                    }
                    return p;
                  }, [])
                  .join(' ');
}

Questions:
Answers:

Not regex, but useful to know plain old techniques like this.

var origString = "thisString";
var newString = origString.charAt(0).toUpperCase() + origString.substring(1);