如何將“camelCase”轉換為“CamelCase”？

Question

我一直在嘗試使用 JavaScript 正則表達式命令將諸如"thisString"轉換為"This String"但我得到的最接近的是替換一個字母，從而產生諸如"Thi String"或"This tring" 。 有任何想法嗎？

為了澄清我可以處理大寫字母的簡單性，我對 RegEx 沒有那么強，並且將"somethingLikeThis"拆分為"something Like This"是我遇到麻煩的地方。

Answer 1

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

顯示

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(/([AZ])/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>

Answer 2

我對此有興趣，尤其是在處理大寫字母序列方面，例如在 xmlHTTPRequest 中。 列出的函數會產生“Xml HTTP 請求”或“Xml HTTPRequest”，我的會產生“Xml HTTP 請求”。

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

gist 中還有一個 String.prototype 版本。

Answer 3

這可以通過 regex lookahead ( live demo ) 簡潔地完成：

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

（我認為g （全局）標志是必要的，但奇怪的是，它不是在這種特殊情況下。）

如果您需要處理 UpperCamelCase，則使用帶有split前瞻可確保不消耗匹配的大寫字母並避免處理前導空格。 要將每個字母的首字母大寫，您可以使用：

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

map數組方法是 ES5 的一項功能，但您仍然可以使用MDC 中的一些代碼在舊瀏覽器中使用它。 或者，您可以使用for循環遍歷數組元素。

Answer 4

我認為這應該能夠處理連續的大寫字符以及簡單的駝峰式。

例如：someVariable => someVariable，但 ABCCode != ABC Code。

下面的正則表達式適用於您的示例，也是在 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"

您也可以按上述方式調整以大寫第一個字符。

Answer 5

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

spacecamel('somethingLikeThis')

// 返回值：像這樣的東西

Answer 6

Lodash使用_.startCase()很好地處理了這個問題

Answer 7

一個處理數字的解決方案：

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

在這里測試 [JSFiddle，沒有庫。 沒試過IE]; 應該很穩定。

Answer 8

如果您不關心舊瀏覽器（或者不介意為它們使用回退reduce函數），這甚至可以拆分像 'xmlHTTPRequest' 這樣的字符串（但肯定不能像 '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(' ');
}

Answer 9

我的版本

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"

Answer 10

在這里嘗試這個解決方案 -

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;

Answer 11

const value = 'camelCase';
const map = {};
let index = 0;
map[index] = [];
for (let i = 0; i < value.length; i++) {
  if (i !== 0 && value[i] === value[i].toUpperCase()) {
    index = i;
    map[index] = [];
  }
  if (i === 0) {
    map[index].push(value[i].toUpperCase());
  } else {
    map[index].push(value[i]);
  }
}
let resultArray = [];
Object.keys(map).map(function (key, index) {
  resultArray = [...resultArray, ' ', ...map[key]];
  return resultArray;
});
console.log(resultArray.join(''));

Answer 12

不是正則表達式，但有助於了解像這樣的簡單和古老的技術：

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