Bagaimana cara mengubah "camelCase" menjadi "Camel Case"?

Saya sudah mencoba untuk mendapatkan perintah regex JavaScript untuk mengubah sesuatu "thisString"menjadi "This String"tetapi yang paling dekat saya adalah mengganti surat, menghasilkan sesuatu seperti "Thi String"atau "This tring". Ada ide?

Untuk memperjelas saya bisa menangani kesederhanaan memanfaatkan surat, aku hanya tidak sekuat dengan regex, dan membelah "somethingLikeThis"ke "something Like This"mana aku mengalami kesulitan.

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

menampilkan

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>

Saya memiliki minat kosong dalam hal ini, khususnya dalam menangani urutan modal, seperti di xmlHTTPRequest. Fungsi-fungsi yang terdaftar akan menghasilkan "Permintaan HTTP Xml" atau "Permintaan HTT Xml", milik saya menghasilkan "Permintaan 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(); })
}

Ada juga versi String.prototype di inti .

Ini dapat dilakukan secara ringkas dengan regex lookahead ( live demo ):

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

(Saya pikir gbendera (global) itu perlu, tetapi anehnya, tidak ada dalam kasus khusus ini.)

Menggunakan lookahead with splitmemastikan bahwa huruf kapital yang cocok tidak dikonsumsi dan menghindari berurusan dengan ruang terkemuka jika UpperCamelCase adalah sesuatu yang perlu Anda tangani. Untuk mengubah huruf besar dari huruf pertama, Anda dapat menggunakan:

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

The mapMetode array fitur ES5, tapi Anda masih dapat menggunakannya di browser lama dengan beberapa kode dari MDC . Atau, Anda dapat beralih di atas elemen array menggunakan forloop.

Saya pikir ini harus dapat menangani karakter huruf besar berturut-turut serta camelCase sederhana.

Misalnya: someVariable => someVariable, tetapi ABCCode! = Kode ABC.

Regex di bawah ini berfungsi pada contoh Anda tetapi juga contoh umum mewakili singkatan di 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"

Anda juga dapat menyesuaikan seperti di atas untuk menggunakan huruf kapital karakter pertama.

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

spacecamel ('somethingLikeThis')

// nilai yang dikembalikan: sesuatu Seperti Ini

Lodash menangani ini dengan baik_.startCase()

Solusi yang menangani angka juga:

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

Diuji di sini [JSFiddle, tidak ada perpustakaan. Tidak mencoba IE]; harus cukup stabil.

Jika Anda tidak peduli dengan peramban yang lebih lama (atau tidak keberatan menggunakan fungsi penurunan cadangan untuknya), ini dapat membagi string genap seperti 'xmlHTTPRequest' (tapi tentu saja yang seperti 'XMLHTTPRequest' tidak dapat).

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

Versi saya

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"

Coba solusi ini di sini -

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;

Bukan regex, tetapi berguna untuk mengetahui teknik biasa dan lama seperti ini:

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