[JS] 자바스크립트 정규식으로 천 단위 구분자 추가하기 (단어 경계, 전후방탐색)

큰 숫자를 읽기 쉽게 만들기 위해 일반적으로 천 단위마다 콤마(,)같은 구분자를 추가한다. 천 단위 구분은 한국을 포함한 많은 국가에서 표준으로 사용하는 숫자 표기법이다.

 

자바스크립트에선 Number.toLocaleString() 혹은 Intl.NumberFormat 메서드를 이용하면 구분자를 추가할 수 있다. 참고로 이 메서드들은 기본적으로 실행 환경의 로케일 설정을 따르기 때문에 로케일에 따라 결과가 달라질 수도 있다. 예를 들어 독일 로케일(de-DE)은 천 단위 구분자로 온점(.)을 사용하고, 소수점 구분자로 콤마(,)를 사용한다. — 참고 포스팅

const number = 123456.789;

// 로케일을 지정하지 않으면 기본 로케일(navigator.language)을 따른다
Intl.NumberFormat().format(number); // '123,456.789'
// 미국, 한국 등의 나라는 천 단위 구분자로 콤마(,)를 사용하고 소수점 구분자로 점(.)을 사용한다
Intl.NumberFormat("ko-KR").format(number); // '123,456.789'
// 독일은 천 단위 구분자로 점(.)을 사용하고 소수점 구분자로 콤마(,)를 사용한다
Intl.NumberFormat("de-DE").format(number); // '123.456,789'

// 로케일을 지정하지 않으면 기본 로케일(navigator.language)을 따른다
number.toLocaleString(); // '123,456.789'
// 미국, 한국 등의 나라는 천 단위 구분자로 콤마(,)를 사용하고 소수점 구분자로 점(.)을 사용한다
number.toLocaleString("ko-KR"); // '123,456.789'
// 독일은 천 단위 구분자로 점(.)을 사용하고 소수점 구분자로 콤마(,)를 사용한다
number.toLocaleString("de-DE"); // '123.456,789'

 

한편, 정규식을 이용해서 천 단위 구분자를 추가할 수도 있는데, 동작 방식을 이해하려면 단어 경계, 전방 탐색, 부정 전방 탐색 등의 개념을 알고 있어야 한다. 아래 내용을 통해 자세히 알아보자.

'1234567'.replace(/\B(?=(\d{3})+(?!\d))/g, ","); // '1,234,567'

 

• \B : 단어 경계가 아닌 위치
• (?=...) : 전방 탐색
• (\d{3})+ : 3개의 숫자로 이뤄진 그룹이 한 번 이상 반복
• (?!...) : 부정 전방 탐색

 

 

단어 경계 | Word Boundaries

---

💡 참고 내용

• \w 단어 문자 : 알파벳 대소문자, 숫자, 언더스코어(_)
• \W 비단어 문자 : 단어 문자가 아닌 모든 문자 (온점, 콤마, 공백 등)

 

\b 메타 문자는 단어 경계를 나타내며, 단어 문자(\w)와 비단어 문자(\W) 사이의 위치를 가리킨다. 즉, 단어의 시작이나 끝을 나타낸다(앞/뒤에 다른 단어 문자가 없는 위치). 예를 들어 hello world. 문자열의 단어 경계는 아래와 같다(수직선 | 으로 표기한 곳).

 

 

아래 예시의 정규식은 \b 메타 문자를 이용해 cat 앞/뒤에 다른 단어 문자가 없는 위치를 찾고 있다.

const reg = /\bcat\b/;

// cat 앞/뒤에 단어 문자가 없으므로 매칭
"I have a cat.".match(reg); // ['cat', index: 9, ...]
// cat 뒤에 단어 문자가 있으므로 매칭 안됨
"The catalog is here.".match(reg); // null

 

첫 번째 문장 I have a cat. 에서 cat 뒤에 온점(.)이 있지만, 온점은 단어 문자가 아니므로 단어 경계로 간주한다. 두 번째 문장의 catalog는 cat 뒤에 단어 문자 a가 있으므로 매칭되지 않는다.

 

반대로 \B 메타 문자는 비단어 경계를 나타내며, 단어 경계가 아닌 위치를 찾는다. \b 단어 경계가 가리키는 곳을 제외한 나머지 부분을 나타내기 때문에 아래 위치를 모두 포함한다.

 

1. 두 단어 문자 사이
2. 두 비단어 문자 사이
3. 비단어 문자와 문자열 시작/끝 사이

 

hello world. 문자열에서 단어 경계가 아닌 곳은 아래와 같다(수직선 | 으로 표기한 곳).

 

 

아래 예시의 정규식은 \B 메타 문자를 이용해 cat 앞/뒤에 다른 단어 문자가 있는 위치를 찾고 있다.

const reg = /\Bcat\B/;

