[Javascript] 정규 표현식 + replace()

들어가며...

 

각종 알고리즘 문제들을 풀거나 유효성 검사에서 정규표현식을 사용할 일이 생각보다 꽤 많아서 이참에 정리해두려고 한다.

 

 

 

정규 표현식

 

정규 표현식은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다.

Javascript에서는 정규 표현식의 객체로서, RegExp의 exec()와 test() 메서드를 사용할 수 있다.

또한 String의 match(), matchAll(), replace(), search(), split() 메서드와 함께 사용할 수 있다.

 

 

 

정규 표현식 만들기

 

정규 표현식은 다음과 같은 두 가지 방법으로 만들 수 있다.

 

1. 정규 표현식 리터럴

 

const re = /ab+c/;

 

2. RegExp 객체 생성자 호출

 

const re = new RegExp("ab+c");

 

 

 

플래그를 활용한 고급 탐색

 

정규 표현식은 전역 탐색이나 대소문자 무시와 같은 특성을 지정하는 플래그를 가질 수 있다.

플래그는 단독으로 사용할 수도 있고, 순서에 상관없이 한꺼번에 여럿을 지정할 수도 있다.

여러개의 플래그가 존재하지만 많이 사용하는 g 플래그와 i 플래그에 대해서만 간단하게 보겠다.

 

mozila 공식문서를 보면 다음과 같이 정리되어 있다.

 

g : 전역탐색 

i : 대소문자를 구분하지 않음

 

 

 

자주 사용하는 정규 표현식 모음

 

//1. 기본 

/^[ ]$/
 

//2. 숫자만

/^[0-9]$/
 

//4. 영문만(대소문자)

/^[a-zA-Z]$/
 

//4. 소문자만

/^[a-z]$/
 

//5. 영문(대소문자) + 숫자

/^[a-zA-Z0-9]$/
 

//6. 영문(대소문자) + 숫자 + 길이 1~10자리 사이의 문자열

/^[a-zA-Z0-9]{1,10}$/
// >>> 영문 포함 + 숫자 포함 + 길이 1~10자리 사이 문자열(반드시 모두 포함)

  const regexId = /^[a-z0-9](?=.*[a-z])(?=.*\d)[a-z0-9]{5,11}$/;
 

//8. 소문자, 숫자, 특수문자 "-","_" 로만 구성된 길이 1~10자리 사이의 문자열

/^[a-z0-9_-]{1,10}$/
 

//9. 모든 특수문자 체크

/[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/g
 

//10. 대소문자 + 숫자 + 특수문자가 *각각 1개 이상 + 1~10자리 사이 문자열(패스워드 체크시 활용)

/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$ %^&*-]).{1,10}$/
// >>> 영문 포함 + 숫자 포함 + 특수문자 + 길이 1~10자리 사이 문자열(반드시 모두 포함)

  const regexPw =
    /^[a-z0-9#?!@$%^&*-](?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$ %^&*-])[a-z0-9#?!@$%^&*-]{1,10}$/;
 

//11. 휴대폰 번호

/^\d{3}-\d{3,4}-\d{4}$/;
 

//12. 이메일주소 체크

/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
 

//13. 주민등록번호 체크

/^[-A-Za-z0-9_]+[-A-Za-z0-9_.]*[@]{1}[-A-Za-z0-9_]+[-A-Za-z0-9_.]*[.]{1}[A-Za-z]{1,5}$/
  const regexEmail = /^[A-Za-z0-9_]+[A-Za-z0-9]*[@]{1}[A-Za-z0-9]+[A-Za-z0-9]*[.]{1}[A-Za-z]{1,3}$/;
 

//14. 숫자로 구성된 4자리-4자리-4자리-4자리 유형 체크 (ex. 신용카드 번호)

/^[0-9]{4}[-\s\.]?[0-9]{4}[-\s\.]?[0-9]{4}[-\s\.]?[0-9]{4}$/
 

//15. 9. 3자리-3~4자리-4자리(사이에 문자 아무거나 가능)

/^\d[3]-\d[3,4]-\d[4]$/

 

 

 

replace() + 정규 표현식

 

replace(pattern, replacement)

: 문자열에서 pattern과 일치하는 부분을 찾아 replacement로 대체하는 메서드.

 

replace 메서드는 pattern과 처음으로 일치하는 한 개만 찾아 변환하기 때문에 주어진 pattern과 같은 모든 문자열을 변환하고 싶다면 정규 표현식과 함께 사용하는 것이 좋다.

 

 

 

예시

 

정규 표현식 만들기 1번 방식을 사용하여 모든 문자열을 치환해보자.

 

let str = 'apple, banana, orange, banana';

 

일반적으로 "banana"를 "tomato"로 바꾸고 싶을 때는 replace()를 이용하여 다음과 같이 쓴다.

 

str.replace("banana","tomato");

 

하지만 이렇게 사용하게 된다면 문자열을 바꿀 수 없고 앞의 "banana"만 "tomato"로 바꾸게 될 것이다.

따라서 모든 문자열을 찾고 그 문자열을 치환해 줄 수 있도록 정규 표현식과 함께 작성해보자.

 

let str = 'apple, banana, orange, banana';
let replaced_str = str.replace(/banana/g, 'tomato');

//변경 전 : apple, banana, orange, banana
//변경 후 : apple, tomato, orange, tomato

 

이와 같이 작성하면 문제를 해결할 수 있다.

하지만 대소문자가 섞여있고 대소문자의 구분 없이 문자열을 치환하고 싶다면 대소문자를 구분하지 않는 i 옵션을 함께 사용하여 문자열을 손쉽게 치환할 수 있다.

 

let str = 'apple, Banana, orange, banana';
let replaced_str = str.replace(/banana/gi, 'tomato');

//변경 전 : apple, Banana, orange, banana
//변경 후 : apple, tomato, orange, tomato

 

 

참고

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_expressions

 

https://hianna.tistory.com/343

 

https://webruden.tistory.com/980

 

https://junvelee.tistory.com/28