¿Cómo convertir "camelCase" a "Camel Case"?

He estado tratando de conseguir una orden de expresiones regulares JavaScript para convertir algo así como "thisString"en "This String"pero lo más cerca que he recibido está reemplazando una carta, lo que resulta en algo así como "Thi String"o "This tring". ¿Algunas ideas?

Para aclarar que puedo manejar la simplicidad de la capitalización de una carta, simplemente no lo soy fuerte con expresiones regulares, y la división "somethingLikeThis"en "something Like This"es donde estoy teniendo problemas.

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

muestra

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>

Tenía un interés inactivo en esto, particularmente en el manejo de secuencias de mayúsculas, como en xmlHTTPRequest. Las funciones enumeradas producirían "Solicitud HTTP Xml" o "Solicitud HTTP Xml", la mía produce "Solicitud HTTP Xml".

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

También hay una versión de String.prototype en una esencia .

Esto se puede hacer de manera concisa con regex lookahead ( demostración en vivo ):

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

(Pensé que la gbandera (global) era necesaria, pero curiosamente, no lo es en este caso particular).

Usar lookahead con splitasegura que la letra mayúscula coincidente no se consuma y evita tratar con un espacio inicial si UpperCamelCase es algo con lo que debe lidiar. Para poner en mayúscula la primera letra de cada uno, puede usar:

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

El mapmétodo de matriz es una característica de ES5, pero aún puede usarlo en navegadores antiguos con algún código de MDC . Alternativamente, puede iterar sobre los elementos de la matriz utilizando un forbucle.

Creo que esto debería ser capaz de manejar caracteres en mayúsculas consecutivos, así como camelCase simple.

Por ejemplo: someVariable => someVariable, pero ABCCode! = Código ABC.

La expresión regular a continuación funciona en su ejemplo, pero también en el ejemplo común de representar abreviaturas en 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"

También puede ajustar como se indica arriba para capitalizar el primer carácter.

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

spacecamel ('algo como esto')

// valor devuelto: algo como esto

Lodash maneja esto muy bien con_.startCase()

Una solución que también maneja 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 + ' ';
          }
       )
   }

Probado aquí [JSFiddle, no library. No probé IE]; Debería ser bastante estable.

Si no le interesan los navegadores más antiguos (o no le importa usar una función de reducción de reserva para ellos), esto puede dividir incluso cadenas como 'xmlHTTPRequest' (pero ciertamente no puede hacerlo 'XMLHTTPRequest').

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

Mi version

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"

Prueba esta solución aquí:

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;

No es una expresión regular, pero es útil para conocer técnicas simples y antiguas como esta:

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