자바스크립트로 문자열 앞의 0을 공백으로 바꾸는 방법

숫자를 나타내는 문자열을 입력받아, 맨 앞에 있는 0(선행 제로)을 공백으로 바꾸는 자바스크립트 함수를 작성해야 하는 경우가 있습니다. 이때 주의할 점은 숫자 앞에 원래 존재하던 공백은 그대로 유지해야 한다는 것입니다.

예를 들어 문자열 값이 다음과 같다고 가정해 보겠습니다.

"004590808"

그렇다면 출력 결과는 다음과 같아야 합니다.

"4590808"

정규 표현식으로 해결하기

이 문제는 정규 표현식을 활용하면 간단하게 해결할 수 있습니다. 핵심 아이디어는 다음과 같습니다.

• /^\s*0+/ : 문자열 시작 위치에서 0개 이상의 공백(\s*) 뒤에 하나 이상의 0(0+)이 이어지는 패턴을 찾습니다.
• 매칭된 부분의 길이를 계산한 후, 같은 길이만큼의 공백으로 대체합니다.
• 이렇게 하면 기존 공백은 그대로 보존되고, 선행 0만 공백으로 치환됩니다.

코드 예시

const str = ' 004590808';
const replaceWithSpace = str => {
   let replaced = '';
   const regex = new RegExp(/^\s*0+/);
   replaced = str.replace(regex, el => {
       const { length } = el;
       return ' '.repeat(length);
   });
   return replaced;
};
console.log(replaceWithSpace(str));

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

4590808

실제 반환된 문자열에는 선행 0이 동일한 길이의 공백으로 대체되어 그대로 남아 있습니다. 즉, 숫자의 정렬 상태는 유지되면서 앞쪽의 불필요한 0만 공백으로 치환됩니다. String.prototype.replace() 메서드와 RegExp, String.prototype.repeat()를 조합하면 별도의 반복문 없이도 깔끔하게 처리할 수 있다는 점이 이 방식의 장점입니다.