12. RegExp 객체(정규 표현식)

2019. 5. 9. 13:26

정규표현이란

어떤 문장에서 특정 패턴을 가지는 문자들을 찾고 싶을 때 활용

특정 문자들에 의미를 부여하여 표현식을 정의

정의된 표현식에 매치되는 문자열을 찾을 수 있다.

자바스크립트에서 이용이 가능한 정규표현 문자

기본 패턴 표현

ABC : ABC라는 문자열

[ABC] : A, B, C 중에 하나

[^ABC] : A, B, C를 제외한 한 개의 문자

[A-Z] : 대문자 중 1개

A|B|C : A,B,C중에서 하나

반복 패턴 표현

X* : X문자가 0개 이상

X? : X문자가 0개 또는 1개

X+ : X문자가 1개 이상

X{n} : X가 n회 반복

X{n,} : X가 n회 이상 반복

X{m, n} : X가 m~n회 반복

위치 지정 패턴 표현

^ : 행의 시작

$ : 행의 끝

. : 임의의 한 문자

\w : 어떤 문자와 일치하는 것 ( [A-Za-z0-9] 와 동일 )

\W : 문자 이외에 일치하는 것( [^\w] 와 동일 )

\d : 숫자

\D : 숫자 제외

\n : Line Feed와 일치

\r : Carriage Return과 일치

\t : 탭문자와 일치

\s : 공백 문자와 일치[\n\r\t\v\f]

\S : 공백 이외의 문자와 일치

\~ : ~로 표현되는 문자

RegExp 객체 생성 방법

    1. RegExp 객체의 생성자를 이용(\를 이스케이프 해야함. \가 의미를 가지고 있으므로)
        - var 변수명 = new RegExp('정규표현식', '옵션');
    2. 정규표현 리터럴 이용(/를 이스케이프 해야함. /가 정규표현 패턴의 시작과 끝을 의미함)
        - var 변수명 = /정규표현/옵션;
        - 옵션
            ○ g: 문자열 전체(지정하지 않으면 한 번만 매칭 후 종료)
            ○ i : 대문자/소문자 구분
            ○ m : 복수 행에 대응(개행을 행의 시작과 끝으로 인식)

matchtest1.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>정규표현</title>
</head>
<body>
<pre>
<script type="text/javascript">
var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?/gi;
//var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?/i;
//var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?/g;
var str = '서포트사이트는https://blog.itthis.me/입니다.';
str += '원래사이트HTTP://itthis.tistory.com/도 접속됩니다!';
var result = str.match(p);
for(var i = 0; i < result.length; i++){
    document.writeln(result[i]);
}
</script>
</pre>
</body>
</html>
Colored by Color Scripter

cs

 

위 코드의 주석 부분을 해제 해가면서 테스트 진행(i와 g의 옵션 의미)

match와 exec의 차이

exec는 한 번에 실행에 하나의 실행결과만반환.

마지막에 매치된 문자의 위치를 기억한다.

match와 같이 g(글로벌)옵션처럼 결과를 얻고 싶음 경우에는 while문으로 반복이 필요하다.

exectest1.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>정규표현</title>
</head>
<body>
<pre>
<script type="text/javascript">
var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?/gi;
var str = '서포트사이트는 https://blog.itthis.me/이다.';
str += '원래사이트HTTP://itthis.tistory.com/도 접속됩니다!';
var result = p.exec(str);
for(var i = 0; i < result.length; i++){
    document.writeln(result[i]);
}
</script>
</pre>
</body>
</html>
Colored by Color Scripter

cs

exectest2.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>정규표현</title>
</head>
<body>
<pre>
<script type="text/javascript">
var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?/gi;
var str = '서포트사이트는 https://blog.itthis.me/이다.';
str += '원래사이트HTTP://itthis.tistory.com/도 접속됩니다!';
while((result = p.exec(str)) != null) {
    document.writeln(result[0]);
}
</script>
</pre>
</body>
</html>
Colored by Color Scripter

