13. 정규 표현식(Regular Expression)
1. 키워드
- 정규 표현식(Regular Expression)
RegExp객체
2. 정규 표현식의 개념
1) 정규 표현식이란?
- 정규 표현식은 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴이다.
- 이러한 검색 패턴은 모든 종류의 문자열 검색이나 교체 등의 작업에서 사용할 수 있다.
2) 정규 표현식의 생성
- 자바스크립트에서 정규 표현식을 만드는 방법은 다음과 같다.
1] 정규 표현식 리터럴을 이용한 생성
2] RegExp 객체를 이용한 생성
- 자바스크립트에서 정규 표현식 리터럴은 다음 문법을 사용하여 표현한다.
- 정규 표현식 리터럴은
/기호로 시작하여,/기호로 끝난다. - 또한, 필요에 따라 플래그를 추가하여 기본 검색 설정을 변경할 수도 있다.
var regStr = /a+bc/; // 정규 표현식 리터럴을 이용한 생성
var regObj = new RegExp("a+bc"); // RegExp 객체를 이용한 생성
regStr; // /a+bc/
regObj; // /a+bc/
3) 단순한 패턴 검색
- 정규 표현식을 사용하여 단순한 패턴을 검색하고자 할 때는 찾고자 하는 문자열을 직접 나열하면 된다.
- 예를 들어, 다음과 같은 정규 표현식은 정확히
"abc"라는 문자열만이 일치할 것이다.
- 다음 예제는 정규 표현식을 이용한 단순한 패턴 검색 예제이다.
var targetStr =
"간장 공장 공장장은 강 공장장이고, 된장 공장 공장장은 장 공장장이다.";
var strReg1 = /공장/;
var strReg2 = /장공/;
targetStr.search(strReg1); // 3
targetStr.search(strReg2); // -1
- 위의 예제에서 첫 번째 정규 표현식은 해당 문자열의 부분 문자열인
"공장"과 총6번 일치한다. - 하지만
search()메서드는 일치하는 문자열 중에서 첫 번째 문자열의 인덱스만을 반환한다.
- 위의 예제에서 두 번째 정규 표현식은 해당 문자열이
"장 공"이라는 부분 문자열은 포함하고 있지만, 정확히"장공"이라는 부분 문자열을 포함하지 않으므로, 아무것도 일치하지 않는다. search()메서드는 해당 문자열에서 인수로 전달받은 정규 표현식과 일치하는 부분 문자열을 찾지 못하면-1을 반환한다.
Note
search()메서드는 해당 문자열에서 인수로 전달받은 정규 표현식과 일치하는 첫 번째 문자열의 위치를 반환해주는 자바스크립트의String메서드이다.
4) 플래그(Flags)
- 정규 표현식을 생성할 때 플래그를 사용하여 기본 검색 설정을 변경할 수 있다.
- 이렇게 설정된 플래그는 나중에 추가되거나 삭제될 수 없다.
| 플래그 | 설명 |
|---|---|
i |
검색 패턴을 비교할 때 대소문자를 구분하지 않도록 설정함. |
g |
검색 패턴을 비교할 때 일치하는 모든 부분을 선택하도록 설정함. |
m |
검색 패턴을 비교할 때 여러 줄의 입력 문자열을 그 상태 그대로 여러 줄로 비교하도록 설정함. |
y |
대상 문자열의 현재 위치부터 비교를 시작하도록 설정함. |
var targetStr = "bcabcAB";
var strReg = /AB/; // 검색 패턴 비교 시 기본 설정으로 대소문자를 구분함.
var strUsingFlag = /AB/i; // new RegExp("AB", "i")와 동일함.
targetStr.search(strReg); // 5
targetStr.search(strUsingFlag); // 2 -> 대소문자를 구분하지 않고 검색함.
3. 정규 표현식의 응용
1) 특수 문자(Special Characters)
- 정규 표현식을 사용하여 단순한 패턴을 검색하고자 할 때는 찾고자 하는 문자열을 직접 나열하면 된다.
- 하지만 숫자만을 검색하거나, 띄어쓰기를 찾는 등 정확히 일치하는 패턴보다 더 복잡한 조건을 사용하려면 특수 문자를 사용해야 한다.
- 자바스크립트 정규 표현식에서 사용할 수 있는 대표적인 특수 문자는 다음과 같다.
| 특수 문자 | 설명 |
|---|---|
\ |
역슬래시(\) 다음에 일반 문자가 나오면 이스케이프 문자로 해석하고, 특수 문자가 나오면 일반 문자로 해석함. |
\d |
숫자를 검색함. /[0-9]/와 같음. |
\D |
숫자가 아닌 문자를 검색함. /[^0-9]/와 같음 |
\w |
언더스코어(_)를 포함한 영문자 및 숫자를 검색함. /[A-Za-z0-9 ]/와 같음. |
\W |
언더스코어(_), 영문자, 숫자가 아닌 문자를 검색함. /[^A-Za-z0-9 ]/와 같음. |
\s |
띄어쓰기, 탭, 줄 바꿈 문자 등의 공백 문자를 검색함. |
\S |
띄어쓰기, 탭, 줄 바꿈 문자 등의 공백 문자가 아닌 문자를 검색함. |
\b |
단어의 맨 앞이나 맨 뒤가 패턴과 일치하는지를 검색함. |
\xhh |
16진수 hh에 해당하는 유니코드 문자를 검색함. |
\uhhhh |
16진수 hhhh에 해당하는 유니코드 문자를 검색함. |
- 다음 예제는 특수 문자인
'\d'를 사용한 정규 표현식 예제이다.
var targetStr = "ab1bc2cd3de";
var reg1 = /\d/; // 2 -> 0부터 9까지의 숫자를 검색함.
var reg2 = /[3-9]/; // 8 -> 3부터 9까지의 숫자를 검색함.
- 위의 예제에서 첫 번째 정규 표현식은
0부터9까지의 숫자인지를 검색한다. - 이 정규 표현식은
"/[0-9]/"와 같은 결과를 반환할 것이다. - 두 번째 정규 표현식은
3부터9까지의 숫자인지를 검색한다.
- 다음 예제는 특수 문자인
'\s'와'\w'를 사용한 정규 표현식 예제이다.
var targetStr = "abc 123";
// 공백 문자를 사이에 두는 언더스코어(_)를 포함한 영문자 및 숫자로 이루어진 문자열을 검색함.
var reg = /\w\s\w/; // c 1
- 위의 예제에서 사용된 정규 표현식은 첫 번째 문자로
_를 포함한 영문자 및 숫자를 검색한다. - 두 번째 문자로는 띄어쓰기를 포함한 탭, 줄 바꿈 문자 등의 공백 문자를 검색한다.
- 마지막 세 번째 문자로 다시
_를 포함한 영문자 및 숫자를 검색한다. - 이처럼 특수 문자를 나열하여 각각의 조건에 해당하는 문자로 이루어진 부분 문자열을 검색할 수 있다.
Note
match()메서드는 해당 문자열에서 인수로 전달받은 정규 표현식과 일치하는 문자열을 모두 찾아서 하나의 배열로 반환해주는 자바스크립트의String메서드이다.
- 다음 예제는 특수 문자인
'\b'를 사용한 정규 표현식 예제이다.
var targetStr1 = "abc123abc"; // 7
var targetStr2 = "abc 123 abc"; // 1
var targetStr3 = "abc@123!abc"; // 1
// 단어의 맨 앞이나 맨 뒤에 부분 문자열 "bc"가 존재하는지를 검색함.
var reg = /bc\b/;
- 특수 문자
'\b'를 사용한 정규 표현식은 단어의 맨 앞이나 맨 뒤가 패턴과 일치하는지를 검색한다. - 위의 예제에서 첫 번째 정규 표현식은 해당 문자열을 하나의 단어로 인식하고, 양 끝에 위치한 패턴을 검색한다.
- 하지만 두 번째와 세 번째 정규 표현식은 해당 문자열을 여러 개의 단어로 인식하고, 모든 단어에 대해 패턴을 검색할 것이다.
Note
- 자바스크립트에서는
_(언더스코어)와 영문자 ,숫자만을 단어에 포함될 수 있는 문자로 인식한다. - 따라서 이 외의 모든 문자는 문자열에서 단어를 구분하는 문자(Word Break)로 인식될 것이다.
2) 양화사(Quantifier)
- 정규 표현식에서는 특수 문자로 수량을 나타내는 다양한 양화사를 사용할 수 있다.
| 괄호 | 설명 |
|---|---|
n* |
바로 앞의 문자가 0번 이상 나타나는 경우를 검색함. /{0, }/와 같음. |
n+ |
바로 앞의 문자가 1번 이상 나타나는 경우를 검색함. /{1, }/과 같음. |
n? |
바로 앞의 문자가 0번 또는 1번만 나타나는 경우를 검색함. /{0,1}/과 같음. |
var targetStr = "Hello World!";
var zeroReg = /lo*/; // 문자 'l' 다음에 문자 'o'가 0번 이상 나타나는 경우를 검색함.
var oneReg = /lo+/; // 문자 'l' 다음에 문자 'o'가 1번 이상 나타나는 경우를 검색함.
var zeroOneReg = /lo?/; // 문자 'l' 다음에 문자 'o'가 0 또는 1번만 나타나는 경우를 검색함.
targetStr.search(zeroReg); // 2
targetStr.search(oneReg); // 3
targetStr.search(zeroOneReg); // 2
- 또한,
?기호가 정규 표현식의 양화사(*,+,?,{}) 바로 다음에 위치하게 되면, 가능한 많은 문자를 가지도록 패턴을 찾는 기본 설정과는 달리 해당 양화사가 가능한 적은 수의 문자만을 가지는 패턴을 찾도록 변경시킨다.
var targetStr = "123abc";
var oneReg = /\d+/; // 숫자를 검색함. /[0-9]/와 같음.
var anotherReg = /\d+?/; // 숫자를 검색하지만, 가능한 적은 수의 문자를 가지는 패턴을 검색함.
targetStr.search(oneReg); // 123
targetStr.search(anotherReg); // 1
- 위의 예제에서 첫 번째 정규 표현식은 하나 이상의 숫자만을 검색하므로, 문자열
"123abc"에서 가능한 많은 문자를 가지도록"123"을 검색한다. - 하지만 두 번째 정규 표현식처럼 바로 뒤에
?기호를 추가하면, 가능한 적은 문자를 가지도록 변경되므로,"1"만을 검색하게 된다.
3) 괄호(Bracket)
- 정규 표현식에서 사용할 수 있는 여러 가지 괄호의 의미는 다음과 같다.
| 괄호 | 설명 |
|---|---|
a(b)c |
전체 패턴을 검색한 후에 괄호 안에 명시된 문자열을 저장함. (ex: "abc"를 검색한 후에 b를 저장함.) |
[abc] |
[] 안에 명시된 문자를 검색함. (ex: "abc"를 검색함.) |
[0-3] |
[] 안에 명시된 숫자를 검색함. (ex: 0부터 3까지의 숫자를 검색함.) |
[\b] |
백스페이스 문자를 검색함. |
{n} |
앞의 문자가 정확히 n번 나타나는 경우를 검색함. n은 반드시 양의 정수이어야만 함. |
{m,n} |
앞의 문자가 최소 m번 이상 최대 n번 이하로 나타나는 경우를 검색함. m과 n은 반드시 양의 정수이어야만 함. |
Note
\b는 단어의 맨 앞이나 맨 뒤가 패턴과 일치하는지를 검색하는 특수 문자이고,[\b]는 백스페이스 문자를 검색하는 정규표현식이다.- 이 둘을 혼동해서는 안 된다.
- 다음 예제는
()(괄호)를 사용하여 패턴을 검색하고 해당 패턴을 저장하여, 위치를 변경시키는 예제이다.
var targetStr = "Hong Gil Dong";
var nameReg = /(\w+)\s(\w+)\s(\w+)/; // 공백 문자를 기준으로 각 부분문자열을 저장함.
var engName = targetStr.replace(nameReg, "$2 $3 $1"); // 첫 번째 부분문자열을 맨 마지막으로 위치시킴.
engName; // Gil Dong Hong
- 위의 예제에서
()로 묶여진 정규 표현식으로 검색되는 세 개의 부분 문자열은 차례대로 저장된다. - 이때
replace()메서드에서는 이렇게 저장된 부분 문자열을$1,$2, ...,$n표현을 이용하여 사용할 수 있다.
- 이렇게 저장된 부분 문자열은
replace()메서드에서 사용할 수도 있지만, 정규 표현식 내부에서 바로 사용할 수도 있다.
var targetStr = "abc 123 abc 123";
var oneReg = /(\w+) (\d+)/;
var anotherReg = /(\w+) (\d+) \1 \2/;
targetStr.match(oneReg); // abc 123, abc, 123
targetStr.match(anotherReg); // abc 123 abc 123, abc, 123
- 위의 예제에서 첫 번째 정규 표현식은
_를 포함한 영문자 및 숫자로 이루어진 한 부분 문자열과 띄어쓰기로 구분되는 숫자로 이루어진 또 다른 부분 문자열을 검색한다. - 따라서 해당 문자열에서는 각각 첫 번째
"abc"와"123"이 검색되어 저장된다. - 하지만 두 번째 정규 표현식에서는 위와 같은 방법으로 저장된 부분 문자열을 정규 표현식 내에서 또다시 사용하고 있다.
- 이때 정규 표현식 내에서는
\1,\2, ...,\n표현을 이용하여 저장된 부분 문자열을 사용할 수 있다.
Note
match()메서드는 정규 표현식과 모두 일치하는 부분 문자열뿐만 아니라, 괄호를 사용하여 저장된 부분 문자열도 함께 반환한다.
4) 위치 문자
- 정규 표현식에서는 패턴을 검색할 단어의 위치를 지정할 수 있다.
| 괄호 | 설명 |
|---|---|
^a |
단어의 맨 앞에 위치한 해당 패턴만을 검색함. (ex: 'a'로 시작하는 단어의 'a'만을 검색함.) |
a$ |
단어의 맨 뒤에 위치한 해당 패턴만을 검색함. (ex: 'a'로 끝나는 단어의 'a'만을 검색함.) |
var firstStr = "Php";
var secondStr = "phP";
var strReg = /^p/; // 'p'로 시작하는 단어의 'p'만을 검색함.
firstStr.match(strReg); // null
secondStr.match(strReg); // p
4. RegExp 객체
RegExp객체는 정규 표현식을 구현한 자바스크립트 표준 내장 객체이다.
RegExp객체를 생성하는 문법은 다음과 같다.
1] 검색 패턴을 나타내는 정규 표현식은 따옴표나 슬래시(/)로 감싸야 한다.
2] 기본 검색 설정을 변경할 수 있는 플래그는 필요할 때만 전달할 수 있다.
1) RegExp.prototype 메서드
- 모든
RegExp인스턴스는RegExp.prototype으로부터 메서드와 프로퍼티를 상속받는다. - 이렇게 상속받은
RegExp.prototype메서드를 사용하여 정규 표현식을 표현할 수 있다.
1] RegExp.prototype.exec()
2] RegExp.prototype.test()
2) exec() 메서드
exec()메서드는 인수로 전달된 문자열에서 특정 패턴을 검색하여, 패턴과 일치하는 문자열을 반환한다.- 만약에 패턴과 일치하는 문자열이 없으면
null을 반환한다.
var targetStr = "abbcdefabgh";
var firstResult = /ab+/.exec(targetStr); // 패턴과 일치하는 문자열이 여러 개인 경우
var secondResult = /abbb+/.exec(targetStr); // 패턴과 일치하는 문자열이 하나도 없는 경우
firstResult; // abb -> 가장 맨 처음으로 일치하는 문자열이 반환됨.
secondResult; // null
3) test() 메서드
test()메서드는 인수로 전달된 문자열에 특정 패턴과 일치하는 문자열이 있는지를 검색한다.- 만약에 패턴과 일치하는 문자열이 있으면
true를, 없으면false를 반환한다.
var targetStr = "abbcdefabgh";
var firstResult = /ab+/.test(targetStr); // 패턴과 일치하는 문자열이 여러 개인 경우
var secondResult = /abbb+/.test(targetStr); // 패턴과 일치하는 문자열이 하나도 없는 경우
firstResult; // true
secondResult; // false
4) 자바스크립트 RegExp.prototype 메서드
| 메서드 | 설명 |
|---|---|
exec() |
인수로 전달된 문자열에서 특정 패턴을 검색하여, 패턴과 일치하는 문자열을 반환함. |
test() |
인수로 전달된 문자열에 특정 패턴과 일치하는 문자열이 있는지를 검색하여, 그 결과를 불리언 값으로 반환함. |
toString() |
RegExp 객체의 정규 표현식과 같은 의미를 가지는 정규 표현식 리터럴 문자열을 반환함. |
5) RegExp.prototype 프로퍼티
- 자바스크립트는 정규 표현식에서 사용하는 다양한 정보를
RegExp.prototype프로퍼티를 이용해 제공하고 있다.
1] RegExp.prototype.global
2] RegExp.prototype.ignoreCase
3] RegExp.prototype.multiline
4] RegExp.prototype.source
6) 자바스크립트 RegExp.prototype 프로퍼티
| 프로퍼티 | 설명 |
|---|---|
global |
검색 패턴을 비교할 때 일치하는 모든 부분을 선택하도록 설정하는 플래그인 'g'를 가리킴. |
ignoreCase |
검색 패턴을 비교할 때 대소문자를 구분하지 않도록 설정하는 플래그인 'i'를 가리킴. |
multiline |
검색 패턴을 비교할 때 여러 줄의 입력 문자열을 그 상태 그대로 여러 줄로 비교하도록 설정하는 플래그인 'm'을 가리킴. |
source |
검색 패턴이 포함하고 있는 문자열을 가리킴. |