// cat 앞/뒤 모두 비단어 경계가 아니므로(단어 경계이므로) 매칭 안됨
"I have a cat.".match(reg); // null
// cat 앞이 비단어 경계가 아니므로(단어 경계이므로) 매칭 안됨
"The catalog is here.".match(reg); // null
// cat 앞/뒤 모두 비단어 경계이므로(단어 경계가 아니므로) 매칭
"I have a concatenate.".match(reg); // ['cat', index: 12, ...]

 

 

전후방탐색 | Lookaround

---

전후방탐색은 특정 패턴 앞 혹은 뒤에 있는 텍스트를 찾을 때 사용한다. 전후방탐색 구문에서 괄호에 포함된 식은 결과에 포함되지 않는 점에 주의하자(매칭 결과에 포함 안됨).

 

전방 탐색 | Lookahead

$x(?=y)$

 

전방 탐색은 y(패턴)가 뒤에 오는 x를 찾는다. 즉, x 뒤에 y가 오는 경우에만 x와 매칭한다. 여기서 정규식 엔진은 x를 먼저 찾은 후, x 바로 뒤에 y 패턴과 일치하는지 확인한다.

 

아래 예시에선 1회 이상 반복되는 숫자(\d+)를 찾은 후, 숫자 바로 뒤에 € 기호가 있는지 확인한다. € 기호가 있다면 패턴과 일치하므로 해당 숫자가 매칭 결과에 포함된다.

// 전방 탐색을 이용하여 € 기호가 뒤에 있는 1자리 이상의 숫자를 찾는 예시
const str = "1 turkey costs 30€";
str.match(/\d+(?=€)/); // ['30', index: 15, ...]

 

x(?=y)(?=z) 처럼 전방 탐색을 연속해서 사용할 수도 있는데, 이땐 x 뒤에 y,z가 동시에 나타나는 경우에만 매칭한다. 작동 과정은 아래와 같다.

 

1. x를 찾는다.
2. x 바로 뒤에 y가 있는지 찾는다.
3. x 바로 뒤에 z가 있는지 찾는다.
4. 2~3번 테스트를 모두 통과하면 x가 매칭된다.

 

아래 예시에선 1회 이상 반복되는 숫자 뒤에 공백이 있고, 그 이후 어딘가에 30이 있는 경우 매칭된다.

const str = "1 turkey costs 30€";
str.match(/\d+(?=\s)(?=.*30)/); // ['1', index: 0, ...]

 

• 첫 번째 전방 탐색 : \d+ 뒤에 공백(\s)이 있는지 확인
• 두 번째 전방 탐색 : \d+ 뒤에 임의 문자(.)가 0번 이상 반복(*)된 후 30이 있는지 확인

 

부정 전방 탐색 | Negative lookahead

$x(?!y)$

 

부정 전방 탐색은 y(패턴)가 뒤에 오지 않는 x를 찾는다. 즉, x 뒤에 y가 없는 경우에만 x와 매칭한다. 아래 예시에선 € 기호가 뒤에 나타나지 않는 1회 이상 반복되는 숫자와 매칭한다.

const str = "2 turkey costs 60€";
str.match(/\d+(?!€)/); // ['2', index: 0, ...]

 

후방 탐색 | Lookbehind

전방 탐색이 '다음에 오는 것'에 대한 조건이었다면, 후방 탐색은 '이전에 온 것'에 대한 조건이다. 

 

• 후방 탐색 : (?<=y)x — x 앞에 y가 있는 경우에만 x와 매칭
• 부정 후방 탐색 : (?<!y)x — x 앞에 y가 없는 경우에만 x와 매칭

 

const str = "2 turkey costs $30";

// 후방 탐색을 이용해 달러 기호($)가 앞에 있는 숫자와 매칭 (금액 찾기)
str.match(/(?<=\$)\d+/); // ['30', index: 16, ...]

// 부정 후방 탐색을 이용해 달러 기호($)가 앞에 없는 숫자와 매칭 (수량 찾기)
str.match(/(?<!\$)\d+/); // ['2', index: 0, ...]

 

 

천 단위 구분자 정규식 분석

---

이제 위 정규식이 어떻게 동작하는지 알아보자. x(?=y) 전방 탐색은 y 패턴이 뒤에 오는 x를 찾기 때문에 비단어 경계 \B 위치를 찾는 것으로 시작한다. 그 후 문자열 왼쪽에 있는 비단어 경계부터 3자리 숫자 그룹이 1회 이상 반복되는지 확인한다.

 

❶ 1234567의 비단어 경계(\B)를 찾는다(수직선 | 으로 표기한 곳).

 

❷ 비단어 경계 바로 뒤부터 3자리 숫자 그룹이 1회 이상 반복되는지 확인한다. ...(?!\d) 부정 전방 탐색은 뒤에 숫자가 없는 위치를 의미하므로, 정확히 3자리 숫자 그룹이 문자열 마지막까지 반복돼야만 매칭된다.

 

