[JavaScript][정규식] 숫자에 1000단위로 콤마(쉼표 ,) 구분자 넣기

목표

• 정규식에 대한 이해, 간단 학습
• 일반 숫자 콤마(,) 구분자 넣기

구현 코드

정답부터 알려주자면 다음과 같다.

// x는 숫자
function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

1. 문자 변환

우선, 정규식을 사용하기 위하여
그리고 구분자가 포함된 새로운 문자열을 얻기 위하여 toString함수를 사용해 문자열로 변환해준다.

2. 조건에 맞는 문자를 찾아 대체

우리는 1000단위로 끊어, 콤마(,)를 삽입해야 한다.
즉, 특정 패턴을 찾아 새로운 문자열로 대체해야 한다.
JS에선 이러한 기능을 제공하는 replace 메소드가 있다.

String.prototype.replace()
: replace() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다.
그 패턴은 문자열이나 정규식(RegExp)이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있습니다.

구문

var newStr = str.replace(regexp|substr, newSubstr|function)

매개변수

 

1. regexp / substr (pattern)
   정규식 객체 또는 리터럴, String으로, 대체하고자 하는 패턴(값)을 지정한다.
2. newSubStr / function (replacement)
   첫번째 파라미터를 대신할 문자열(String) 혹은 대체 패턴, 새 하위 문자열을 생성하기 위해 호출되는 함수.

우리의 코드

우리는 특정 패턴을 찾아 ,을 삽입할 예정이므로 다음과 같이 선언!

replace([정규식], ',');

3. 정규 표현식으로 패턴 지정

우리의 정규표현식은 다음과 같다.

/\B(?=(\d{3})+(?!\d))/g,

정규표현식은 왜 이렇게 나오는지 나눠서 접근해보자

1) 생성하기

우선 정규표현식을 생성하는 방법은 두가지인데,

1. 정규식 리터럴(슬래쉬/로 감싸는 패턴)을 사용하는 방법
2. RegExp 객체의 생성자 함수를 호출하는 방법

이 있다. 우리는 이 중 1번 방법을 사용할 예정이다.

2) 정규식 패턴 작성하기

정규식 패턴은 \\안에 작성한다.
우리가 구분자를 넣기 위한 위치는 다음과 같은 조건을 통해 찾을 수 있다.

(앞 = 문자 존재),(뒤 = 문자열 3글자)

따라서, 우리는 특수문자를 사용해 이러한 조건을 만족하는 정규식 패턴을 생성할 것이다.

특수문자 조건

1. 앞 = 문자 존재(시작이 경계가 아닌 부분 찾기) : \B
   • 사용 특수문자
     • \B : 단어 경계가 아닌 부분에 대응
   • 여기서 경계는 1234에서 1 앞 과 4 뒤를 의미한다. 즉, 시작과 끝이다.
   • 우리가 구분자를 삽입할 부분앞에는 무조건 문자가 하나 이상 있어야 하므로 해당 조건을 넣어준다.
2. 뒤 = 문자열 3글자 : (\d{3})
   • 사용 특수문자
     • (x) : 'x'에 대응되고, 그것을 기억
     • \d : 숫자 문자에 대응 [0-9]와 동일
     • {n} : 앞 표현식이 n번 나타나는 부분에 대응
   • 즉, (\d{3})는 숫자가 3번 나타나는 부분에 대응되는 것을 기억해라. 라는 의미
   • 하지만, 이 경우 3333와 같이 3글자 이상인 모든케이스에 적용된다.
3. 뒤 = 문자열 3글자 초과는 안됨! : (\d{3})+(?!\d)
   • 사용 특수문자
     • + : 앞의 표현식이 1회 이상 연속으로 반복되는 부분과 대응
     • x(?!y) : 'x'뒤에 'y'가 없는경우에만 'x'에 일치
     • \d : 숫자 문자에 대응 [0-9]와 동일
   • 즉, (?!\d)는 뒤에 더이상 숫자가 없는 경우 라는 의미
   • 뒤 = (\d{3})+(?!\d)는 숫자가 3번만 나타나는 부분을 의미
4. 앞 + 뒤 조건 모두 만족 : \B(?=(\d{3})+(?!\d))
   • 사용 특수문자
     • x(?=y) : 오직 'y'가 뒤따라오는 'x'에만 대응
   • 앞(1번)과 뒤(3번)의 조건을 합쳐준다.

3) 플래그 사용하여 고급검색

정규식은 플래그를 설정하여 검색 조건을 달리 할 수 있는데, 각 플래그는 조합 가능하다.

1. g: 전역 검색
2. i : 대소문자 구분 없는 검색
3. m : 다중행(multi-line) 검색
4. s : .에 개행 문자도 매칭(ES2018)
5. u : 유니코드; 패턴을 유니코드 코드 포인트의 나열로 취급합니다.
6. y : "sticky" 검색을 수행. 문자열의 현재 위치부터 검색을 수행합니다. sticky 문서를 확인하세요.

우리는 전역 검색을 수행하기 위해 정규식 패턴뒤에 플래그 g를 선언해주었다.

결과

이렇게 성공~!

Reference

더 깊은 JS 정규식 이해를 위해선 다음과 같은 문서를 반드시 학습할 것을 권장합니다.

1. MDN / 정규 표현식 만들기
2. MDN / JS 정규 표현식 객체(RegExp) 생성
3. Web Bos / 포스팅에서 구현한 함수를 사용하는 예제