안녕하세요. IT 엘도라도 에 오신 것을 환영합니다.
글을 쓰는 것은 귀찮지만 다시 찾아보는 것은 더 귀찮습니다.
완전한 나만의 것으로 만들기 위해 지식을 차곡차곡 저장해 보아요.   포스팅 둘러보기 ▼

자바스크립트 (JavaScript)

[JavaScript] 정규 표현식(정규식) 사용하기

피그브라더 2021. 3. 3. 11:24

본 포스팅은 JavaScript에서 정규식을 어떻게 사용할 수 있는지만 설명한다. 즉, 정규식 자체의 개념에 대해서는 설명을 생략한다. 만약 정규식 자체의 개념에 대해 알고 싶다면 이 포스팅을 참고하기 바란다. 프로그래밍 언어와는 독립적으로 정규식 자체의 개념에 대해 설명하고 있는 포스팅이다.

 

1. 정규식 표현 방법

JavaScript에서 정규식은 RegExp 타입의 객체로 표현된다. 정규식 객체를 생성하는 방법은 다음과 같이 두 가지이다.

정규식 객체 생성 방법 예시 설명
정규식 리터럴 사용
(슬래시(/)로 감싸는 패턴)
/\w+\s/g; 스크립트가 불러와지는 시점에 컴파일 된다. 정규식 옵션(= 플래그)들은 닫는 슬래시 뒤에 나열하면 된다. 상수인 정규식이라면 이 방식을 사용하는 것이 성능적으로 이득이다.
RegExp() 생성자의 호출 RegExp('\\w+\\s', 'g'); RegExp() 생성자의 호출 시점에 컴파일 된다. 정규식 옵션(= 플래그)들은 RegExp() 생성자의 두 번째 인자에 나열하면 된다. 정규식이 변경될 수 있는 경우 혹은 동적으로 정규식이 결정되는 경우에 유용하다.

정규식 리터럴과 달리 백 슬래시(\)의 사용에 주의해야 한다. 왜냐하면 백 슬래시(\)는 JavaScript의 문자열에서도 이스케이프가 필요한 문자이기 때문이다(본 예시 참고).

 

그리고 정규식 객체는 몇몇 속성들(EX. lastIndex)을 저장하고 있기 때문에 특정 속성을 나중에 참조하여 사용하고 싶다면 반드시 정규식 객체를 변수에 대입하여 사용해야 한다. 정규식 객체, 즉 RegExp 타입의 객체가 가지는 주요 프로퍼티들은 다음과 같다.

프로퍼티 설명
source 정규식을 나타내는 문자열 (정규식 객체가 생성될 때 값이 설정됨)
flags 모든 정규식 옵션(= 플래그)들을 담은 문자열
global g 옵션의 활성화 여부
ignoreCase i 옵션의 활성화 여부
multiline m 옵션의 활성화 여부
dotAll s 옵션의 활성화 여부
lastIndex 다음 검색 시 검색을 시작할 인덱스 (g 옵션이 설정된 정규식에 대해서만 값이 설정됨)

 

※ 사용자의 입력 내용을 이스케이프 하여 정규식 내부에서 문자 그대로 취급하고 싶은 경우에는 다음과 같이 치환 함수를 정의하여 사용하면 된다. 여기서 $&는 (뒤에서 다시 설명하겠지만) 매칭 된 문자열 전체를 의미한다.

