Wie konvertiere ich "camelCase" in "Camel Case"?

174

Ich habe versucht, einen JavaScript-Regex-Befehl zu erhalten, um so etwas "thisString"in etwas umzuwandeln, "This String"aber das nächste, was ich bekommen habe, ist das Ersetzen eines Buchstabens, was zu etwas wie "Thi String"oder führt "This tring". Irgendwelche Ideen?

Um zu klären , ich die Einfachheit der Kapitalisierung einen Brief umgehen kann, bin ich einfach nicht so stark mit RegEx und Spaltung "somethingLikeThis"in "something Like This"ist , wo ich Probleme habe.

Ein Zauberer hat es geschafft
quelle
6
Wie ist das ein Duplikat davon? Alles, was Sie tun müssen, ist, das erste Zeichen in einer Zeichenfolge groß zu schreiben, nichts in der Nähe dessen, was ich tun möchte.
Ein Zauberer hat es
Hmm, es ist kein Betrug der Frage, aber das Ergebnis könnte das gleiche sein. Oder wollten Sie das nicht? Mehr ausarbeiten?
Superfro
Zum Üben von Regex empfehle ich RegExr oder Expresso zum Testen. Schauen Sie sich einfach alle Regex-Fragen zu SO an und versuchen Sie, sie zu beantworten. Regexs sind nicht die einfachste Sache der Welt, aber denken Sie daran, wenn Ihre Regex SIE verwirrt, teilen Sie sie auf und arbeiten Sie in Stücke.
Josh.Trow

Antworten:

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

Anzeigen

This String Is Good

Vincent Robert
quelle
1
Guter Mann, spaltet es auf. Denken Sie nur an den Rat von Bobince
josh.trow
Sind Sie sicher, dass dies mit dem IE kompatibel ist? Ich habe es gerade in IETester7 versucht und habe einen Fehler erhalten.
Strongriley
3
Außerdem: Wenn Sie ein Akronym für
Großbuchstaben
2
"This" -> "This" (unerwünschter Präfixraum). Ändern Sie es möglicherweise in: str.slice (0, 1) .toUpperCase () + str.slice (1) .replace (/ ([AZ]) / g, '$ 1')
Mark Vayngrib
1
@ColdCerberus Sie können verwenden: str.replace(/((?<!^)[A-Z](?![A-Z]))(?=\S)/g, ' $1').replace(/^./, s => s.toUpperCase() );Es wird konvertiert userIDin User IDund es wird sogar konvertiert userIDFieldinUser ID Field
Eugene Mala
87

Ich hatte ein müßiges Interesse daran, insbesondere an der Behandlung von Großbuchstabenfolgen, wie z. B. an xmlHTTPRequest. Die aufgelisteten Funktionen würden "Xml HTTP Request" oder "Xml HTTPRequest" erzeugen, meine "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(); })
}

Es gibt auch eine String.prototype-Version in einem Kern .

Matt Wiebe
quelle
Das gleiche kann mit 2 Ersetzungsaufrufen erreicht werden:str.replace(/((?<!^)[A-Z](?![A-Z]))(?=\S)/g, ' $1').replace(/^./, s => s.toUpperCase() )
Eugene Mala
22

Dies kann mit Regex Lookahead ( Live-Demo ) präzise erfolgen :

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

(Ich dachte, dass die g (globale) Flagge notwendig ist, aber seltsamerweise ist dies in diesem speziellen Fall nicht der Fall.)

Durch die Verwendung von Lookahead mit wird splitsichergestellt, dass der übereinstimmende Großbuchstabe nicht verbraucht wird, und es wird vermieden, mit einem führenden Leerzeichen umzugehen, wenn Sie sich mit UpperCamelCase befassen müssen. Um den ersten Buchstaben eines jeden zu groß zu schreiben, können Sie Folgendes verwenden:

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

Die mapArray-Methode ist eine ES5-Funktion, Sie können sie jedoch in älteren Browsern mit etwas Code aus MDC verwenden . Alternativ können Sie die Array-Elemente mithilfe einer forSchleife durchlaufen .

PleaseStand
quelle
Die erste Funktion teilt es auf, aber PascalCase das erste Wort nicht. Die zweite Funktion schlägt in einem Fall ohne Kamelfall fehl. (zB: 'id')
Dementic
16

Ich denke, dies sollte in der Lage sein, aufeinanderfolgende Großbuchstaben sowie einfache camelCase zu verarbeiten.

Zum Beispiel: someVariable => someVariable, aber ABCCode! = ABC Code.

Der folgende reguläre Ausdruck funktioniert in Ihrem Beispiel, aber auch im allgemeinen Beispiel für die Darstellung von Abkürzungen 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"

Sie können auch wie oben anpassen, um das erste Zeichen groß zu schreiben.

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

Spacecamel ('etwas wie dieses')

// zurückgegebener Wert: so etwas

kennebec
quelle
1
Schön! Dies ist genau das, was ich brauchte, ich wollte teilen, zB: DiscoveryChannel und HBO andere Antworten gaben mir Discovery Channel und HBO, aber Ihre Antwort hat den Trick für mich getan, da HBO intakt blieb, danke!
AJS
8

Lodash handhabt dies gut mit_.startCase()

Lawrence Chang
quelle
4

Eine Lösung, die auch mit Zahlen umgeht:

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

Hier getestet [JSFiddle, keine Bibliothek. Nicht versucht IE]; sollte ziemlich stabil sein.

SamGoody
quelle
0

Wenn Sie sich nicht für ältere Browser interessieren (oder nichts dagegen haben, eine Fallback- Reduktionsfunktion für sie zu verwenden), kann dies sogar Zeichenfolgen wie 'xmlHTTPRequest' aufteilen (aber sicherlich können solche wie 'XMLHTTPRequest' dies nicht).

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(' ');
}
Daniel Fernández Espinoza
quelle
0

Meine 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"
Pykiss
quelle
Ich habe diese Funktion in einer Schleife auf 3000 Zeilen angewendet und diese Leerzeichen vor jeder Zeile erhalten, die mit Großbuchstaben beginnt
Dominik Domanski
0

Probieren Sie diese Lösung hier aus -

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;
M3ghana
quelle
-5

Nicht Regex, aber nützlich, um einfache und alte Techniken wie diese zu kennen:

var origString = "thisString";
var newString = origString.charAt(0).toUpperCase() + origString.substring(1);
rauben
quelle
5
Nein, die Frage ist "thisString" zu "This String" (mit einem Leerzeichen), nicht "ThisString"
Pete Kirkham
@rob Wie setzt man ein Leerzeichen zwischen "this" und "String"?
ThunderBird