Como converter "camelCase" para "Camel Case"?

Eu tenho tentado obter um comando regex JavaScript para transformar algo como "thisString"em "This String", mas o mais próximo que eu comecei está substituindo uma carta, resultando em algo como "Thi String"ou "This tring". Alguma ideia?

Para esclarecer eu posso lidar com a simplicidade de capitalizar uma carta, eu não sou tão forte com RegEx, e dividir "somethingLikeThis"em "something Like This"é onde eu estou tendo problemas.

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

exibe

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>

Eu tinha um interesse inativo nisso, particularmente no manuseio de seqüências de capitais, como no xmlHTTPRequest. As funções listadas produziriam "Xml HTTP Request" ou "Xml HTTPRequest", a minha produz "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(); })
}

Há também uma versão String.prototype em uma essência .

Isso pode ser feito de forma concisa com o regex lookahead ( demonstração ao vivo ):

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

(Eu pensei que a gbandeira (global) era necessária, mas por incrível que pareça, não é nesse caso em particular.)

O uso de lookahead with splitgarante que a letra maiúscula correspondente não seja consumida e evita lidar com um espaço à esquerda se UpperCamelCase for algo com o qual você precisa lidar. Para colocar em maiúscula a primeira letra de cada uma, você pode usar:

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

O mapmétodo array é um recurso do ES5, mas você ainda pode usá-lo em navegadores mais antigos com algum código do MDC . Como alternativa, você pode iterar sobre os elementos da matriz usando um forloop.

Eu acho que isso deve ser capaz de lidar com caracteres maiúsculos consecutivos, bem como camelCase simples.

Por exemplo: someVariable => someVariable, mas ABCCode! = Código ABC.

O regex abaixo funciona no seu exemplo, mas também no exemplo comum de representação de abreviações no 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"

Você também pode ajustar como acima para colocar em maiúscula o primeiro caractere.

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

spacecamel ('somethingLikeThis')

// valor retornado: algo como isto

A Lodash lida bem com isso_.startCase()

Uma solução que também lida com números:

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 + ' ';
          }
       )
   }

Testado aqui [JSFiddle, nenhuma biblioteca. Não tentei IE]; deve ser bem estável.

Se você não se importa com navegadores antigos (ou não se importa em usar uma função de redução de fallback para eles), isso pode dividir seqüências pares como 'xmlHTTPRequest' (mas certamente os gostos de 'XMLHTTPRequest' não podem).

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(' ');
}

Minha versão

function camelToSpace (txt) {
  return txt
    .replace(/([^A-Z]*)([A-Z]*)([A-Z])([^A-Z]*)/g, '$1 $2 $3$4')
    .replace(/ +/g, ' ')
}
camelToSpace("camelToSpaceWithTLAStuff") //=> "camel To Space With TLA Stuff"

Experimente esta solução aqui -

var value = "myCamelCaseText";
var newStr = '';
for (var i = 0; i < value.length; i++) {
  if (value.charAt(i) === value.charAt(i).toUpperCase()) {
    newStr = newStr + ' ' + value.charAt(i)
  } else {
    (i == 0) ? (newStr += value.charAt(i).toUpperCase()) : (newStr += value.charAt(i));
  }
}
return newStr;

Não é regex, mas é útil conhecer técnicas simples e antigas como esta:

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