sungyup's.

Web_Miscellaneous / JavaScript / 2.10 정규표현식 RegExp

2.10정규표현식 RegExp

자바스크립트에서 정규 표현식을 쓰는 방법 정리

개요

정규표현식(Regular Expression)은 문자열에서 특정 패턴을 찾거나 치환하는데 쓰이는 도구다. 평상시 이메일 검증 등의 로직을 쓸 때 그때그때 검색해서 썼는데, 알고리즘 문제를 풀면서 다른 사람들의 답변에서 많이 등장하기도 하여 이번 기회에 정리해본다.

아래는 공식 문서를 읽고 나름대로 정리한 내용이다. 공식 문서 내용을 모두 옮기면 사실 의미가 없으므로, 필요하다고 생각하는 내용을 우선적으로 정리하여 정규표현식의 모든 것을 자세히 아는 것보다 실전적으로 쓰고자 할 때, 핵심 내용이 기억이 나지 않을때 간략하게 참고하고자 썼다.

1. 선언

두 가지 방법이 있다.

  1. / /사이에 regular expression literal(정규식 리터럴)을 작성한다.
  2. RegExp 객체를 constructor로 생성한다.

1번 방법은 스크립트가 로드되었을 때 정규표현식을 컴파일하고, 2번 방법은 런타임에서 실행 시마다 컴파일한다. 즉, 1번은 정규식이 한 번만 컴파일되고, 2번은 매번 새로운 정규식 객체를 생성하고 컴파일하기 때문에 정규식이 안 바뀔것 같을 때는 1번을 쓰는게 좋다. 반면, 정규식 패턴이 바뀔것 같거나 패턴을 다른 소스에서 받아서 쓸때(유저 인풋 등)는 2번을 쓰는게 좋다.

javascript
const regExp1 = /ab_c/;
const regExp2 = new RegExp("ab+c");

2. 정규 표현식 패턴 작성

2-1. 반복자

패턴의미예시
*0회 이상 반복a*: "", "a", "aaa"
+1회 이상 반복a+: "a", "aa"
?0 또는 1회a?: "", "a"
{n}정확히 n회a{3}: "aaa"
{n,}n회 이상a{2,}: "aa", "aaa"
{n,m}n회 이상 m회 이하a{2,4}: "aa", "aaa", "aaaa"

2-2. 문자 단위

패턴의미예시
.임의 문자 하나(줄바꿈 제외)a.c: "abc", "a9c"
\d숫자(digit)\d\d: "23"
\w단어 문자\w+: "hello123"
\s공백 문자(space)\s: " "
\D,\W,\S위와 반대\D는 숫자가 아닌 것 등

2-3. 그룹/선택

패턴의미예시
[...]문자 집합[abc]: "a", "b"
[^...]제외 문자 집합[^0-9]: 숫자 제외
()그룹화(ab): "abab"
`ab`a 또는 b

2-4. 위치

패턴의미예시
^문자열의 시작^abc: "abc"
$문자열의 끝xyz$: "abcxyz"
\b단어 경계\bhi\b: "hi"가 해당. "high"는 안됨.
(?=...)긍정적 전방 탐색\d(?=px): "3px"의 3
(?!...)부정적 전방 탐색\d(?!px): "3em"은 해당. "3px"는 안됨.

3. 정규표현식 메소드

정규표현식을 사용할 때 주로 쓰는 메소드는 RegExp 객체에 속한 메소드와 String 객체에 속한 메소드(즉, 문자열에서 쓸 수 있는 메소드)가 있다.

3-1. 테스트(test): 정규표현식 메소드

정규표현식이 해당 문자열에 포함되어 있는지를 테스트한다.

javascript
/abc/.text('abcdef'); //true

3-2. 탐색(exec): 정규표현식 메소드

정규표현식과 일치하는 첫 번째 결과를 배열로 반환하고, 없으면 null을 반환한다.

javascript
const result = /\d+/.exec('abc123def456');
console.log(result[0]); // "123";

3-3. 추출(match): 문자열 메소드

문자열에서 정규표현식에 매칭하는 값을 추출해서 배열 안에 반환한다. 이 때 flag에 따라 결과값이 다른데, g 플래그가 있다면 매칭되는 전부를 반환하고 그렇지 않다면 최초의 1개를 반환한다. 보다 다양한 플래그는 다음 섹션에서 다룬다.

javascript
"abc123def456".match(/\d+/); // ['123']
"abc123def456".match(/\d+/g); // ['123', '456']

3-4. 치환(replace): 문자열 메소드

문자열에서 정규식에 일치하는 부분을 대체한다. 역시 g 플래그의 여부에 따라 반환값이 달라진다.

javascript
"abc123def456".replace(/\d_/g, '#'); // 'abc#def#'

3-5. 탐색(search): 문자열 메소드

문자열에서 정규식이 처음 일치하는 위치의 인덱스를 반환한다. 없으면 -1이다.

javascript
"abc123".search(/\d+/); // 3

3-6. 나누기(split): 문자열 메소드

javascript
"a1b2c3".split(/\d/); //["a", "b", "c", ""]

4. 플래그(뒤에 붙이는 옵션)

플래그의미뜻
gglobal전역 검색
iignoreCase대소문자 무시
mmultiline여러 줄 모드
sdotAll.이 줄바꿈 포함하도록 허용
uunicode유니코드 지원
ysticky현재 위치부터 매칭(자주 쓰이진 않음)

5. 예제

5-1. 전화번호(010-XXXX-XXXX)

javascript
/^010-\d{4}-\d{4}$/

5-2. 비밀번호: 영문+숫자+특수문자 포함, 8자 이상

javascript
/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/

5-3. 이메일 형식 검증(test)

javascript
const email = "sungyup@sungyup.com";
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

console.log(regex.test(email)); // true

5-4. 모든 해시태그 추출(match)

javascript
const text = "나는 #자바스크립트 #정규표현식 공부중이야!";
const hashtags = text.match(/#\w+/g);
console.log(hashtags);  // ['#자바스크립트', '#정규표현식']

5-5. 전화번호 마스킹(replace)

javascript
const phone = "010-1234-5678";
const masked = phone.replace(/\d{4}-(\d{4})/, "****-$1");
console.log(masked);  // "010-****-5678"

5-6. URL에서 query 시작 위치(search)

javascript
const url = "https://example.com/search?q=regex";
const index = url.search(/\?/);
console.log(index);  // 29

5-7. 줄바꿈 포함 모든 공백 제거(s플래그 활용)

s 플래그는 .이 줄바꿈 문자도 포함하게 해준다.

javascript
const messy = `hello  

   world`;
const cleaned = messy.replace(/\s+/gs, ' ');
console.log(cleaned);  // "hello world"

5-8. 전화번호 포맷팅(replace)

javascript
const digits = "01012345678";
const formatted = digits.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3");
console.log(formatted); // "010-1234-5678"
Previous문자열을 배열로 바꾸기
WebIT
Next브라우저 렌더링 원리
WebIT