JavaScript 강의를 듣던 중 아래와 같이 특정 문자를 찾아서 삭제하는 코드를 만들었다.
const convertPriceToNumber = (event) => { const formattedString = String(event.target.value).replace("원", "").replace(",", ""); ... };
이 코드의 동작은 간단히, 1,000원과 같이 ","와 "원"이 있으면, 그것을 ""(빈 값)으로 바꾸는 것이다. 상기 코드의 문제점은 만약에 ","(콤마)가 2개가 있으면, 앞의 콤마만 빈 값으로 바뀌고 뒤에 있는 콤마는 바뀌지 않는다는 것이다.
1,000,000원 인 경우에 위의 코드로 "원"과 ","를 삭제하면, 1000,000이 된다.
그렇다면 콤마를 어떻게 삭제할 수 있을까? 위의 코드처럼 replace(",","")메서드를 한 번 더 붙이면 될까? 콤마가 2개까지만 표시된다면 제대로 동작할 것이다. 하지만 콤마가 3개가 되는 경우, 1,000,000,000원이 된다면 또 콤마 1개가 제대로 삭제되지 않을 것이다.
1,000,000,000원 → 1000000,000
이걸을 해결하기 위해 또 replace메서드를 붙이는 건 너무 비효율적이다. 그렇다면 어떤 방법을 쓰면 될까? replace의 NDM 문서를 살펴보자.
문서를 살펴보면 replace메서드의 매개변수로, 특히 일치하는 구문을 찾는 pattern으로 전달할 수 있는 변수가 2가지 있다. 한 가지는 substr로 앞서 문자열로 패턴을 찾은 방식이다. 다른 방식은 regexp로 정규식이란는 방식이다. substr은 오직 첫 번째 일치되는 문자열만 교체되므로 이 문제를 해결할 수 없을 것 같다.
그렇다면 regexp(정규식)은 어떨까?
먼저 정규식이 무엇인지 알아보자!
정규식
정규식 기초
MDN 문서에는 정규식을 문자열에서 특정 문자 조합을 찾기 위한 패턴이라고 정의했다. 뭔가 원하는 방향인 것 같아 보인다. 그렇다면 어떻게 표현식을 만드는지 알아보자.
정규식 만들기
슬래시로 패턴을 감싸서 작성
const re = /abc/RegExp 객체 호출
const re = new RegExp('abc')
실제로 한 번 사용해보자. abcdefg에서 c를 대문자 C로 교체하려고 한다. 아래처럼 코드를 만들면 쉽게 바꿀 수 있다.
const str = 'abcdefg' const re = /c/ const capitalC = str.replace(re, 'C');
abCdef로 원하는 대로 c가 대문자 C로 잘 교체가 되었다. 추가로 메서드에 사용할 때, 꼭 정규식을 변수에 넣어서 사용하지 않아도 된다. replace(/c/,"C")로 사용해여도 똑같은 결과가 나온다.
정규식 심화
위와 같이 정규식을 사용하면, 사실 그냥 문자열을 넣는 것과 다를게 없다. 정규식의 강력한 점은 정규식 플래그와 정규식 패턴에 있다. 너무 많으니 일단 어떤 것들이 있는지 정리부터 하겠다.
정규식 플래그
특정 문자 숫자 매칭 패턴!
검색기준 패턴
개수 반복 패턴
그룹 패턴
(사실 다 어떤 역할을 하는지 모른다. 사용하다 보면 알게 되겠지)
그렇다면 드디어 사용 방법을 알아보자!
(연습 사이트: https://regexr.com/)
예제1
→ \d는 숫자 매칭 패턴이므로, 가장 먼저 나오는 숫자 0이 매칭된다. 모든 숫자를 매칭하기 위해서는 전역 검사를 하는 g 플래그를 붙이면 된다.
→ '010', '1234', '5678' 모두 매칭된다. 하이픈(-)까지 모두 매칭해보자.
→ []는 or을 나타낸다. 즉, 숫자(
\d) or 하이픈(-)을 모두 찾아내는 식이다.
예제2
→ 전체 문자 중에서 대문자만 찾았다. 소문자도 함께 검색하려면 아래의 3가지 방법이 있다.
/[a-zA-Z]/g,/\w/g,/[A-Z]/gi
셋 다 동일하게 대문자와 소문자를 함께 찾는다.
매우 간단한 예제들이다. 이것보다 훨씬 복잡하게 패턴을 작성해서 매칭할 수도 있다.
마무리
가장 첫 문제로 돌아가보자. 여러 개의 콤마와 원을 찾아야 한다. 그렇다면 다음과 같이 정규식을 작성하면 된다.
/[,원]/g
[]안에 있으니 "," 혹은 "원"을 찾을 것인데, 플래그 g가 적용되어 있으니, 문자열 내에서 복수의 패턴이 있더라도 다 찾아낼 것이다. 그래서 코드는 다음과 같이 바꾸면된다.
const convertPriceToNumber = (event) => { const formattedString = String(event.target.value).replace(/[,원]/g, "") ... };
이렇게 바꾸면 콤마가 몇 개든 다 삭제가 가능하다.
정규식 복잡해 보이지만, 사용을 잘만 할 수 있다면 정말 강력한 도구일 것 같다. 매번 사용할 때마다 헷갈렸지만, 이렇게 정리하고 보니 다음부턴 잘 사용할 수 있을 것 같다. 연습 사이트도 있으니 필요할 때 먼저 테스트 해보고 코드에 적용하자!
