이렇게 상품 가격을 표기해야하는 경우, 일일히 천단위를 마크업할 필요가 없다. 이때 자바스크립트로 천단위를 구분해줄 수 있는데...
1. 문자 변환
정규식을 사용하기 위하여,
구분자가 포함된 새로운 문자열을 얻기위하여 tostring 함수를 사용해 문자열을 변환해준다.
2. 조건에 맞는 문자를 찾아 대체
우리는 1000단위로 끊어, 콤마(,)를 삽입해야한다.
즉, 특정 패턴을 찾아 새로운 문자열로 대체해야한다.
*JS에선 이러한 기능을 제공하는 replace 메소드가 있음.
String.prototype.replace()
replace() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환한다.
그 패턴은 문자열이나 정규식(RegExp)이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있다.
var newStr = str.replace(regexp|substr, newSubstr|function)
//매개변수 : 둘 사이에서 양편의 관계를 맺어주면서, 어떤 관계나 범위 안에서 여러가지 값으로 변할 수 있는 가변적 요소
-
regexp / substr (pattern)
정규식 객체 또는 리터럴, String으로, 대체하고자 하는 패턴(값)을 지정한다. -
newSubStr / function (replacement)
첫번째 파라미터를 대신할 문자열(String) 혹은 대체 패턴, 새 하위 문자열을 생성하기 위해 호출되는 함수.
3. 정규 표현식으로 패턴 지정
/\B(?=(\d{3})+(?!\d))/g,1) 생성하기
- 정규식 리터럴(슬래쉬/로 감싸는 패턴)을 사용하는 방법
- RegExp 객체의 생성자 함수를 호출하는 방법
2) 정규식 패턴 작성하기
정규식 패턴은 \안에 작성한다.
우리가 구분자를 넣기 위한 위치는 다음과 같은 조건을 통해 찾을 수 있다.
(앞 = 문자 존재),(뒤 = 문자열 3글자)따라서, 우리는 특수문자를 사용해 이러한 조건을 만족하는 정규식 패턴을 생성할 것이다.
특수문자 조건
- 앞 = 문자 존재(시작이 경계가 아닌 부분 찾기) : \B
- 사용 특수문자
\B : 단어 경계가 아닌 부분에 대응 - 여기서 경계는 1234에서 1 앞 과 4 뒤를 의미한다. 즉, 시작과 끝이다.
- 우리가 구분자를 삽입할 부분앞에는 무조건 문자가 하나 이상 있어야 하므로 해당 조건을 넣어준다.
- 뒤 = 문자열 3글자 : (\d{3})
- 사용 특수문자
(x) : 'x'에 대응되고, 그것을 기억
\d : 숫자 문자에 대응 [0-9]와 동일
{n} : 앞 표현식이 n번 나타나는 부분에 대응 - 즉, (\d{3})는 숫자가 3번 나타나는 부분에 대응되는 것을 기억해라. 라는 의미
- 하지만, 이 경우 3333와 같이 3글자 이상인 모든케이스에 적용된다.
- 뒤 = 문자열 3글자 초과는 안됨! : (\d{3})+(?!\d)
- 사용 특수문자
- : 앞의 표현식이 1회 이상 연속으로 반복되는 부분과 대응
x(?!y) : 'x'뒤에 'y'가 없는경우에만 'x'에 일치
\d : 숫자 문자에 대응 [0-9]와 동일
- 즉, (?!\d)는 뒤에 더이상 숫자가 없는 경우 라는 의미
- 뒤 = (\d{3})+(?!\d)는 숫자가 3번만 나타나는 부분을 의미
- 앞 + 뒤 조건 모두 만족 : \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 문서를 확인하세요.
