Come convertire "camelCase" in "Camel Case"?

Ho cercato di ottenere un comando regex JavaScript per trasformare qualcosa di simile "thisString"in "This String"ma il più vicino che ho ottenuto è la sostituzione di una lettera, risultante in qualcosa di simile "Thi String"o "This tring". Qualche idea?

Per chiarire che posso gestire la semplicità di scrivere una lettera in maiuscolo, non sono così forte con RegEx e la divisione "somethingLikeThis"in "something Like This"è dove sto avendo problemi.

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

visualizza

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>

Ho avuto un interesse ozioso in questo, in particolare nella gestione di sequenze di capitali, come in xmlHTTPRequest. Le funzioni elencate producono "Richiesta HTTP Xml" o "Richiesta HTTP Xml", la mia produce "Richiesta 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(); })
}

C'è anche una versione String.prototype in breve .

Questo può essere fatto in modo conciso con regex lookahead ( live demo ):

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

(Ho pensato che il g bandiera (globale) fosse necessaria, ma stranamente, non è in questo caso particolare.)

L'uso di lookahead con splitassicura che la lettera maiuscola abbinata non venga consumata ed evita di occuparsi di uno spazio iniziale se UpperCamelCase è qualcosa di cui devi occuparti. Per scrivere in maiuscolo la prima lettera di ciascuna, puoi usare:

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

Il mapmetodo array è una funzione ES5, ma è comunque possibile utilizzarlo nei browser più vecchi con un po 'di codice da MDC . In alternativa, è possibile scorrere gli elementi dell'array utilizzando un forciclo.

Penso che questo dovrebbe essere in grado di gestire caratteri maiuscoli consecutivi e semplici camelCase.

Ad esempio: someVariable => someVariable, ma ABCCode! = Codice ABC.

Il regex di seguito funziona sul tuo esempio ma anche sull'esempio comune di rappresentazione delle abbreviazioni 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"

Puoi anche regolare come sopra per capitalizzare il primo personaggio.

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

spacecamel ( '') somethingLikeThis

// valore restituito: qualcosa del genere

Lodash lo gestisce bene con_.startCase()

Una soluzione che gestisce anche i numeri:

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

Testato qui [JSFiddle, nessuna libreria. Non provato IE]; dovrebbe essere abbastanza stabile.

Se non ti interessano i browser più vecchi (o non ti dispiace usare una funzione di riduzione del fallback per loro), questo può dividere anche stringhe come 'xmlHTTPRequest' (ma certamente cose del genere di 'XMLHTTPRequest' non possono).

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

La mia versione

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"

Prova questa soluzione qui -

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;

Non regex, ma utile per conoscere tecniche semplici e vecchie come questa:

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