function escapeRegExp(inputString){
    return inputString.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

 

2. 정규식 사용 방법 (관련 API)

메소드 설명
RegExp의 exec(str) 메소드 주어진 문자열에서의 매칭 결과를 담은 배열 객체를 반환한다. 이때 만약 g 옵션이 설정되어 있는 정규식이라면 해당 정규식 객체의 lastIndex 프로퍼티가 갱신된다. 만약 매칭이 존재하지 않으면 null을 반환한다.
RegExp의 test(str) 메소드 주어진 문자열에 매칭이 존재하는지 판별하여 true 혹은 false로 반환한다. 이때 만약 g 옵션이 설정되어 있는 정규식이라면 해당 정규식 객체의 lastIndex 프로퍼티가 갱신된다.
String의 match(regex) 메소드 주어진 정규식에 대한 매칭 결과를 담은 배열 객체를 반환한다. 단, g 옵션이 설정되어 있는 정규식이라면 매칭 된 모든 문자열들이 담긴 배열 객체를 반환한다. 만약 매칭이 존재하지 않으면 null을 반환한다.
String의 search(regex) 메소드 주어진 정규식에 대해 첫 번째로 매칭 된 문자열의 인덱스를 반환한다. 만약 매칭이 존재하지 않으면 -1을 반환한다.
String의 replace(regex, newStr|func) 메소드 첫 번째 인자로 주어진 정규식에 대해 첫 번째로 매칭 된 문자열이 두 번째 인자로 주어진 문자열이나 함수에 의해 교체된 새로운 문자열을 반환한다. 이때 만약 g 옵션이 설정되어 있는 정규식이라면 매칭 된 모든 문자열들이 교체된다.

참고로, newStr에서 $n은 n번째 그룹(소괄호로 감싸진 부분)을 의미하고 $&는 매칭 된 문자열 전체를 의미한다.
String의 split(regex) 메소드 주어진 정규식에 매칭 되는 문자열로 해당 문자열을 분리하여 배열 객체를 반환한다.
  • 단순히 매칭이 존재하는지 여부를 알고 싶을 때 : RegExp의 test() 메소드 또는 String의 search() 메소드 사용 (빠름)
  • 각 매칭 결과에 대해 자세히 알고 싶을 때 : RegExp의 exec() 메소드 또는 String의 match() 메소드 사용 (느림)


RegExp의 exec() 메소드와 String의 match() 메소드가 반환하는 배열 객체의 형태는 다음과 같다.

프로퍼티 설명 예시 (정규식 : /d(b+)d/)
(배열 객체 자체) 아래 프로퍼티의 값들을 담은 배열 객체 ['dbbd', 'bb', index: 1, input: 'cdbbdbsbz']
0 매칭 된 문자열 전체 'dbbd'
1, 2, . . . , n n번째 그룹(소괄호로 감싸진 부분)에 매칭 된 문자열 'bb'
index 매칭 된 문자열의 인덱스 1
input 원본 문자열 'cdbbdbsbz'

 

3. 정규식 옵션 설정 방법

JavaScript에서 정규식 옵션(= 플래그)을 설정하는 방법은 다음과 같이 두 가지이다.

정규식 옵션 설정 방법 설명 예시
/정규식/플래그 정규식 리터럴 사용 시 /\w+\s/gm
new RegExp('정규식', '플래그') RegExp() 생성자의 호출 시 new RegExp('\\w+\\s', 'gm')

 

정규식 옵션은 하나만 설정할 수도 있고, 여러 개를 한 번에 설정할 수도 있다(순서 무관). 그리고 이러한 정규식 옵션들은 정규식 객체에 저장되는 정보이며, 나중에 추가되거나 제거될 수 없음을 기억해두는 것이 좋다.

 

주로 사용하는 정규식 옵션들은 다음과 같다.

정규식 옵션(= 플래그) 설명
g 전역 검색을 가능하게 한다.

정규식 객체의 exec() 메소드를 호출하면 첫 번째 매칭 결과를 담은 배열 객체를 반환하면서 해당 정규식 객체의 lastIndex 프로퍼티를 갱신하게 될 것이다. 그리고 문자열의 match() 메소드를 호출하면 매칭 된 모든 문자열들이 담긴 배열 객체를 반환하게 될 것이다.
i 대소문자 구분 없는 검색을 가능하게 한다.
m 다중 행(multi-line) 검색을 가능하게 한다. 즉, ^&가 전체 문자열의 시작 부분과 끝 부분이 아닌 각 줄의 시작 부분과 끝 부분에 매칭 되도록 한다.
s .이 개행 문자를 포함하도록 한다.