예제로 배우는 자바스크립트 요약 및 코드 분석 8장 8.4 ~ 8.5

8.4 그룹 패턴

  정규 표현식의 그룹 패턴(group pattern)은 문자들을 그룹화하여 패턴을 만들어서 검색하는데 사용됬다. 많이 사용되는 그룹 패턴을 표로 정리하면 다음과 같다.

정규 표현식의 그룹 패턴
그룹 패턴	설명
[abc]	문자가 a, b, c 중 어떤 것이 와도 매치
[^abc]	[abc]와는 반대로 a, b, c를 제외한 문자에 대해 매치
[0~9]	0~9 숫자에 대한 매치
[^0~9]	0~9 숫자를 제외한 모든 문자와 매치
(x|y)	x 또는 y와 매치. [xy]는 하나의 문자에 대해 사용. {is|are}에서와 같이 단어에 대해서도 사용 가능

 

8.4.1 패턴 : [abc]

  그룹 패턴 [abc[는 대괄호에 포함된 a, b, c 중 하나라도 포함되면 매치된다. 예를 들어 [a-e]는 a~e, 즉 a, b, c, d, e 중 어느 것이 와도 매치됨을 의미한다. 다음 코드를 통해서 그룹 패턴 [abc]에 대해 알아보자.

예제 8-25. 그룹 패턴 [abc]의 사용 예

group1.html

코드 원문

<p id="show"></p>
<script>
    let str1 = 'I love Ice Cream. Do you lie it:';

    let pattern1 = /[ae]/g;
    let pattern2 = /[o-z]/g;
    let pattern3 = /[A-C]/g;
    let result1 = str1.match(pattern1);
    let result2 = str1.match(pattern2);
    let result3 = str1.match(pattern3);
    let text="";
    text += result1 + "<br>";
    text += result2 + "<br>";
    text += result3;
    document.getElementById("show").innerHTML = text;
</script>

예제 8-25. 그룹 패턴 [abc]의 사용 예

group1.html

코드 분석

<p id="show"></p>
<script>
    let str1 = 'I love Ice Cream. Do you lie it:';
    // 변수 str1에 문자열 'I love Ice Cream. Do you lie it:' 저장

    let pattern1 = /[ae]/g;
    /* 변수 pattern1에 정규식 /[ae]/g 저장
    그룹패턴 /[ae]/는 문자 a, e가 매치 */
    let pattern2 = /[o-z]/g;
    /* 변수 pattern2에 정규식 [o-z]/g 저장
    그룹패턴 /[o-z]/g 문자 o~z가 매치 */
    let pattern3 = /[A-C]/g;
    // 변수 pattern3에 정규식 [A-C]/g 저장
    let result1 = str1.match(pattern1);
    // 메서드 match, 정규식과 일치하면 배열로 저장
    let result2 = str1.match(pattern2);
    let result3 = str1.match(pattern3);
    let text="";
    text += result1 + "<br>";
    text += result2 + "<br>";
    text += result3;
    document.getElementById("show").innerHTML = text;
</script>

 

8.4.2 패턴 : [^abc]

  그룹 패턴 [^abc]는 [abc]와는 반대로 a,b,c를 제외한 문자들과 매치된다. 다음 예제를 통해서 그룹 패턴 [^abc]에 대해 알아보자.

예제 8-26. 그룹 패턴 [^abc]의 사용 예

group2.html

코드 원문

<p id="show"></p>
<script>
    let str1 = 'I love Ice Cream. Do you like it?';
    let pattern1 = /[^ae]/g
    let pattern2 = /[^o-z]/g;
    let pattern3 = /[^A-C]/g;
    let result1 = str1.match(pattern1);
    let result2 = str1.match(pattern2);
    let result3 = str1.match(pattern3);

    let text = "";
    text += result1 + "<br>";
    text += result2 + "<br>";
    text += result3;
    document.getElementById("show").innerHTML = text;
</script>

예제 8-26. 그룹 패턴 [^abc]의 사용 예

group2.html

코드 원문

<p id="show"></p>
<script>
    let str1 = 'I love Ice Cream. Do you like it?';
    let pattern1 = /[^ae]/g
    // 검색패턴 [^ae]는 a, e를 제외한 어떤 문자와도 매치된다.
    let pattern2 = /[^o-z]/g;
    // 검색패턴 /[^o-z]/는 영문자 소문자 o와 z 사이의 문자들을 제외한 어떤 문자와도 매치된다.
    let pattern3 = /[^A-C]/g;
    // 검색패턴 /[^A-C]/는 영문자 대문자 A와 C 사이의 문자들을 제외한 문자들과 매치된다.
    let result1 = str1.match(pattern1);
    let result2 = str1.match(pattern2);
    let result3 = str1.match(pattern3);

    let text = "";
    text += result1 + "<br>";
    text += result2 + "<br>";
    text += result3;
    document.getElementById("show").innerHTML = text;
</script>

  그룹 패턴 [^abc]와 [abc]는 정반대의 의미를 가진다. [abc]가 대괄호 안에 있는 문자들 중 하나와 매치되는 반면 [^abc]는 대괄호 안에 있는 문자들을 제외한 문자들과 매치가 일어난다.

 

8.4.3 패턴 : [0-9]

  그룹 패턴 [0-9]는 0에서 9까지의 숫자와 매치된다. 다음 예제를 통해서 그룹 패턴 [0-0]에 대해서 알아보자.

예제 8-27. 그룹 패턴 [0-9]의 사용 예

group3.html

코드 원문

<p id="show"></p>
<script>
    let str1 = '1 23 456 789 10 11';

    let pattern1 = /[15]/g;
    let pattern2 = /[6-9]/g;
    let result1 = str1.match(pattern1);
    let result2 = str1.match(pattern2);

    let text="";
    text += result1 + "<br>";
    text += result2;
    document.getElementById("show").innerHTML = text;
</script>

예제 8-27. 그룹 패턴 [0-9]의 사용 예

group3.html

코드 분석

<p id="show"></p>
<script>
    let str1 = '1 23 456 789 10 11';

    let pattern1 = /[15]/g;
    /* 검색 패턴 /[15]/는 숫자 '1' 또는 '5'와 매치된다. 
    let pattern2 = /[6-9]/g;
    /* 검색 패턴 /[6-9]는 숫자 6에서 9 사이 숫자와 매치된다.
    let result1 = str1.match(pattern1);
    /* str1.match(pattern1)은
    '1', '5', '1', '1', '1' 요소로 하는 배열을 반환한다. */
    let result2 = str1.match(pattern2);
    // str1.match(pattern2)는 '6', '7', '8', '9'를 요소로 하는 배열을 반환한다.

    let text="";
    text += result1 + "<br>";
    text += result2;
    document.getElementById("show").innerHTML = text;
</script>

 

8.4.4 패턴 : [^0-9]

  그룹 패턴 [^0-9]는 [0-9]와는 반대로 0에서 9까지 숫자를 제외한 문자와 매치된다. 다음 예제를 통해서 그룹 패턴 [^0-9]에 대해 알아보자.

예제 8-28. 그룹 패턴 [^0-9]의 사용 예

group4.html

코드 원문

<p id="show"></p>
<script>
    let str1 = '1 23 456 789 10 11';

    let pattern1 = /[^13579]/g;
    let pattern2 = /[^0-6]/g;
    let result1 = str1.match(pattern1);
    let result2 = str1.match(pattern2);

    let text="";
    text += result1 + "<br>";
    text += result2;
    document.getElementById("show").innerHTML = text;
</script>

예제 8-28. 그룹 패턴 [^0-9]의 사용 예

group4.html

코드 원문

<p id="show"></p>
<script>
    let str1 = '1 23 456 789 10 11';

    let pattern1 = /[^13579]/g;
    /* 검색 패턴 [^13579]/g 숫자 1, 3, 5, 7, 9를 제외한 문자와 매치된다.
    공백도 검색된다. */
    let pattern2 = /[^0-6]/g;
    // 검색 패턴 [^0-6]를 제외한 문자와 매치된다. 
    let result1 = str1.match(pattern1);
    let result2 = str1.match(pattern2);

    let text="";
    text += result1 + "<br>";
    text += result2;
    document.getElementById("show").innerHTML = text;
</script>

 

8.4.5 패턴 : (x|y)

  그룹 패턴 (x|y)는 x 또는 y와 매치된다. 자바스크립트의 or 연산자와 유사한 역활을 한다. 다음 예제를 통해서 그룹 패턴 (x|y)에 대해서 알아보자.

예제 8-29. 그룹 패턴 [x|y]의 사용 예

group5.html

코드 원문

<p id="show"></p>
<script>
    let str1 = 'I am a boy. You are a girl. She is pretty';

    let pattern = /(am|are|is)/g;
    let result = str1.match(pattern);

    document.getElementById("show").innerHTML = result;
</script>

예제 8-29. 그룹 패턴 [x|y]의 사용 예

group5.html

코드 분석

<p id="show"></p>
<script>
    let str1 = 'I am a boy. You are a girl. She is pretty';

    let pattern = /(am|are|is)/g;
    // 정규식 (am|are|is)/g am, are, is 어느 것과도 매치된다.
    let result = str1.match(pattern);
    // str.match(pattern)은 'am', 'are', 'is'를 요소로 한 배열을 반환한다.

    document.getElementById("show").innerHTML = result;
</script>

그룹 패턴 [(x|y)]는 사용법이 [abc]와 유사하지만 [(x|y)]의 경우에는 x나 y가 문자뿐만 아니라 다른 검색 패턴으로도 사용될 수 있다. 예를 들어 [(0-5)|you]는 0에서 5까지의 숫자 또는 문자열 'you'를 검색하는데 사용된다.

 

8.5 정규 표현식 메서드

  자바스크립트에서는 지금까지 설명한 정규 표현식을 활용하기 위한 메서드를 제공하고 있다. 많이 사용되는 정규 표현식 메서드를 표로 정리하면 다음과 같다.

정규 표현식 관련 메서드
메서드	설명	소속
exec()	특정 문자열을 검색하여 첫 번째 매치 결과를 반환	RegExp 객체
test()	특정 문자열을 검색하여 존재하면 true, 그렇지 않으면 false를 반환	RegExp 객체
match()	특정 문자열을 검색하여 매치 결과를 배열로 반환	String 객체
search()	특정 문자열을 검색하여 매치의 위치(인덱스)를 반환	String 객체
replace()	특정 문자열을 검색하여 다른 문자열로 치환한 문자열을 반환	String 객체
split()	특정 문자열을 추출하여 배열로 반환	String 객체

  위의 메서드 중 exec(), test() 메서드는 정규 표현식의 객체인 RegExp에서 제공하는 메서드이다. 그리고 나머지 match(), search(), replace(), splie() 메서드는 String 객체에서 사용되는 메서드이다.

  이번 절에서는 정규 표현식의 객체인 RegExp 객체의 exec()와 test() 메서드에 관해 설명한다. match(), search(), replace(), split() 메서드에 관한 설명은 7장을 참고하기 바란다.

 

5.5.1 exec() 메서드

  exec() 메서드는 문자열 내에서 특정 문자열을 검색해서 매치 결과를 배열로 반환한다. 만약 매치가 없으면 Null을 반환한다.

예제 8-30. exec() 메서드의 사용 예

exec.html

코드 원문

<p id="show"></p>
<script>
    let str1 = "We are the world";
    let pattern = /are/g;
    let result1 = pattern.exec(str1);
    let result2 = /is/g.exec(str1);

    let text="";
    text += result1 + "<br>";
    text += result2;
    document.getElementById("show").innerHTML = text;
</script>

예제 8-30. exec() 메서드의 사용 예

exec.html

코드 분석

<p id="show"></p>
<script>
    let str1 = "We are the world";
    let pattern = /are/g;
    // 정규식 /are/g을 변수 pattern에 저장
    let result1 = pattern.exec(str1);
    /* 메서드 exec를 사용해서 문자열 변수 str1에서 문자열 'are'과 일치하면
    매치 결과를 반환한다. */
    let result2 = /is/g.exec(str1);
    /* 메서드 exec를 사용해서 문자열 변수 str1에서 문자열 'is'과 일치하면
    매치 결과를 반환한다. */

    let text="";
    text += result1 + "<br>";
    text += result2;
    document.getElementById("show").innerHTML = text;
</script>

 

8.5.2 test() 메서드

  test() 메서드는 문자열 내에서 특정 문자열을 검색해서 매치가 있으면 true를 반환하고 그렇지 않으면 false를 반환한다.

  다음 코드를 통해서 text() 메서드에 대해서 알아보자.

예제 8-31. test() 메서드의 사용 예

test.html

코드 원문

<p id="show"></p>
<script>
    let str1 = "Nice to meet you!";
    let pattern = /[a-f]/g;
    let result1 = pattern.test(str1);
    let result2 = /[0-9]/g.test(str1);

    let text="";
    text += result1 + "<br>";
    text += result2;
    document.getElementById("show").innerHTML = text;
</script>

예제 8-31. test() 메서드의 사용 예

test.html

코드 분석

<p id="show"></p>
<script>
    let str1 = "Nice to meet you!";
    let pattern = /[a-f]/g;
    // 정규식 /[a-f]/g를 변수 pattern에 저장한다.
    let result1 = pattern.test(str1);
    /* test() 메서드를 사용해서 정규식 [a-f]/g를 검색한 다음
    결과를 변수 result1에 저장한다. 매치되는 문자열이 있으므로
    true가 반환된다. */
    let result2 = /[0-9]/g.test(str1);
	/* test() 메서드를 사용해서 정규식 [0-9]/g를 검색한 다음
    결과를 변수 result2에 저장한다. 매치되는 문자열이 없으므로
    false가 반환된다. */

    let text="";
    text += result1 + "<br>";
    text += result2;
    document.getElementById("show").innerHTML = text;
</script>

  exec() 메서드는 매치되는 문자열을 얻는 데 사용되고, test() 메서드는 매치되는 문자열의 존재 여부를 판단하는데 사용된다.