8장 정규 표현식
정규 표현식은 문자열에서 특정 문자열을 검색하거나 치환할 때 사용된다. 8장에서는 정규 표현식의 형식과 문법에 대해서 배운다. 역 슬래쉬(/)로 시작하는 메타문자, 패턴의 반복 회수를 지정하는 수량자, 문자 패턴을 그룹화 하는 그룹 패턴 등을 이용해서 문자열을 검색하는 방법에 대해서 익힌다. 또한 정규 표현식 RegExp 객체에서 많이 사용되는 exec()와 test() 메서드에 대해서 학습한다.
8.1 정규 표현식이란?
정규 표현식(Regular Expression)은 문자열에서 특정 문자열을 검색하거나 치환할 때 사용된다. 간단하게 정규식이라고 부르기도 한다. 정규 표현식을 이용하면 특정 패턴의 문자열을 쉽게 찾아낼 수 있다.
8.1.1 정규 표현식의 형식
정규 표현식의 사용 형식은 다음과 같다.
| /검색패틴/플래그; |
정규 표현식은 검색 패턴을 슬래쉬(/)로 감싼 다음 플래그(flag)를 옵션으로 삽입한다. 검색 패턴에는 문자와 숫자, 그리고 하이픈(-), 역슬래쉬(\), 물음표(?), 달러($), 괄호([]), ... 등 특정 의미를 가진 기호들이 사용된다.
정규 표현식 예
| /apple/ig; |
문자열에서 'apple'를 검색한다. 플래그 i(ignore case)는 영문 대소문자를 구분하지 않는다는 의미이고, 플래그 g(global)은 문자열 내의 모든 패턴을 검색하라는 의미이다. 이 정규 표현식과 일치하는 문자열은 'apple', 'Apple', 'APPLE', 'AppLe'이 된다.
다음의 정규 표현식에서는 단순 패턴을 이용해서 문자열을 치환하고 있다.
| 예제 8-1. 간단한 정규 표현식 사용 예 | reg_exp.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "I go to s school. My school is a good SCHOOL.";
let pattern = /school/;
let result = str1.replace(pattern, "office");
document.getElementById("show").innerHTML = result;
</script>| 예제 8-1. 간단한 정규 표현식 사용 예 | reg_exp.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "I go to s school. My school is a good SCHOOL.";
let pattern = /school/;
// 변수 pattern에 정규 표현식 school 저장
let result = str1.replace(pattern, "office");
/* 메서드 replace를 사용해서 변수 pattern에 저장된
정규식 /school/ 문자열을 문자열 "office"로 치환 */
document.getElementById("show").innerHTML = result;
</script>String 객체의 replace() 메서드는 특정 문자열을 찾아 다른 문자열로 치환한 문자열을 반환한다.
정규 표현식 /school/는 문자열 'school'에 대한 검색을 의미한다. str1.replace(pattern. "office")는 문자열 str1에서 첫번째로 나오는 'school'을 'office'로 치환한다. 그림 8-1 보면 처음 나오는 'school'이 'office'로 변경되어 있음을 알 수 있다.
8.1.2 정규 표현식의 플래그
정규 표현식의 사용 형식에서 사용되는 플래그를 표로 정리하면 다음과 같다.
| 정규 표현식의 플래그 | ||
| 플래그 | 약어 | 설명 |
| i | ignore Case | 영문 대소문자를 구분하지 않고 검색함 |
| g | global | 문자열 내의 모든 패턴에 대해 검색함 |
| m | multi Line | 문자열의 행이 바뀌어도 계속 검색함 |
다음은 정규 표현식의 플래그 i의 사용 예이다.
| 예제 8-2. 정규 표현식의 플래그 i의 사용 예 | flag_i.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "I go to a School. My school is good SCHOOL.";
let pattern = /school/i;
let result = str1.replace(pattern, "office");
document.getElementById("show").innerHTML = result;
</script>| 예제 8-2. 정규 표현식의 플래그 i의 사용 예 | flag_i.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "I go to a School. My school is good SCHOOL.";
let pattern = /school/i;
/* 변수 pattern에 정규 표현식 '/school/i' 저장 영문 대소문자를 구분하지
않고 문자열 'school를 검색하게 된다.*/
let result = str1.replace(pattern, "office");
/* 메서드 replace를 사용해서 변수 pattern에 저장된 정규표현식
( i 플래그이므로 대소문자 구분이 없다.)을 문자열 "office"로 바꾼다. */
document.getElementById("show").innerHTML = result;
</script>정규 표현식 /school/i에서 플래그 i는 ignore case'의 약어이다. 따라서 문자열 'school'을 검색할 때 대소문자를 구분하지 않는다. str.replace(pattern, "office")는 문자열 str1에서 첫 번째로 나오는 'School'을 'office'로 치환한다.
위 예제 8-3에 정규 표현식의 플래그 g를 적용하면 다음과 같다.
| 예제 8-3. 정규 표현식의 플래그 g의 사용 예 | flag_g.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "I go to a school. My school is a good SCHOOL.";
let pattern = /school/ig;
let result = str1.replace(pattern, "office");
document.getElementById("show").innerHTML = result;
</script>| 예제 8-3. 정규 표현식의 플래그 g의 사용 예 | flag_g.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "I go to a school. My school is a good SCHOOL.";
let pattern = /school/ig;
/* 정규 표현식 /school/ig를 변수 pattern에 저장한다.
모든 패턴에 대해서 영문 대소문자를 가리지 않고 검색한다. */
let result = str1.replace(pattern, "office");
// 변수 pattern에 저장된 문자열을 전부 "office"로 바꾼다.
document.getElementById("show").innerHTML = result;
</script>replace() 메서드는 첫 번째 매치되는 문자열만 치환한다. 정규 표현식의 플래그 g를 사용하면 매치되는 모든 문자열을 치환할 수 있다. 정규 표현식 /school/ig에서 g는 'global'을 의미한다. 따라서 검색 시 매치되는 모든 문자열을 대상으로 한다.
정규 표현식의 플래그 m은 하나의 문자열이 여러 줄로 낭누어져 있는 경우에 사용 가능하다. 다음은 플래그 m의 사용 예이다.
| 예제 8-4. 정규 표현식의 플래그 m의 사용 예 | flag_m.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = `I go to a School. My
school is a good
SCHOOL.`;
let pattern1 = /^school/;
let pattern2 = /^school/m;
let result1 = str1.replace(pattern1, "OFFICE");
let result2 = str1.replace(pattern2, "OFFICE");
let text = "";
text += result1 + "<br>";
text += result2;
document.getElementById("show").innerHTML = text;
</script>| 예제 8-4. 정규 표현식의 플래그 m의 사용 예 | flag_m.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = `I go to a School. My
school is a good
SCHOOL.`;
// 문자열 str1은 백틱(`)으로 세 줄에 걸쳐 값을 저장한다.
let pattern1 = /^school/;
let pattern2 = /^school/m;
let result1 = str1.replace(pattern1, "OFFICE");
/* ^은 줄의 시작을 의미한다. 검색 패턴 /^school/은 줄이
'school'로 시작하는 문자열 패턴을 검색한다. 기본적으로
문자열이 여러줄로 나누어 입력되어 있어도 전체를 하나로 간주한다.
그렇기 때문에 /^school/에 매치되는 문자열은 없다. */
let result2 = str1.replace(pattern2, "OFFICE");
/* /^school/m에서 플래그 m은 'multi line'을 의미한다. 이것은
하나의 문자열이 여러 줄에 걸쳐 있다는 것을 나타낸다. 이 플래그로 인해서
두번째 줄에 시작되는 'school'과 매치된다. 두번째 줄의 'school'은 "OFFICE"로
치환되게 된다. */
let text = "";
text += result1 + "<br>";
text += result2;
document.getElementById("show").innerHTML = text;
</script>
8.2 메타문자
메타문자(metacharacter)는 정규 표현식에서 특수한 의미를 가진 문자이다. 정규 표현식에서 많이 사용되는 메타문자를 표로 정리하면 다음과 같다.
| 정규 표현식의 메타문자 | |
| 메타문자 | 설명 |
| . | 임의의 문자(줄바꿈 문자 제외)하나와 매치 |
| \w | 'word'의 약어. 영문자, 숫자, 밑줄(_)에 해당되는 문자와 매치 |
| \W | \w 이외의 문자와 매치. 영문자, 숫자, 밑줄(_) 외의 문자와 매치 |
| \d | 'digit'의 약어. 0~9의 숫자와 매치 |
| \D | \d 이외의 문자와 매치. 0~9 숫자 의외의 문자와 매치 |
| \s | 'space'의 약어. 공백, 탭, 줄바꿈 문자와 매치 |
| \S | \s 이외의 문자와 매치. 공백, 탭, 줄바꿈 문자 의외의 문자와 매치 |
| \d | 'begin'의 약어. 특정 단어로 시작하거나 끝나는 문자와 매치 |
| \B | \b 이외의 문자와 매치. 특정 단어로 시작하거나 끝나지 않는 문자오 ㅏ매치 |
8.2.1 메타문자 : .
메타문자 점(.)은 임의의 한 문자와 매치된다. 다음 코드를 통해서 메타문자 점(.)에 대해 알아보자.
| 예제 8-5. 메타문자 점(.)의 사용 예 | meta_dot.html | 코드 원문 |
<p id="show"><</p>
<script>
let str1 = "A cat gets haircut.c3t c_t";
let pattern = /c.t/g
let result = str1.match(pattern);
document.getElementById("show").innerHTML = result;
</script>| 예제 8-5. 메타문자 점(.)의 사용 예 | meta_dot.html | 코드 원문 |
<p id="show"><</p>
<script>
let str1 = "A cat gets haircut.c3t c_t";
let pattern = /c.t/g
// 정규표현식 /c.t/g을 변수 pattern에 대입한다.
let result = str1.match(pattern);
/* 정규표현식 /c.t/g에 해당되는 값을 배열 result에 저장한다.
cat,cut,c3t,c_t가 저장된다. */
document.getElementById("show").innerHTML = result;
</script>
8.2.2 메타문자: \w
메타문자 \w에서 w는 'word', 즉, 단어를 의미한다. \w는 영문자(숫자, 밑줄(_) 포함)와 매치된다. 다음은 메타문자 \w가 사용된 예이다.
| 예제 8-6. 메타문자 \w의 사용 예 | meta_w.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "Discount rate : 30%!";
let pattern = /\w/g;
let result = str1.match(pattern);
document.getElementById("show").innerHTML = result;
</script>| 예제 8-6. 메타문자 \w의 사용 예 | meta_w.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "Discount rate : 30%!";
let pattern = /\w/g;
// 메타문자 \w는 'word' 단어를 의미한다. \w는 영문자와 매치된다.
let result = str1.match(pattern);
/* match() 메서드를 사용해서 영문자가 배열 result에 저장되게
된다. */
document.getElementById("show").innerHTML = result;
</script>
8.2.3 메타문자: \w
메타문자 \W는 \w와 반대되는 매치, 즉 영문자, 숫자, 밑줄(_)을 제외한 문자와 매치된다. 다음은 메타문자 \W가 사용된 예이다.
| 예제 8-7. 메타문자 \W의 사용 예 | meta_w2.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "Discount rate : 30%!";
let pattern = /\W/g;
let result = str1.match(pattern);
document.getElementById("show").innerHTML = result;
</script>| 예제 8-7. 메타문자 \W의 사용 예 | meta_w2.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "Discount rate : 30%!";
let pattern = /\W/g;
// 메타문자 W는 영문자, 숫자, 밑줄(__을 제외한 문자와 매치된다.
let result = str1.match(pattern);
// 영문자와 숫자 밑줄을 이외의 문자를 배열 result에 저장한다.
document.getElementById("show").innerHTML = result;
</script>정규표현식 /\W/g는 영어 단어 문자(숫자, 밑줄(_) 포함) 이외의 문자와 매치되나. 따라서 str1.match(pattern)은 str1에서 영문자와 숫자를 제외한 배열을 반환한다.
8.2.4 메타문자 : \d
메타문자 \d에서 d는 'digit'를 의미한다. \d는 0~9 숫자와 매치된다. 다음 예제를 통해서 메타문자 \d의 사용법에 대해서 알아보자.
| 예제 8-8. 메타문자 \d의 사용 예 | meta_d.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "Phone number : 010-1234-5678";
let pattern = /\d/g;
let result = str1.match(pattern);
document.getElementById("show").innerHTML = result;
</script>| 예제 8-8. 메타문자 \d의 사용 예 | meta_d.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "Phone number : 010-1234-5678";
let pattern = /\d/g;
// 정규표현식 /\d/g를 변수 pattern에 저장
let result = str1.match(pattern);
/* match 메서드를 사용해서 변수 pattern에 저장된 정규 표현식을 기준으로
문자열 변수 str1에 저장된 문자열에서 숫자를 매치 배열 result에는
0,1,2,3,4,5,6,7,8이 저장된다.*/
document.getElementById("show").innerHTML = result;
</script>
8.2.5 메타문자 : \D
메타문자 \D에서 \d와 반대되는 매치를 의미한다. 다시 말하면 숫자를 제외한 문자와 매치된다. 다음 예제를 통해서 \D의 사용법에 대해 알아보자.
| 예제 8-9. 메타문자 \D의 사용 예 | meta_d2.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "Phone number : 010-1234-5678.";
let pattern = /\D/g;
let result = str1.match(pattern);
document.getElementById("show").innerHTML = result;
</script>| 예제 8-9. 메타문자 \D의 사용 예 | meta_d2.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "Phone number : 010-1234-5678.";
let pattern = /\D/g;
// 정규 표현식 /\D/g를 변수 pattern에 저장
let result = str1.match(pattern);
/* match() 메서드를 이용해서 변수 문자열 str1에 저장된 값을
검색해서 일치하는 값을 배열 result()에 저장 */
document.getElementById("show").innerHTML = result;
</script>
8.2.6 메타문자 : \s
메타문자 \s에서 s는 'space', 즉 공백을 의미한다. \s는 공백, 탭, 줄바꿈 문자, 즉 화이트 스페이스(white space)에 매치된다. 다음은 메타문자 \s가 사용된 예이다.
| 예제 8-10. 메타문자 \s의 사용 에 | meta_s.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "How are you!";
let pattern = /\s/g;
let result = str1.replace(pattern, "_");
document.getElementById("show").innerHTML = result;
</script>| 예제 8-10. 메타문자 \s의 사용 에 | meta_s.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "How are you!";
let pattern = /\s/g;
// 정규 표현식 /\s/g을 변수 pattern에 저장한다.
let result = str1.replace(pattern, "_");
/* 메서드 replace()를 사용해서 문자열 변수 str1에 저장된 값을
바꾼다. 공백을 _로 변경한다. */
document.getElementById("show").innerHTML = result;
</script>
8.2.7 메타문자: \S
메타 문자 \S는 \s와 반대의 매치를 의미한다. 따라서 공백을 포함한 화이트 스페이스를 제외한 문자와 매치된다. 다음은 메타문자 \S가 사용한 예이다.
| 예제 8-11. 메타문자 \S의 사용 예 | meta_s2.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "How are you!";
let pattern = /\S/g;
let result = str1.replace(pattern, "#");
document.getElementById("show").innerHTML = result;
</script>| 예제 8-11. 메타문자 \S의 사용 예 | meta_s2.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "How are you!";
let pattern = /\S/g;
// 정규 표현식 /\S/g, 메타문자 \S를 사용, 플래그는 g로 한다.
let result = str1.replace(pattern, "#");
/* replace 메서드를 이용해서 변수 pattern에 정규표현식에 해당하는
곳을 문자 "#"로 교체한다. 그리고 그 값을 변수 result에 저장한다. *
document.getElementById("show").innerHTML = result;
</script>검색 패턴 /\S/는 공백을 포함한 화이트 스페이스를 제외한 문자와 매치된다. str1.replace(pattern, "#")은 그림 8-11에 나타난 것과 같이 str1에 포함된 공백을 제외한 문자를 '#'으로 치환한다.
8.2.8 메타문자 : \b
메타문자 \b에서 b는 'begin', 즉 단어의 시작을 의미한다. \b는 특정 문자열로 시작하는 단어 또는 특정 문자열로 끝나는 단어를 검색하는데 사용된다. 예를 들어 \ba는 'a'로 시작하는 단어와 매치된다. 그리고 a/b는 반대로 'a'로 끝나는 단어와 매치된다. 다음 예제를 통해서 메타문자 \b의 사용법을 익혀보자.
| 예제 8-12. 메타문자 \b의 사용 예 | meta_b.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "You are a student. Your restaurant is nice";
let pattern1 = /\bYou/g;
let pattern2 = /e\b/g;
let result1 = str1.replace(pattern1, "_");
let result2 = str1.replace(pattern2, "_");
let text = "";
text += result1 + "<br>";
text += result2;
document.getElementById("show").innerHTML = text;
</script>| 예제 8-12. 메타문자 \b의 사용 예 | meta_b.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "You are a student. Your restaurant is nice";
let pattern1 = /\bYou/g;
// 정규 표현식 /\bYou/g를 변수 pattern1에 저장한다.
let pattern2 = /e\b/g;
// 정규 표현식 /e\b/g를 변수 pattern2에 저장한다.
let result1 = str1.replace(pattern1, "_");
/* 메서드 replace를 사용해서 변수 str1에 저장된 문자열을
변수 pattern1에 사용된 정규표현식을 기준으로 변경한다.
단어 앞 문자열 "You"가 "_"로 변경하게 된다. */
let result2 = str1.replace(pattern2, "_");
/* 메서드 replace를 사용해서 변수 str1에 저장된 문자열을
변수 pattern2에 사용된 정규표현식을 기준으로 변경한다.
단어 뒤 문자열 "e"가 _로 변경되게 된다. */
let text = "";
text += result1 + "<br>";
text += result2;
document.getElementById("show").innerHTML = text;
</script>
8.2.9 메타문자 : \B
메타문자 \B는 \b와는 반대로 특정 문자열로 시작하지 않는 단어나 특정 문자열로 끝나지 않는 단어를 검색하는데 사용된다.
| 예제 8-13. 메타문자 \B의 사용 예 | meta_b2.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "You are a student. Your restaurant is nice.";
let pattern1 = /\Bou/g;
let pattern2 = /e\B/g;
let result1 = str1.replace(pattern1, "_");
let result2 = str1.replace(pattern2, "_");
let text = "";
text += result1 + "<br>";
text += result2;
document.getElementById("show").innerHTML = text;
</script>| 예제 8-13. 메타문자 \B의 사용 예 | meta_b2.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "You are a student. Your restaurant is nice.";
let pattern1 = /\Bou/g;
/* 정규 표현식 /\Bou/g를 변수 pattern1에 저장, 'ou'가 단어 시작이
아닌 경우를 검색하거나 치환한다. 플래그는 g로 한다. 전체 문자열에
적용된다. */
let pattern2 = /e\B/g;
/* 정규 표현식 /e\B/g를 변수 pattern2에 저장, 'e'가 단어 끝이 아닌 경우를
검색하거나 치환한다. 플래그는 g로 한다. 전체 문자열에 적용된다. */
let result1 = str1.replace(pattern1, "_");
// replace 메서드를 사용해서 문자열 pattern1에 해당되는 경우 _로 치환한다.
let result2 = str1.replace(pattern2, "_");
// replace 메서드를 사용해서 문자열 pattern2에 해당되는 경우 _로 치환한다.
let text = "";
text += result1 + "<br>";
text += result2;
document.getElementById("show").innerHTML = text;
</script>
'프로그래밍 > 예제로 배우는 자바스크립트 요약 및 분석(IT 전공 서적)' 카테고리의 다른 글
| 예제로 배우는 자바스크립트 요약 및 코드 분석 8장 8.4 ~ 8.5 (0) | 2023.10.13 |
|---|---|
| 예제로 배우는 자바스크립트 요약 및 코드 분석 8장 8.3 (0) | 2023.10.13 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 7장 7.4 ~ 7.5 (0) | 2023.10.12 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 7장 7.1~7.3 (0) | 2023.10.11 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 6장 6-3~6-4 (0) | 2023.10.11 |