[JavaScript] 정규 표현으로 문자 조작하기 - RegExp 객체

 

 

정규표현으로 문자 조작하기

정규표현으로 나타낸 문자열 패턴을 정규 표현 패턴이라고 한다. 

 

㉮ 기본 패턴

패턴	매칭하는 문자열
ABC	문자열 'ABC'
[ABCD]	A, B, C, D 중 한 개의 문자
[^ABCD]	A, B, C, D 이외의 한 개의 문자
[A-Z]	A~Z 사이의 한 문자
A|B|C	A, B, C 중 어떤 것

 

㉯ 수량 지정

패턴	매칭하는 문자열
X*	X 가 0개 이상이어야 함 (ex. 'ffe*' 일 경우 'ff' , 'ffe', 'ffe' 등으로 매칭 가능)
X?	X 가 0개 또는 1개여야 함 (ex. 'avb?' 일 경우 'avb' 'av' 매칭 가능)
X+	X 가 1개 이상이여야 함 (ex. 'ffe+' 일 경우 'ffe', 'ffeee' 등으로 매칭 가능)
X{n}	X 가 n 개 있어야 함 (ex. 'ab{3}' 일 경우 'abbb')
X{n,}	X 가 n 개 이상 있어야 함 (ex. '[0-9]{3,}' 일 경우 3자리 이상의 숫자)
X{m,n}	X 가 m~n 개 있어야 함 (ex. '[0-9]{3,5}' 일 경우 3~5자리의 숫자)

 

㉰ 위치 지정

패턴	의미
^	문자열의 시작을 의미한다. (ex. '^http' 일 경우 http 로 시작하는 문자열만 가능)
$	문자열의 끝을 의미한다. (ex. '$temp' 일 경우 끝이 temp 로 끝나는 문자열이여야 한다.)

 

㉱ 문자 세트

패턴	의미
.	임의의 1문자
\w	대문자와 소문자의 영숫자, 숫자, _에 일치한다. ('[A-Za-Z0-9]' 와 동일)
\W	문자 이외의 것과 일치('[^\w]' 와 동일)
\d	모든 숫자를 매칭('[0`9]' 와 동일)
\D	숫자 이외의 것과 매칭('[^0-9]'와 동일)
\n	개행과 일치
\r	복귀와 일치
\t	탭 문자와 일치
\s	공백 문자와 일치(\r, \n, \t, \v, \f 와 동일)
\S	공백 이외의 문자와 일치('[^s]' 와 동일)
\~	'~' 로 표현되는 문자

 

 

 RegExp 객체 생성하기

RegExp 객체를 생성하는 방법은 2가지이다. 정규 표현의 주요 옵션들이 있는데 옵션은 다음과 같다.

• g : 문자열 전체에 대해 매치하는가(지정하지 않은 경우 1번 매칭한 시점에서 처리 종료)
• i : 대문자/소문자를 구별하는가
• m : 복수행에 대응하는가(개행 코드를 행의 시작과 끝으로 인식한다.)
• U : 유니 코드에 대응한다.

 

1. RegExp 객체의 생성자를 경유하는 방법

var 변수명 = new RegExp('정규 표현', '옵션');

// ex)
var p = new RegExp('http(s)?://([\\w-]+\\.)+[\\w-]+(/[\\w-./?%&=]*)?', 'gi');

 

2. 정규 표현 리터럴 이용하기

var 변수명 = /정규표현/옵션;

// ex)
var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?/gi;

 

 

 정규 표현 사용해보기 - String.match

정규 표현으로 검색하려면 String.match 메소드를 이용한다.

var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?/gi;

var str = "사이트 : https://www.naver.com 혹은 http://www.daum.net/";

var result = str.match(p);

for(let i = 0; i < result.length; i++) {
    console.log(result[i]);
}

/* 결과
https://www.naver.com
http://www.daum.net/
*/

 

 

 match 메소드와 exec 메소드

match 메소드는 g 옵션과 사용했을 때 전체를 매칭한다. 하지만 exec 메소드는 g 옵션과 상관없이 한 번의 실행에 하나의 실행 결과만을 돌려준다.

var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?/gi;

var str = "사이트 : https://www.naver.com 혹은 http://www.daum.net/";

var result = p.exec(str);

for(let i = 0; i < result.length; i++) {
    console.log(result[i]);
}

/* 결과, 문자열 전체와 서브 매치 문자열로 반환한다.
https://www.naver.com
s
naver.
undefined
*/

 

exec 메소드로 match 메소드를 사용했을 때 글로벌 검색과 같은 결과를 내려면 다음과 같다. exec 메소드는 마지막에 매치한 문자의 위치를 기억하는 기능을 가지고 있어서 다음 번의 exec 메소드를 실행할 때 RegExp 객체는 이전의 매치 위치로부터 검색을 재개한다. exec 메소드는 검색 결과가 없으면 null 을 반환한다. 

var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?/gi;

var str = "사이트 : https://www.naver.com 혹은 http://www.daum.net/";

var result;

while(result = p.exec(str)) {
    console.log(result[0]);
}

/* 결과
https://www.naver.com
http://www.daum.net/
*/

 

 

 매칭의 성공 여부 검증하기

 

㉮ test 메소드

test 메소드로 true/false 로 간단하게 매칭 성공 여부를 알 수 있다.

var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?/gi;

var str = "사이트 : https://www.naver.com 혹은 http://www.daum.net/";

console.log(p.test(str));

 

㉯ search 메소드

search 메소드는 처음 매치한 문자의 위치를 돌려주는 메소드로 매칭 문자열이 존재하지 않는 경우에 반환값으로 -1을 반환한다.

var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?/gi;

var str = "사이트 : https://www.naver.com 혹은 http://www.daum.net/";

console.log(str.search(p));    // 6

 

 

정규 표현으로 문자열 치환하기

String.replace 메소드를 이용하면 정규 표현에 매치한 문자열을 치환할 수 있다.

var p = /[0-9]{3}/gi;

var str = '핸드폰 번호 앞자리는 003 입니다.';

console.log(str.replace(p, '++$1++'));   // 핸드폰 번호 앞자리는 ++$1++ 입니다.

 

 

 정규 표현으로 문자열 분할하기

String.split 메소드를 이용하면 문자열을 분할할 수 있다.

// /, -, . 세 문자 중 하나를 포함하면 매칭된다.
var p = /[\/\.\-]/gi;

let str = "2016-10-11";

console.log(str.match(p));     // [ '-', '-' ]
console.log(str.split(p));     // [ '2016', '10', '11' ]