반응형
8.3 수량자
정규 표현식의 수량자(quantifier)는 특정 패턴이 반복해서 등장하는 수량, 즉 횟수를 지정하는데 사용된다. 많이 사용되는 수량자를 표로 정리하면 다음과 같다.
| 정규 표현식의 수량자 | ||
| 수량자 | 예 | 설명 |
| + | a+ | a가 최소한 1번 이상 반복될 경우에 매치. 'a', 'aa', 'aaa', ... |
| * | ab* | b가 0번 또는 1번 이상 반복될 경우에 매치. 'a', 'ab', 'abb', ... |
| ? | 10? | 0이 0번 또는 1번 반복될 경우에 매치. '1', '10' |
| {m} | \d{3} | 숫자(0~9)가 3번 반복하는 문자열과 매치. '346', '012', '967', ... |
| {m,} | \d{3,} | 숫자(0~9)가 3번 이상 반복하는 문자열과 매치. '346', '88967', '348848', ... |
| {m, n} | \d{3,5} | 숫자(0~9)가 3~5번 이상 반복하는 문자열과 매치. '346', '88967', ... |
| ^ | ^Hi | 'Hi'가 문자열의 가장 앞에 오는 경우의 'Hi"를 검색 |
| $ | school$ | 'school'이 문자열의 가장 뒤에 오는 경우의 'school'을 검색 |
| ?= | a(?=b) | 'a' 뒤에 'b'가 존재할 경우의 'a'를 검색. |
| ?! | a(?! b) | 'a' 뒤에 'b'가 존재하지 않은 경우의 'a'를 검색 |
8.3.1 수량자 : +
수량자 +는 바로 앞의 문자가 최소한 1번 이상 반복될 경우 매치된다. 예를 들어 /a+/는 'a'가 최소한 1번 이상 반복되는 문자열을 나타낸다. 다음은 수량자 +가 사용되는 예이다.
| 예제 8-14. 수량자 +의 사용 예 | quant_plus.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "Woops! Wooops! Wooops!";
let pattern = /o+/g;
let result = str1.match(pattern);
document.getElementById("show").innerHTML = result;
</script>| 예제 8-14. 수량자 +의 사용 예 | quant_plus.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "Woops! Wooops! Wooops!";
// 문자열 변수 str1에 문자열 "Woops! Wooops! Woooops!" 저장
let pattern = /o+/g;
/* 정규 표현식 /o+/g를 변수 pattern에 저장 문자열 'o'가 반복될
경우 전체 문자열에서 검색한다. */
let result = str1.match(pattern);
/* 메서드 match를 사용해서 정규표현식 /o+/g에 해당되는 경우
배열로 변수 result에 저장한다. */
document.getElementById("show").innerHTML = result;
</script>검색 패턴 /o+/는 'o'가 1번 이상 반복되는 문자열을 의미한다. str1.match(pattern)는 'o'가 1번 이상 반복되는 'oo', 'ooo', 'oooo'를 요소로 하는 배열을 반환한다.
다음 코드에서는 메타문자 \w와 수량자 +가 사용된다.
| 예제 8-15. 메타문자 \w와 수량자 +의 사용 예 | quant_plus2.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "Email:hong@korea.com";
let pattern = /\w+/g;
let result = str1.match(pattern);
document.getElementById("show").innerHTML = result;
</script>| 예제 8-15. 메타문자 \w와 수량자 +의 사용 예 | quant_plus2.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "Email:hong@korea.com";
let pattern = /\w+/g;
// 정규 표현식 /\w+/g를 변수 pattern에 저장한다.
let result = str1.match(pattern);
/* 메서드 match를 사용해서 변수 pattern에 저장된 정규표현식에
해당되는 경우를 배열 result에 저장한다. '\w'는 영문자, 숫자 밑줄
이 해당되고 수량자 +는 반복될 경우에 /g는 플래그에 해당된다. */
document.getElementById("show").innerHTML = result;
</script>
8.3.2 수량자 : *
수량지 *는 바로 앞의 문자가 0번 또는 1번 이상 반복될 경우 매치된다. 예를 들어 /ab*/는 'a', 'ab', 'abb', 'abbb' 등의 문자열을 나타낸다. 다음은 수량자 *가 사용되는 예이다.
| 예제 8-16. 수량자 * 사용 예 | quant_star.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "Ah okay! aahh! ahhhh!"
let pattern = /ah*/g;
let result = str1.match(pattern);
document.getElementById("show").innerHTML = result;
</script>| 예제 8-16. 수량자 * 사용 예 | quant_star.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "Ah okay! aahh! ahhhh!"
let pattern = /ah*/g;
/* 정규표현식 /ah*/g를 변수 pattern에 저장한다. 정규 표현식
/ah*/g는 a가 포함되거나 a뒤에 h가 n번 포함된 것을 뜻한다.*/
let result = str1.match(pattern);
/* match() 메서드를 이용해서 문자열 str1에서 정규표현식과 일치되는
문자열을 문자열 배열 result에 저장한다. */
document.getElementById("show").innerHTML = result;
</script>검색패턴 /ah*/는 'h'가 0번 또는 1번 이상 반복되는 패턴과 매치된다. 따라서 str1.match(pattern)은 'a', 'a', 'ahh', 'ahhhh'를 요소로 하는 배열을 반환한다.
8.3.3 수량자 : ?
수량자 ?는 바로 앞이 문자가 0번 또는 1번 반복될 경우 매치된다. 예를 들어 /ab*/는 'a', 'ab'의 문자열과 매치된다. 다음은 수량자 ?가 사용되는 예이다.
| 예제 8-17. 수량자 ?의 사용 예 | quant_qm.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "Ah okay! aahh! ahhhh!";
let pattern = /ah?/g;
let result = str1.match(pattern);
document.getElementById("show").innerHTML = result;
</script>| 예제 8-17. 수량자 ?의 사용 예 | quant_qm.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "Ah okay! aahh! ahhhh!";
let pattern = /ah?/g;
/* 정규식 /ah?/g를 변수 pattern에 저장한다. /ah?/g읠 뜻은
문자열 'a' 혹은 'ah'를 검색하라는 뜻이다. */
let result = str1.match(pattern);
// 메서드 match를 사용해서 문자열 str1에서 문자열를 검색한다.
document.getElementById("show").innerHTML = result;
//
</script>
8.3.4 수량자 : {m}
수량자 {m}은 앞의 문자가 m번 반복되는 패턴과 매치된다. 예를 들어 a{4}는 'aaaa'와 매치된다. 다음은 수량자 {m}이 사용된 예이다.
| 예제 8-18. 수량자 {m}의 사용 예 | quant_cb1.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "1 12 123 1234 12345 123456";
let pattern = /\d{3}/g;
let result = str1.match(pattern);
document.getElementById("show").innerHTML = result;
</script>| 예제 8-18. 수량자 {m}의 사용 예 | quant_cb1.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "1 12 123 1234 12345 123456";
// 변수 str1에 문자열 "1 2 123 1234 12345 123456"를 저장한다.
let pattern = /\d{3}/g;
// 변수 pattern에 정규식(검색 패턴) /\d{3}/g를 저장한다.
메타문자 \d는 숫자를 의미한다. 수랑자 {3}은 문자가 3번 반복된다는
뜻이다. 합치면 \d{3}은 숫자가 3개 반복된다는 것이다. 플래그 /g는
전체 문자열을 다 검색한다는 뜻이다.
let result = str1.match(pattern);
document.getElementById("show").innerHTML = result;
</script>
8.3.5 수량자 : {m,}
수량자 {m,}은 앞의 문자가 m번 이상 반복되는 패턴과 일치한다. 예를 들어 a{4,}는 'aaaa', 'aaaaa', 'aaaaaa', ...와 매치된다. 다음 예제를 통해서 수량자 {m,}의 사용법에 대해서 알아보자.
| 예제 8-19. 수량자 {m,}의 사용 예 | quant_cb2.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "1 12 123 1234 12345 123456";
let pattern = /\d{5,}/g;
let result = str1.match(pattern);
document.getElementById("show").innerHTML = result;
</script>| 예제 8-19. 수량자 {m,}의 사용 예 | quant_cb2.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "1 12 123 1234 12345 123456";
// 변수 str1에 문자열 "1 12 123 1234 12345 123456"를 저장한다.
let pattern = /\d{5,}/g;
/* 정규식 /\d{5,}/g 값을 변수 pattern에 저장한다.
정규식 /\d{5,}/g는 메타문자 \d와 수량자 {5,} 플래그 /g로 이루어져 있다.
의미는 숫자 5개 이상인 문자열을 전체 문자열에서 검색하라는 것이다.*/
let result = str1.match(pattern);
document.getElementById("show").innerHTML = result;
</script>
8.3.6 수량자 : {m,n}
수량자 {m,n}은 앞의 문자가 m번 이상, n번 이하 반복되는 패턴과 매치된다. 예를 들어 a{4,6}은 'aaaa', 'aaaaa', 'aaaaaa'와 매치된다. 다음 예제를 통해서 수량자 {m, n}의 사용법에 대해 알아보자.
| 예제 8-20. 수량자 {m,n}의 사용 예 | quant_cb3.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "1 12 123 1234 12345 123456";
let pattern = /\d{4,5}/g;
let result = str1.match(pattern);
document.getElementById("show").innerHTML = result;
</script>| 예제 8-20. 수량자 {m,n}의 사용 예 | quant_cb3.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "1 12 123 1234 12345 123456";
let pattern = /\d{4,5}/g;
/* 정규식 /\d{4,5}/g 사용, 메타문자 \d는 숫자를 의미한다.
수량자 {4,5}는 4번 이상 5번 이하를 의미한다. 플래그 /g는
global를 의미한다. */
let result = str1.match(pattern);
document.getElementById("show").innerHTML = result;
</script>검색 패턴 /\d{4,5{/는 0~9번 숫자가 4번 이상, 5번 이하 반복되는 패턴, 즉 4자리와 5자리 숫자와 매치된다. 따라서 str.match(pattern)은 '1234', '12345', '12345'를 요소로 하는 배열을 반환한다.
8.3.7 수량자 : ^
수량자 ^는 검색하는 문자열이 가장 앞에 위치해야 할 때 사용된다. 예를 들어 /^You/는 'You'가 가장 앞에 오는 경우의 'You'를 검색한다. 다음은 수량자 ^가 사용되는 예이다.
| 예제 8-21. 수량자 ^의 사용 예 | quant_caret.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "this that his";
let pattern = /^th/g;
let result = str1.replace(pattern, "TH");
document.getElementById("show").innerHTML = result;
</script>| 예제 8-21. 수량자 ^의 사용 예 | quant_caret.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "this that his";
let pattern = /^th/g;
/* 정규표현식 /^th/g를 변수 pattern에 저장한다.
검색패턴 /^th/는 'th가 문자열에 처음 오는 걸 검색하라는 뜻이고
플래그 g는 전체 문자열에서 검색하라는 뜻이다.*/
let result = str1.replace(pattern, "TH");
document.getElementById("show").innerHTML = result;
</script>
8.3.8 수량자 : $
수량자 $는 수랑쟈 ^와는 반대로 검색하는 문자열이 가장 뒤에 위치해야 할 때 사용된다. 예를 들어 /school$/는 'school'이 제일 뒤에 오는 경우의 'school'을 검색한다. 다음은 수량자 $가 사용되는 예이다.
| 예제 8-22. 수량자 $의 사용 예 | quant_dollar.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "this that his";
let pattern = /is$/g;
let result = str1.replace(pattern, "IS");
document.getElementById("show").innerHTML = result;
</script>| 예제 8-22. 수량자 $의 사용 예 | quant_dollar.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "this that his";
let pattern = /is$/g;
/* 정규식 /is$/g를 변수 pattern에 저장한다.
검색 패턴 /is$/는 문자열의 젱리 뒤에 오는 is를 검색하라는 것이다.
플래그 g는 전체 문자열에서 검색하라는 것이다. */
let result = str1.replace(pattern, "IS");
document.getElementById("show").innerHTML = result;
</script>
8.3.0 수량자 : ?=
수량자 ?=는 문자 다음에 특정 문자가 나올 경우에 검샌한다. 예를 들어 /You(?= are)/는 'You' 다음에 'are'이 오는 경우의 'You'를 검색한다. 다음은 수량자 ?=가 사용되는 예이다.
| 예제 8-23. 수량자 ?=의 사용 예 | quant_eq.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "his cat her cat your cat";
let pattern = /cat(?= your)/g;
let result = str1. replace(pattern, "CAT");
document.getElementById("show").innerHTML = result;
</script>| 예제 8-23. 수량자 ?=의 사용 예 | quant_eq.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "his cat her cat your cat";
let pattern = /cat(?= your)/g;
/* 정규식 /cat(?= your)/g을 변수 pattern에 저장
cat(?= your)는 'cat' 다응메 'your'가 오는 경우에 'cat'를 검색 */
let result = str1.replace(pattern, "CAT");
// 메서드 replace을 사용해서 변수 pattern에 저자된 값을 검색한다.
document.getElementById("show").innerHTML = result;
</script>
8.3.10 수량자 : ?!
수량자 ?!는 ?-와는 반대로 문자 다음에 특정 문자가 나오지 않는 경우만 검색된다. 예를 들어 /You(?! are)/는 'You' 다음에 'are'가 오지 않는 경우의 'You'를 검색한다. 다음 에제를 통해서 수량자 ?!의 사용법에 대해 알아보자.
| 예제 8-24. 수량자 ?1의 사용 예 | quant_not.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "his cat her cat your cat";
let pattern = /cat(?! your)/g;
let result = str1.replace(pattern, "CAT");
document.getElementById("show").innerHTML = result;
</script>| 예제 8-24. 수량자 ?1의 사용 예 | quant_not.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "his cat her cat your cat";
let pattern = /cat(?! your)/g;
/* 정규 표현식 /cat(?! your)/g를 변수 pattern에 저장
검색패턴 /cat(?! your)은 'cat' 다음에 'your가 오지 않느 경우의 'cat'를
검색한다.*/
let result = str1.replace(pattern, "CAT");
/* 메서드 replace를 사용해서 'your' 앞에 있는 'cat' 제외한 나머지 'cat'을
'CAT'으로 치환한다. */
document.getElementById("show").innerHTML = result;
</script>
반응형
'프로그래밍 > 예제로 배우는 자바스크립트 요약 및 분석(IT 전공 서적)' 카테고리의 다른 글
| 예제로 배우는 자바스크립트 요약 및 코드 분석 9장 9.1 ~ 9.2 (0) | 2023.10.14 |
|---|---|
| 예제로 배우는 자바스크립트 요약 및 코드 분석 8장 8.4 ~ 8.5 (0) | 2023.10.13 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 8장 8.1 ~ 8.2 (0) | 2023.10.12 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 7장 7.4 ~ 7.5 (0) | 2023.10.12 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 7장 7.1~7.3 (0) | 2023.10.11 |