[Javascript] Regular Expression




정규 표현식은 문자열의 패턴을 검사할 때 사용!


B.1 정규 표현식 객체


- 기본 내장 객체 중 하나


정규 표현식 객체는 아래의 두 가지 방법으로 생성할 수 있다




코드 B-1 정규 표현식 객체 생성


<script>

var regExp1 = new RegExp('text');

var regExp2 = /text;

</script>





표 B-1 정규 표현식 객체의 메서드


메서드 이름        설명

test()                정규 표현식과 일치하는 문자열이 있으면 true, 아니면 false를 리턴

exec()               정규 표현식과 일치하는 문자열을 리턴




코드 B-2 정규 표현식의 메서드


1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    
    // 변수 선언
    var regExp = /script/;
    var string = 'Javascript jQuery Ajax';
 
    // 메서드 사용
    var output = regExp.test(string);
 
    // 출력
    alert(output);
 
</script>
cs




표 B-2 정규 표현식을 사용하는 String 객체의 메서드


메서드 이름                            설명

match(regExp)                          정규 표현식과 일치하는 부분을 리턴

replace(regExp, replacement)       정규 표현식과 일치하는 부분을 새로운 문자열로 바꿈

search(regExp)                         정규 표현식과 일치하는 부분의 위치를 리턴

split(regExp)                            정규 표현식을 기준으로 문자열을 잘라 배열을 리턴




코드 B-3 정규 표현식을 사용하는 String 객체의 메서드


1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    
    // 변수 선언
    var regExp = /script/;
    var string = 'Javascript jQuery Ajax';
 
    // 메서드 사용
    var output = string.split(regExp);
 
    // 출력
    alert(output);
 
</script>
cs



그렇다면 정규 표현식문자열과 무엇이 다른가?






B.2 대체 문자

정규 표현식을 사용하면 문자열 객체의 replace() 메서드를 사용할 때 표 B-3의 대체 문자를 사용할 수 있다!




표 B-3 대체 문자


정규 표현식 기호           설명

$&                            일치하는 문자열

