“camelCase”를“Camel Case”로 변환하는 방법?

내가 좋아하는 뭔가를 설정하는 자바 스크립트 정규식 명령을 얻기 위해 노력했습니다 "thisString"에 "This String"내가 가까이서 보는이 같은 결과 편지를 대체하지만, "Thi String"또는 "This tring". 어떤 아이디어?

문자를 대문자로 표기하는 단순성을 처리 할 수 ​​있음을 분명히하기 위해 RegEx만큼 강력하지 않으며 문제가있는 곳 "somethingLikeThis"으로 나눕니다 "something Like This".

"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(/([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>

특히 xmlHTTPRequest와 같은 일련의 대문자를 처리하는 데 유휴 관심이있었습니다. 나열된 함수는 "Xml HTTP Request"또는 "Xml HTTPRequest"를 생성하고, "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(); })
}

gist 에는 String.prototype 버전도 있습니다 .

이것은 정규식 lookahead ( live demo ) 로 간결하게 수행 할 수 있습니다 .

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

( g(전역) 플래그가 필요 하다고 생각 했지만 이상하게 도이 특별한 경우는 아닙니다.)

lookahead를 with와 함께 사용 split하면 일치하는 대문자가 사용되지 않고 UpperCamelCase가 처리해야하는 경우 선행 공백을 처리하지 않습니다. 각각의 첫 글자를 대문자로 사용하려면 다음을 사용할 수 있습니다.

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

map배열 방법은 ES5 기능입니다,하지만 당신은 여전히 함께 이전 버전의 브라우저에서 사용할 수 있습니다 MDC에서 일부 코드 . 또는 for루프를 사용하여 배열 요소를 반복 할 수 있습니다 .

나는 이것이 간단한 낙타 케이스뿐만 아니라 연속 대문자를 처리 할 수 ​​있어야한다고 생각합니다.

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

첫 번째 문자를 대문자로 바꾸려면 위와 같이 조정할 수도 있습니다.

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

spacecamel ( 'somethingLikeThis')

// 반환 값 : 이와 같은

Lodash 는 이것을 잘 처리합니다._.startCase()

숫자도 처리하는 솔루션 :

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]; 꽤 안정적이어야합니다.

구형 브라우저에 신경 쓰지 않거나 폴백 감소 기능을 사용하지 않아도되는 경우 '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(' ');
}

내 버전

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"

이 솔루션을 사용해보십시오-

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;

정규 표현식은 아니지만 다음과 같이 평범하고 오래된 기술을 아는 것이 유용합니다.

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