카멜케이스 문자 변환하기 📦 (\B 사용해보기)

카멜 케이스롤 표현한 문자를 대문자마다 공백을 추가한 문자로 변환하는 함수를 만들려고 했습니다.
예를 들면’MidnightBlue’ 👉🏻 ‘Midnight Blue’ 처럼요.

🐥 정규표현식을 사용해보자!

우리가 바꾸고 싶은 것은 소문자와 대문자가 연결되는 부분에 공백을 추가하려는 것입니다. 이때 사용할 수 있는 것이 \B 입니다.

\B는 문자와 문자 사이의 경계, 비문자와 비문자 사이의 경계를 의미합니다.

간단하게 예를 들어보면, ‘!-! abc’와 같은 문자열에서 비문자 사이에서 비문자(-)를 찾거나 문자 사이에서 문자(b)를 찾을 수 있습니다.

1
2
3

'!-! abc'.replace(/\B-\B/g, '!'); // '!!! abc'

'!-! abc'.replace(/\Bb\B/g, 'd'); // '!-! adc'

이 방법으로 문자와 문자 사이에서 대문자를 찾고, 공백을 추가해주면 될 것 같습니다.

1
2
3

function replaceCamelwithSpaces(colorName) {
  return colorName.replace(/\B([A-Z])\B/g, ' $1');
}

정규표현식에서 괄호로 묶게되면 그룹으로 캡쳐링이 가능해집니다. 정규식 패턴의 일부를 괄호 ()로 묶으면 캡처 그룹이 형성됩니다. 첫 번째 캡처 그룹은 ‘$1’, 두 번째 캡처 그룹은 ‘$2’ 등으로 참조되는 거죠.

replace를 할 때, 기존의 대문자가 사라지면 안되기 때문에 캡쳐링을 해놓고 참조를 해야합니다.

정규표현식의 세계는 무궁무진한 것 같습니다..🤯