개발을 하다 보면 특정 문구를 치환 대체하고자 하는 경우가 많은데 JavaScript 에선 replace 메소드와 정규식을 조합해 특정 패턴, 규칙을 찾아 내어 해당 하는 부분을 새로운 문자열로 대체( or 바꾸는 것) 하는 것이 가능하다.
예를 들어, 카드번호가 1234-5678-9999-9999 가 있는데 -를 제외하고 숫자 열만 추가하고 싶다 거나 할 때 사용이 가능하다. 간간단한 예시를 통해 replace 메소드를 다뤄 보자.
콘텐츠
.replace() – 정규표현식에 일치하는 부분 대체(혹은 교체)
replace 메소드는 정규식에 일치하는 부분을 원하는 다른 문자로 변경하는 메소드다. 문자열.replace(정규식, 대체할 문자); 형태로 사용된다.
이를 이용해 문자열 abcd를 a와 d 사이를 test 로 바꿔 보겠다.
const str = 'abcd';
const regex = /(a)(.*?)(d)/; // 'a'와 'd'를 캡처 그룹으로 설정
const rpStr = str.replace(regex, '$1test$3'); // 첫 번째 캡쳐그룹, 세 번째 캡쳐그룹 사이를 바꿈
console.log(rpStr);
위의 코드를 해석 하자면 정규식 부분(regex 변수)은 괄호 마다 그룹이 형성 되고 대체 문자열 부분의 $1, $3 부분이 이 그룹을 지정하는 부분이다. 그래서 (a), (d) 는 첫 번째, 세 번째 그룹으로 일치해 있으므로 이 두 그룹 사이를 test 로 대체한다.
(두 번째 그룹은 .*? 로 작성되어 있는데 사이의 임의의 문자열을 말하는 것.)
그래서 결과적으로 a d 사이의 bc 가 test 로 교체 되었다. 이런 식으로 정규식에 대한 규칙을 알게 되면 여러가지 형태로 중간 문자열을 교체할 수 있다.
replace 샘플 코드
카드번호의 ‘-‘ 제외하기
카드번호 데이터가 1234-5678-9999-9999 와 같은 형태로 존재할 때 – 부분을 제외하고 숫자만 뽑아낼 수 있다.
const cardNumber = '1234-5678-9999-9999';
const onlyNumbers = cardNumber.replace(/-/g, ''); // '-'를 빈 문자열로 대체
console.log(onlyNumbers);
위의 코드를 해석 하자면 /-/g 은 – 문자를 찾는데 g 라는 옵션으로 문자열 내의 모든 – 를 찾는 것이다. 다르게 말하면, 첫 번째 -나 맨 마지막 – 만 찾아서 대체 하는 것도 가능하다.
그래서 탐색 된 모든 – 문자를 ”(공백) 으로 대체 하는 코드 이다.
카드번호의 ‘-‘ 삽입하기
위와 반대로 역으로 카드번호가 숫자열로만 존재 할 때, 네자리 마다 -를 넣을 수 있다. 이는 사업자 등록번호 등의 다른 형태의 코드들에도 응용할 수 있다.
const numbers = '1234567899999999';
const formattedNumber = numbers.replace(/(\d{4})(?=\d)/g, '$1-');
console.log(formattedNumber);
위의 코드를 해석 하자면 \d 는 숫자 열이란 의미고 {4} 는 연속 된 숫자 4개 와 매치 된다. 그럼 (\d{4}) 는 괄호가 있어 그룹으로 묶여 캡처 그룹이 된다.
뒤의 (?=\d) 는 긍정형 전방 탐색(lookahead) 란 의미의 캡처 된 4자리 숫자 뒤에 또 다른 숫자가 있을 경우에만 동작하란 의미로 즉, 마지막 캡처 그룹(마지막 숫자 4자리) 에선 동작하지 않게 되어 – 가 추가되지 않게 되는 것.
그래서 $1- 은 (?=\d) 에 의해 찾아진 4자리 숫자를 4자리 숫자- 형태로 변경하게 되어 위의 결과가 출력 되는 것.