$`                               일치하는 부분의 앞부분 문자열

$'                                일치하는 부분의 뒷부분 문자열

$1, $2, $3                    그룹




코드 B-4 대체 문자의 사용 1


1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    
    // 변수 선언
    var regExp = /a/;
    var string = 'Javascript jQuery Ajax';
 
    // 메서드 사용
    var output = string.replace(regExp, '+$&');
 
    // 출력
    alert(output);
 
</script>
cs


#4. a를 +a+로 교체했다




replace() 메서드의 매개변수에는 함수를 넣을 수도 있다.

매개변수로 넣은 함수의 매개변수에는 정규 표현식에 대응하는 문자열이 입력되며 리턴하는 문자열로 대체된다.



코드 B-5 replace() 메서드의 함수 매개변수


1
2
3
4
// 메서드 사용
var output = string.replace(regExp, function (value) {
    return '+' + value + '+';
});
cs




코드 B-6 대체 문자의 사용 2

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    
    // 변수 선언
    var regExp = /(a)(v)(a)/;
    var string = 'Javascript jQuery Ajax';
 
    // 메서드 사용
    var output = string.replace(regExp, '+$1=$2=$3+');
 
    // 출력
    alert(output);
 
</script>
cs



근데 뭔가 이상하다?
가장 앞에 있는 문자만 정규 표현식과 대체된다.

정규 표현식을 사용하면 가장 먼저 패턴이 일치하는 문자열만 찾는다.

모든 문자를 대체하려면 플래그 문자를 사용해야 한다!





B.3 플래그 문자

자바스크립트의 정규 표현식 객체는 표 B-4의 플래그 문자가 있다.



표 B-4 플래그 문자

정규 표현식 기호            설명

g                                전역 비교를 수행한다.
i                                 대소문자를 가리지 않고 비교한다.
m                                여러 줄의 검사를 수행한다.


* 플래그 문자 생성 방법
간단한 방법으로 생성할 때는 뒤에 붙여 사용하며,
생성자를 사용할 때는 두 번째 매개변수에 입력한다.
플래그 문자 위치에 들어가는 플래그 문자의 순서는 어떻게 구성되어도 상관없다.


var regExp = /Expression/im

var regExp = new regExp('Expression', 'im');





코드 B-7 플래그 문자


1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    
    // 변수 선언
    var regExp = /a/ig;
    var string = 'Javascript jQuery Ajax';
 
    // 메서드 사용
    var output = string.replace(regExp, '+$&+');
 
    // 출력
    alert(output);
 
</script>
cs


그런데 플래그 문자 m을 사용하려면 앵커 문자를 알아야 한다!



B.4 앵커 문자

표 B-5 앵커 문자

정규 표현식 기호         설명

^ABC                       맨 앞 문자가 ABC
ABC$                       맨 뒤 문자가 ABC



코드 B-8 앵커 문자
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    
    // 변수 선언
    var regExp = /^j/ig;
    var string = 'Javascript \n jQuery \n Ajax';
 
    // 메서드 사용
    var output = string.replace(regExp, '+$&+');
 
    // 출력
    alert(output);
 
</script>
cs



그럼 이제 플래그 문자 m을 사용해보자.
플래그 문자 m은 문자열이 여러 줄을 형성할 때, 각각의 줄을 개별적인 문자열로 인지하고 검사할 수 있게 해주는 플래그 문자이다.



코드 B-9 앵커 문자와 m 플래그 문자


1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    
    // 변수 선언
    var regExp = /^j/igm;
    var string = 'Javascript \n jQuery \n Ajax';
 
    // 메서드 사용
    var output = string.replace(regExp, '+$&+');
 
    // 출력
    alert(output);
 
</script>
cs




B.5 메타 문자

메타 문자는 자바스크립트의 정규 표현식 객체가 갖는 가장 유용한 기능이다!



표 B-6 메타 문자 1

기호          설명

.               아무 글자

[abc]         괄호 안의 글자

[^abc]        괄호 안의 글자 제외

[a-z]        알파벳 a부터 z까지

[A-Z]        알파벳 A부터 Z까지

[0-9]        숫자 0부터 9까지 




코드 B-10 메타 문자


1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    
    // 변수 선언
    var regExp = /[aj]/igm;
    var string = 'Javascript \n jQuery \n Ajax';
 
    // 메서드 사용
    var output = string.replace(regExp, '+$&+');
 
    // 출력
    alert(output);
 
</script>
cs



이제는 살짝 실전 예제로 활용해보자

실무에서 사용할 수 있는 정규 표현식을 만들 때 가장 중요한 점은

특정 패턴을 매치할 때 정규 표현식을 여러 형태로 만들 수 있다는 것이다.



코드 B-11 메타 문자를 사용한 주민등록번호 확인1


1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    
    // 변수 선언
    var regExp = /......-......./;
    var string = '910209-2001211';
 
    // 메서드 사용
    var output = string.replace(regExp, '+$&+');
 
    // 출력
    alert(output);
 
</script>
cs


주민등록번호 형식을 넣으면 양 끝에 +를 추가해서 출력된다. 패턴 매칭을 수행한 것이다.


"그럼 숫자가 아닌 다른 글자가 들어가면 어떻게 합니까?"


사용자가 주민번호를 입력하라고 했는데 문자를 입력할 수도 있다.

따라서 자바스크립트의 정규 표현식은 표 B-7의 메타 문자를 추가로 지원한다.





표 B-7 메타 문자 2


기호        설명

\d          숫자

\w        아무 단어(숫자 포함)

\s        공백 문자(탭, 띄어쓰기, 개행)

\D        숫자 아님

\W        아무 단어 아님

\S           공백 문자 아님



이를 혼합하면 주민등록번호 검사를 수행할 수 있다.

코드 B-12의 [1234]는 주민등록번호 뒤에 위치하는 7개의 숫자 중

첫 번째 숫자는 1, 2, 3, 4 중 하나이므로 입력했다.




코드 B-12 메타 문자를 사용한 주민등록번호 확인 2


1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    
    // 변수 선언
    var regExp = /\d\d\d\d\d\d-[1234]\d\d\d\d\d\d/;
    var string = '910209-2001211';
 
    // 메서드 사용
    var output = string.replace(regExp, '+$&+');
 
    // 출력
    alert(output);
 
</script>
cs




코드 B-12의 앞 뒤에 앵커 문자를 추가하면 더 적절한 형태로 주민등록번호 검사를 만들 수 있다.

그런데 코드 B-12의 \d 기호를 몇 번씩 사용하니 헷갈린다. 이럴 때 수량 문자를 사용하면 쉽게 적을 수 있다!





B.6 수량 문자


자바스크립트의 정규 표현식은 표 B-8의 수량 문자를 지원한다.




표 B-8 수량 문자


정규 표현식 기호      설명

a+                        a가 적어도 1개 이상

a*                        a가 0개 또는 여러 개

a?                        a가 0개 또는 1개

a{5}                      a가 5개

a{2,5}                    a가 2개~5개

a{2,                    a가 2개 이상

a{,2}                    a가 2개 이하



수량 문자를 사용하면 위 주민등록번호 예제를 다음과 같이 수정할 수 있다.



코드 B-13 수량 문자를 사용한 주민등록번호 확인


1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    
    // 변수 선언
    var regExp = /\d{6}-[1234]\d{6}/;
    var string = '910209-2001211';
 
    // 메서드 사용
    var output = string.replace(regExp, '+$&+');
 
    // 출력
    alert(output);
 
</script>
cs


괄호를 수량 문자와 함께 사용하면 특정 문자열의 반복을 찾아낼 수 있다.





코드 B-14 수량 문자



1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    
    // 변수 선언
    var regExp = /(na)+/;
    var string = 'banana';
 
    // 메서드 사용
    var output = string.replace(regExp, '+$&+');
 
    // 출력
    alert(output);
 
</script>
cs


B.7 선택 문자

이제 고지가 보인다.
마지막으로 선택 문자를 살펴보자



표 B-9 선택 문자

정규 표현식 기호        설명

(abc|def)                    abc 또는 def를 선택한다.



선택 문자는 '또는'의 역할을 수행하는 정규 표현식 기호이다.

지금까지 배운 모든 정규 표현식 기호와 함께 활용할 수 있다.




코드 B-15 선택 문자


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
    
    // 변수 선언
    var regExp = /([0-9]|[a-z])/g;
    var string = prompt('소문자 또는 숫자로만 구성된 단어를 입력하세요.''단어');
 
    // 출력
    if (string.replace(regExp, '').length == 0) {
        alert('thank you');
    } else {
        alert('크흠');        
    }
 
</script>
cs

댓글(2)

  • 청정코딩샘물
    2018.04.06 16:39

    한글은 어떻게 하나요 ㅡㅡ 한국인 맞습니까??? 한글이 없네요 !!!
    아쉽습니다!

    • 2018.04.09 00:15 신고

      한글은 [가-힣] 까지 해놓으면 되겠죠?

      직접 응용해보라는 큰 그림이었습니다!

Designed by JB FACTORY