cs

RegExp 객체에서 exec메서드 동작 시 매핑 정보를 저장하기 위해 프로퍼티가 존재함.

infotest.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>정규표현</title>
</head>
<body>
<pre>
<script type="text/javascript">
<!--
var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?/gi;
var str = '서포트사이트는 https://blog.itthis.me/이다.';
str += '원래사이트HTTP://itthis.tistory.com/도 접속됩니다!';
while((result = p.exec(str)) != null) {
  document.writeln(p.lastIndex + '：' + result[0]);
  document.writeln('leftContext：' + RegExp.leftContext);
  document.writeln('rightContext：' + RegExp.rightContext);
  document.writeln('lastMatch：' + RegExp.lastMatch);
  document.writeln('lastParen：' + RegExp.lastParen);
  document.writeln('$1：' + RegExp.$1);
  document.writeln('$2：' + RegExp.$2);
  document.writeln('$3：' + RegExp.$3);
  document.writeln('<hr />');
}
//-->
</script>
</pre>
</body>
</html>
Colored by Color Scripter

cs

lastIndex: 검색을 개시하는 위치

*leftContext($`) : 마지막 매치 문자열의 앞 문자열

*rightContext($') : 마지막 매치 문자열의 뒤로 이어지는 문자열

*lastMatch($&) : 마지막에 매치한 문자열(Opera는 미대응)

*lastParen($+) : 마지막 매치된 {}로 묶인 그룹의 문자열(Opera는 미대응)

*$1~9 : 패턴에 매치한 문자열을 순서대로 보관(최대 9개)

매치 성공을 검증하기 위한 test메서드도 있다.(결과를 true/false 로 반환)

test.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>정규표현</title>
</head>
<body>
<pre>
<script type="text/javascript">
var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?/gi;
var str1 = '서포트사이트는 https://blog.itthis.me/이다.';
var str2 = '원래사이트HTTP://itthis.tistory.com/도 접속됩니다!';
document.writeln(p.test(str1));
document.writeln(p.test(str2));
</script>
</pre>
</body>
</html>
Colored by Color Scripter

cs

정규표현식에 최초로 매치된 문자 위치를 반환하는 search 메서드

searchtest.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>정규표현</title>
</head>
<body>
<pre>
<script type="text/javascript">
var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?/gi;
var str1 = '서포트사이트는 https://blog.itthis.me/이다.';
var str2 = '원래사이트HTTP://itthis.tistory.com/도 접속됩니다!';
document.writeln(str1.search(p));
document.writeln(str2.search(p));
</script>
</pre>
</body>
</html>
Colored by Color Scripter

cs

정규표현식으로 치환하기 - replace메서드

replacetest.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>정규표현</title>
</head>
<body>
<pre>
<script type="text/javascript">
var p = /(http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?)/gi;
var str1 = '서포트사이트는 https://blog.itthis.me/이다.';
document.writeln(str.replace(p, '<a href="$1">$1</a>'));
</script>
</pre>
</body>
</html>
Colored by Color Scripter

cs

정규표현식으로 문자열 분할하기 - split메서드

splittest.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>정규표현</title>
</head>
<body>
<pre>
<script type="text/javascript">
var p = /[\/\.\-]/gi;
document.writeln('2018/12/04'.split(p));
document.writeln('2018-12-04'.split(p));
document.writeln('2018.12.04'.split(p));
</script>
</pre>
</body>
</html>
Colored by Color Scripter

cs

지정된 표현식에 하나라도 해당되면 문자열을 분할하여 배열로 반환함

저작자표시 비영리 변경금지

'교육자료 > Javascript' 카테고리의 다른 글

14. Global 내장객체 (0)	2019.05.09
13. Object 내장객체 (0)	2019.05.09
11. Date 내장객체 (0)	2019.05.09
10. Array 내장객체 (0)	2019.05.09
09. Math 내장객체 (0)	2019.05.09

답이 없다가 정답이다.