• 1번째 비단어 경계(1과 2 사이) 3자리 숫자 그룹 : {234}, {567} — ✅
• 2번째 비단어 경계(2와 3 사이) 3자리 숫자 그룹 : {345}, {67} — ❌
• 3번째 비단어 경계(3과 4 사이) 3자리 숫자 그룹 : {456}, {7} — ❌
• 4번째 비단어 경계(4와 5 사이) 3자리 숫자 그룹 : {567} — ✅
• 5번째 비단어 경계(5와 6 사이) 3자리 숫자 그룹 : {67} — ❌
• 6번째 비단어 경계(6과 7 사이) 3자리 숫자 그룹 : {7} — ❌

 

❸ 매칭되는 비단어 경계 위치(1, 4번째)에 콤마(,)로 교체(추가)한다.

 

만약 ...(?!\d) 부정 전방 탐색을 제거한다면? 정규식은 더 이상 숫자의 끝을 확인하지 않기 때문에 3자리 숫자 그룹이 1회만 반복되면 항상 매칭된다. 그럼 4번째 비단어 경계까지 콤마가 모두 추가되는 문제가 발생한다.

 

 

번외

---

replacer 함수

String.replace(pattern, replacement) 함수의 두 번째 인자에 replacer 함수를 사용할 수도 있다. replacer 함수는 매칭되는 부분이 있을 때마다 호출되기 때문에 교체 작업을 더 유연하게 처리할 수 있다.

function replacer(match, p1, p2, /* ..., */ pN, offset, string, groups) {
  // ...
}

 

1. match : 매칭된 문자열
2. p1, p2, … : 각 캡처 그룹에 해당하는 문자열 (괄호로 감싼 부분)
   예시) /(a)|(b)/ 같은 정규식에서 (a) 그룹만 매칭될 경우 p2는 undefined
3. offset : match 문자열의 첫 번째 인덱스(원본 문자열 기준)
   예시) abcd 문자열에서 bc가 매칭됐다면 offset은 1
4. string : 원본 문자열
5. groups : 이름이 지정된 캡처 그룹을 포함한 객체 (ES2018에서 도입, 미지원시 undefined)
   예시) /(?<name>a)/ 정규식에서 groups 객체는 { name: 'a' }

 

function replacer(match, p1, p2, p3, offset, string, groups) {
  console.log(match);         // 2024-07-17
  console.log(p1);            // 2024
  console.log(p2);            // 07
  console.log(p3);            // 17
  console.log(offset);        // 26 -> 매칭된 부분의 시작 인덱스
  console.log(string);        // The event is scheduled on 2024-07-17.
  console.log(groups);        // {day: '17'} -> (?<day>\d{2}) 부분
  return `${p3}/${p2}/${p1}`; // DD/MM/YYYY 형식으로 변환
}

const str = 'The event is scheduled on 2024-07-17.';
const regex = /(\d{4})-(\d{2})-(?<day>\d{2})/;
const newStr = str.replace(regex, replacer);

console.log(newStr); // 'The event is scheduled on 17/07/2024.'

 

match vs matchAll

match 메서드와 g 플래그를 함께 사용하면 캡처 그룹이 결과 배열에 포함되지 않는다. g 플래그를 사용했을 때 캡처 그룹도 결과 배열에 포함하려면 matchAll 메서드를 사용해야 한다.

 

• g 플래그 없이 match 메서드 사용 : [최초 매칭 결과, (최초 매칭의 캡처 그룹)]
• g 플래그와 함께 match 메서드 사용 : [모든 매칭 결과] — 캡처 그룹 미포함
• matchAll 메서드 사용(g 플래그 필수) : [모든 매칭 결과, (각 매칭의 캡처 그룹)]

 

const str = "hello1 hello2 hello3";

// g 플래그 없이 match 메서드 사용
const result1 = str.match(/(hello\d)/);
console.log(result1);
// ["hello1", "hello1"] (최초 매칭 결과, 최초 매칭의 캡처 그룹)

// g 플래그와 함께 match 메서드 사용
const result2 = str.match(/(hello\d)/g);
console.log(result2);
// ["hello1", "hello2", "hello3"] (모든 매칭 결과)

// matchAll 메서드 사용 (matchAll은 이터러블 객체를 반환한다)
const result3 = [...str.matchAll(/(hello\d)/g)];
console.log(result3);
/*
[
  ["hello1", "hello1", index: 0, ...], (첫번째 매칭 결과, 첫번째 매칭의 캡처 그룹)
  ["hello2", "hello2", index: 7, ...], (두번째 매칭 결과, 두번째 매칭의 캡처 그룹)
  ["hello3", "hello3", index: 14, ...] (세번째 매칭 결과, 세번째 매칭의 캡처 그룹)
]
*/

 

 

레퍼런스

---

• Lookahead and lookbehind | JavaScript Info
• What are non-word boundary in regex (\B), compared to word-boundary?  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요