Nasıl "camelCase" dönüştürmek "Camel Case"?


174

Gibi bir şeyi "thisString"dönüştürmek için bir JavaScript regex komutu almaya çalışıyorum "This String"ama en yakın aldığım bir harfi değiştirerek, "Thi String"veya gibi bir şeyle sonuçlanıyor "This tring". Herhangi bir fikir?

Bir mektubu büyük harfle yazmanın basitliğini kaldırabileceğimi açıklığa kavuşturmak için, RegEx ile o kadar güçlü değilim ve "somethingLikeThis"bölündüğümde "something Like This"sorun yaşıyorum.



6
Bu nasıl bir kopyası. Tek yaptığı bir karakter dizisindeki ilk karakteri büyük yapmak, ne yapmak istediğime yakın bir şey değil.
Bir Sihirbaz Yaptı

Hmm bu sorunun bir örneği değil, ama sonuç aynı olabilir. Yoksa yapmak istediğin bu değil mi? Daha ayrıntılı mı?
superfro

Normal ifade uygulaması için RegExr veya Expresso'yu test etmenizi ve SO ile ilgili tüm normal ifade sorularına bakmanızı ve cevaplamaya çalışmanızı öneririm. Regex'ler dünyadaki en basit şey değildir, ancak regex'iniz SİZE kafa karıştırıyorsa, onu bölün ve parçalara ayırın.
josh.trow

Yanıtlar:


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

görüntüler

This String Is Good


1
İyi adam, bölüyorum. Sadece Bobince'nin tavsiyelerini hatırlayın: stackoverflow.com/questions/1732348/…
josh.trow

Bunun IE ile uyumlu olduğundan emin misiniz? Sadece IETester7'de denedim ve bir hata var.
strongriley

3
Ayrıca ekleme: bir arada tutmak istediğiniz tüm büyük harf kısaltmanız varsa ilk normal
ifadeyi

2
"This" -> "This" (istenmeyen önek alanı). Belki şu şekilde değiştirin: str.slice (0, 1) .toUpperCase () + str.slice (1) .replace (/ ([AZ]) / g, '1 $')
Mark Vayngrib

1
: @ColdCerberus kullanabilirsiniz str.replace(/((?<!^)[A-Z](?![A-Z]))(?=\S)/g, ' $1').replace(/^./, s => s.toUpperCase() );Bu dönüştürecektir userIDiçin User IDve hatta dönüştürür userIDFieldiçinUser ID Field
Eugene Mala

87

Özellikle xmlHTTPRequest gibi sermaye dizilerini ele almak konusunda boş bir ilgim vardı. Listelenen işlevler "Xml HTTP İsteği" veya "Xml HTTPRequest", benimki de "Xml HTTP İsteği" üretir.

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

Bir String.prototype versiyonu da var bir ve özü .


Aynı durum 2 değiştirme str.replace(/((?<!^)[A-Z](?![A-Z]))(?=\S)/g, ' $1').replace(/^./, s => s.toUpperCase() )
Eugene Mala

22

Bu, regex lookahead ile kısaca yapılabilir ( canlı demo ):

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

( g(Küresel) bayrağın gerekli olduğunu düşündüm , ama garip bir şekilde, bu özel durumda değil.)

İle lookahead kullanma splitUpperCamelCase sen başa gereken bir şey ise lider alanı ile ilgili eşleşti harfi tüketilen görmemesini sağlar ve kaçınır. Her birinin ilk harfini büyük yapmak için şunları kullanabilirsiniz:

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

mapDizi yöntem ES5 özelliktir, ancak yine de birlikte eski tarayıcılarda kullanabilirsiniz MDC bazı kod . Alternatif olarak, bir fordöngü kullanarak dizi öğeleri üzerinde yineleme yapabilirsiniz .


İlk işlev onu böler, ancak İlk kelimeyi PascalCase yapmaz. Hiçbiri deveKasarlı durumda ikinci işlev başarısız olur. (örneğin: 'id')
2018'de Demans

16

Bunun ardışık büyük harflerin yanı sıra basit camelCase işleyebileceğini düşünüyorum.

Örneğin: someVariable => someVariable, ancak ABCCode! = ABC Kodu.

Aşağıdaki normal ifade örneğiniz üzerinde çalışır, ancak camcelCase'deki kısaltmaları temsil etmenin yaygın örneğidir.

"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"

İlk karakteri büyük harf yapmak için yukarıdaki gibi de ayarlayabilirsiniz.


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

spacecamel ( 'somethingLikeThis')

// değer döndürdü: Buna benzer bir şey


1
Güzel bir! Bu tam olarak ihtiyaç duyduğum şeydi bölmek istedim örneğin: DiscoveryChannel ve HBO diğer cevaplar bana Discovery Channel ve HBO verdi, ama HBO sağlam kaldığı için cevabınız benim için hile yaptı teşekkür ederim!
AJS


4

Sayıları da işleyen bir çözüm:

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

Burada test edildi [JSFiddle, kütüphane yok. IE denenmedi]; oldukça kararlı olmalı.


0

Eski tarayıcılarla ilgilenmiyorsanız (veya onlar için geri dönüş azaltma işlevini kullanmanın bir sakıncası yoksa ), bu 'xmlHTTPRequest' gibi dizeleri bile bölebilir (ancak kesinlikle 'XMLHTTPRequest' gibi) olamaz.

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

0

Benim versiyonum

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"

Bu işlevi 3000 satırda döngüde uyguladım ve sermaye ile başlayan her satırın önünde bu boşlukları aldım
Dominik Domanski

0

Bu çözümü burada deneyin -

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;

-5

Normal ifade değil, bunun gibi sade ve eski teknikleri bilmek yararlıdır:

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

5
hayır, soru "thisString", "This String" e (boşluklu) "ThisString" değil
Pete Kirkham

@rob "this" ve "String" arasına nasıl boşluk koyabilirsiniz?
ThunderBird
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.