정규표현식

자바스크립트의 정규표현식에 대해 정리하였습니다.

 

 

---

< 정규표현식이란? >

정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다.
-> 즉, 문자열에서 특정한 문자를 찾아내는 도구입니다

자바스크립트에서, 정규 표현식은 { 객체 } 입니다.

 

실제 사용 예시)

1. 이메일 유효성 검사

let regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;

 

2 휴대폰 번호 유효성 검사

let regExp = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/;

 

 

---

< 사용방법 >

정규표현식을 사용하는 방법은 두가지가 있습니다.

 

1. 리터럴

: 슬래쉬("/")로 감싸는 패턴

const example = /a/;
// 컴퓨터에게 'a'를 찾을 것이라고 명령함.

 

2. RegExp 객체 사용

: RegExp의 생성자 함수 사용

const example = new RegExp("a");
// 컴퓨터에게 'a'를 찾을 것이라고 명령함.

 

 

---

< 정규표현식에서 쓰이는 메소드 >

메소드를 이용하면 어떤 문자열 안에 원하는 정보를 찾거나 특정 패턴에 대응하는 문자열을 검색, 추출, 다른 문자열로 치환할 수 있습니다.

JavaScript 에서 정규표현식은 객체로서 내장 메소드를 가지고 있으며, String 객체에서도 정규표현식을 사용할 수 있는 내장메소드를 가지고 있습니다.

 

1. exec( ) [RegExp] : 원하는 정보를 반환하고자 할 때

- 검색의 대상이 찾고자 하는 문자열에 대한 정보를 가지고 있다면 이를 배열로 반환하며, 찾는 문자열이 없다면 null을 반환합니다.

ex)

let pattern = /c/;
pattern.exec('code')
// ['c', index: 0, input: 'code', groups: undefined]

pattern = /i/;
pattern.exec('code')
// null

 

2. test( ) [RegExp] : 찾는 정보가 있는지 없는지 확인할 때

- boolean 값으로 리턴

ex)

let pattern = /c/;
pattern.test('code');
// true

 

3. match( ) [String] : 원하는 정보를 반환하고자 할 때 => exec( ) 과 비슷함!

- 정규 표현식을 인자로 받아 주어진 문자열과 일치된 결과를 배열로 반환합니다. 일치되는 결과가 없으면 null 을 리턴합니다.

ex)

let pattern = /c/;
'code'.match(pattern);
// ['c', index: 0, input: 'code', groups: undefined]

let pattern = /i/;
'code'.match(pattern);
// null

 

4. replace( ) [String] : 어떤 패턴(문자)을 원하는 정보로 바꾸고 싶을 때

- 첫 번째 인자로는 정규표현식을 받고, 두 번째 인자로는 치환하려는 문자열을 받습니다. 패턴에 포함되는 문자열을 치환하려는 문자열로 변경 후 변겨된 값을 리턴합니다.

ex)

let pattern = /c/;
let str = 'code';
str.replace(pattern, 'C');
// 'Code'

 

5. split( ) [String] : 문자열을 부분 문자열로 나누어 배열에 담고 싶을 때

- 주어진 인자를 구분자로 삼아, 배열로 리턴

ex)

"123,456,789".split(",")
// ["123", "456", "789"]

"12304560789".split("0")
// ["123", "456", "789"]

 

6. search( ) [String] : 특정 패턴에 가장 처음 해당하는 문자열의 위치를 알고 싶을 때

- 정규표현식을 인자로 받아 가장 처음 매칭되는 부분 문자열의 위치를 반환합니다. 매칭되는 문자열이 없으면 -1을 반환합니다.

ex)

"JavaScript".search(/script/);
// -1 대소문자를 구분

"JavaScript".search(/Script/);
// 4

"code".search(/ode/);
// 1

 

 

---

< Flag >

정규표현식은 플래그를 설정해 줄 수 있으며, 플래그는 추가적인 검색 옵션의 역할을 해 줍니다.

플래그들은 함께 사용이 가능하고, 순서에 구분이 없습니다.

 

자주 사용하는 3가지 플래그

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

let pattern1 = /c/i;
let pattern2 = /c/;

'Code'.match(pattern1);
// ['C', index: 0, input: 'Code', groups: undefined]

'Code'.match(pattern2);
// null

 

g : 검색된 모든 결과를 반환(global).

let pattern1 = /c/g;
let pattern2 = /c/;

'coolcoolcool'.match(pattern1);
// ['c', 'c', 'c']

'coolcoolcool'.match(pattern2);
// ['c', index: 0, input: 'coolcoolcool', groups: undefined]

 

m : 다중행을 검색.

let str = `1st : cool
2nd : code
3rd : states`;

str.match(/c/gm)
// ['c', 'c']

str.match(/c/m)
// ['c'] 첫 행의 'c'만 리턴

 

 

---

< 패턴(표현식) >

정규표현식에서 /a/ 처럼 단순히 문자만 사용할 수도 있지만,
다양한 특수기호를 함께 사용하면 문자열을 다룰 때에 더 많은 옵션을 설정할 수 있습니다.

 

[대표적인 특수문자들]

^	줄(Line)의 시작에서 일치 /^abc/
$	줄(Line)의 끝에서 일치 /xyz$/
.	(특수기호, 띄어쓰기를 포함한) 임의의 한 문자
a|b	a or b 와 일치, 인덱스가 작은 것을 우선 반환
*	0회 이상 연속으로 반복되는 문자와 가능한 많이 일치. {0,} 와 동일
*?	0회 이상 연속으로 반복되는 문자와 가능한 적게 일치. {0} 와 동일
+	1회 이상 연속으로 반복되는 문자와 가능한 많이 일치. {1,} 와 동일
+?	1회 이상 연속으로 반복되는 문자와 가능한 적게 일치. {1} 와 동일
{3}	숫자 3개 연속 일치
{3,}	3개 이상 연속 일치
{3, 5}	3개 이상 5개 이하 연속 일치
()	캡쳐(capture)할 그룹
[a-z]	a부터 z 사이의 문자 구간에 일치(영어 소문자)
[A-Z]	A부터 Z 사이의 문자 구간에 일치(영어 대문자)
[0-9]	0부터 9 사이의 문자 구간에 일치(숫자)
\(역슬래쉬)	escape 문자. 특수 기호 앞에 \를 붙이면 정규식 패턴이 아닌, 기호 자체로 인식
\d	숫자를 검색함. /[0-9]/와 동일
\D	숫자가 아닌 문자를 검색함. /[^0-9]/와 동일
\w	영어대소문자, 숫자, (underscore)를 검색함. /[A-Za-z0-9]/ 와 동일
\W	영어대소문자, 숫자, (underscore)가 아닌 문자를 검색함. /[^A-Za-z0-9]/ 와 동일
[^]	[]안의 문자열 앞에 ^이 쓰이면, []안에 없는 문자를 검색함

 

MDN - 정규표현식

정규 표현식 - JavaScript | MDN