[JS] 카멜표기법으로 표기된 문자열에 공백을 추가하는 2가지 방법

포스트 목적

문자열 사이에 공백을 추가해야 하는 상황이 발생하였는데, 이에 방법을 찾아보고 이를 나중에 다시 확인하기 쉽도록 정리한 포스트입니다.

문자열에 공백을 추가한다는 것은..

예를 들어, 카멜표기법으로 표기된 문자열에 공백을 추가하여 출력해야 하는 상황에서 활용할 수 있습니다. 즉, 다음과 같이 카멜표기법으로 할당되어 있는 문자열이 있다면,

const string = "RedColor"

 

 

아래와 같이  대문자 사이에 공백을 추가하여 출력할 필요가 있는 상황에서 사용할 수 있습니다.

Red Color

방법1) 정규표현식 사용

첫 번째 방법은 정규표현식을 사용하는 것입니다. 정규표현식은 적은 코드수로 효율적인 문자열 처리가 가능하기 때문에 긴 문자열을 처리해야 하는 상황에서 일반적인 문자열 메서드를 사용하여 표현하는 것 보다 더 효율적 일 수 있습니다.

const string = "RedColor";

// replace(정규표현식,찾은 문자열을 대체할 문자열 혹은 참조 변수 )
const newString = string.replace(/([a-z])([A-Z])/g, '$1 $2');
console.log(newString); // "Red Color"

//참고로  '$1 $2' 이 부분을  '$1$2' 으로 표현하면 RedColor 그대로 출력됩니다.

 

 

위 코드에서 사용된 정규식 /([a-z])([A-Z])/g은 소문자로 시작하고 대문자로 끝나는 문자열 패턴을 찾습니다. replace() 메서드는 이러한 패턴에 일치하는 문자열을 찾아 두 문자열 사이에 공백을 추가합니다.

$1과 $2는 각각 정규식의 첫 번째 그룹과 두 번째 그룹에 해당하는 값을 참조합니다. 그룹은 '괄호()'로 묶인 문자열 패턴을 나타냅니다.

 

즉, (  ) 로 구분된 문자열을 참조하는 $1, $2는 찾은 첫 번째 그룹과 두 번째 그룹을 공백으로 구분하여 새로운 문자열로 바꿉니다.

따라서, 위의 코드에서 newString 변수는 "Red Color" 문자열을 할당받게 됩니다.

 

Q.  /([a-z])([A-Z])/g 은 뭐죠?

위는 정규표현식을 의미합니다. 정규식은 문자열에서 특정한 패턴을 찾는 기술로, /패턴/과 같은 형식으로 표현됩니다. 해당 코드에서 사용된 정규식은 아시겠지만 /([a-z])([A-Z])/g입니다. 이 정규식은 다음과 같은 의미를 가집니다.

 

• ([a-z]): 소문자 알파벳(a~z) 하나를 의미하는 그룹을 찾습니다. 괄호(())로 그룹을 지정합니다.
• ([A-Z]): 대문자 알파벳(A~Z) 하나를 의미하는 그룹을 찾습니다. 괄호(())로 그룹을 지정합니다.
• /g: 전역(global) 검색을 수행합니다. 이 옵션을 추가하지 않으면 첫 번째 패턴만 검색합니다.

 

Q.  $1과 $2  는 뭘 의미하는가요?

$1, $2, $3 등은 정규식에서 괄호로 묶인 그룹을 참조하는데 사용되는 특별한 변수입니다. 이러한 변수를 "캡처 그룹"이라고도 합니다.

예를 들어, 정규식 /(\w+)\s(\w+)/는 두 개의 단어를 검색하는데 사용됩니다. 여기서 ( )를 사용하여 두 개의 그룹을 만들었습니다. 첫 번째 그룹은 (\w+)이고, 두 번째 그룹은 \s(\w+)입니다.

const str = "hello world";
const newStr = str.replace(/(\w+)\s(\w+)/, "$2 $1");
console.log(newStr); // "world hello"

이제 이 정규식을 사용하여 문자열 "hello world"를 검색하면, $1은 "hello"를 나타내고, $2는 "world"를 나타냅니다.  앞서 정규표현식이 무엇을 의미하는지 궁금하실 수도 있을 것 같아서 간략하게 설명하고 넘어가겠습니다.

 

• /(\w+)\s(\w+)/는 정규식 패턴(pattern)입니다. 이 패턴은 두 개의 그룹을 만들어내며, 각각 (\w+)과 \s(\w+)로 구성됩니다.
• (\w+): 1개 이상의 단어 문자(word character)를 찾습니다. 단어 문자는 알파벳, 숫자, 밑줄(_) 문자를 의미합니다. +는 1개 이상의 문자를 의미합니다. 그룹을 만들기 위해 ()를 사용합니다.
• \s: 공백 문자(space character)를 찾습니다.
• (\w+): 다시 1개 이상의 단어 문자를 찾습니다. 그룹을 만들어 줍니다.

 

따라서, /(\w+)\s(\w+)/는 "한 개 이상의 단어 문자가 나오고( (\w+) ) 그 다음에 공백 문자( \s )가 나오며, 또 다시 한 개 이상의 단어 문자( (\w+) )가 나오는" 문자열 패턴을 찾는 정규식입니다. 이를 사용하면 예를 들어 "hello world"와 같은 문자열에서 "hello"와 "world"라는 두 개의 그룹을 추출할 수 있습니다.

 

방법2) indexOf() 와 slice() 를 활용

이 방법은 자바스크립트 자체적으로 제공되는 일반적인 문자열 메서드를 사용해서 공백을 추가하는 방법입니다. 간략하게 우선 말씀 드리면, indexOf() 메서드를 사용해서, 대문자로 시작하는 문자(char)가 있는 인덱스를  찾고, slice() 메서드로 앞서 구한 문자의 앞 까지를 $1 , 그 이후를 $2로 구분하고, $1과 $2 사이에 빈문자열(공백)을 추가하는 방식입니다.

 

위를 코드로 표현해보겠습니다.

const string = "RedColor";
// 문자열에서 Color 를 포함하는 즉, 'C'로 시작하는 문자열의 위치를 찾습니다.
const index = string.indexOf("Color");

// slice 메서드를 사용하여 0~index-1 까지의 문자열, index를 포함한 끝까지의 문자열을 찾고
// 해당 문자열 사이에 "  " 을 추가합니다.
const newString = string.slice(0, index) + " " + string.slice(index);

// 앞서 구한 문자열 사이에 공백이 추가되어 출력됩니다.
console.log(newString); // "Red Color"

 

마무리

이 외에도 다양한 방법이 있겠지만, 상황에 따라서 알맞은 방식을 사용하시면 좋을 것 같습니다.