JS)모던 자바스크립트 Deep Dive 31장 RegExp 정규표현식

Notice

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					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	29	30

Tags more

Archives

Today

Total

관리 메뉴

코딩기록

JS)모던 자바스크립트 Deep Dive 31장 RegExp 정규표현식 본문

프론트/모던 자바스크립트 Deep Dive 책 스터디

JS)모던 자바스크립트 Deep Dive 31장 RegExp 정규표현식

뽀짝코딩 2024. 8. 8. 20:47

728x90

31장 RegExp

31-1. 정규 표현식이란?

정규 표현식(regular expression)은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어.
문자열을 대상으로 패턴 매칭기능을 제공. 패턴 매칭 기능이랑 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말함.
- ```
   [예제 31-01]
   // 사용자로부터 입력받은 휴대폰 전화번호
   const tel = '010-1234-567팔';
   
   // 정규 표현식 리터럴로 휴대폰 전화번호 패턴을 정의한다.
   const regExp = /^\d{3}-\d{4}-\d{4}$/;
   
   // tel이 휴대폰 전화번호 패턴에 매칭하는지 테스트(확인)한다.
   regExp.test(tel); // -> false
```
- 만약 정규표현식을 사용하지 않는다면 반복문과 조건문을 통해 '첫 번째 문자가 숫자이고 이어지는 문자도 숫자이고 이어지는 문자도 숫자이고 다음은 'ㅡ'이고... '와 같이 한 문자씩 연속해서 체크해야 함.
장점: 반복문과 조건문 없이 패턴을 정의하고 테스트하는것으로 간단히 체크할 수 있음.
단점: 주석이나 공백을 허용하지 않고 여러 가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지않다는 문제가 있음.

31-2. 정규 표현식의 생성

정규표현식 객체(RegExp 객체)를 생성하기 위해서는 정규표현식 리터럴과 RegExp 생성자 함수를 사용할 수 있음.
일반적인 방법은 정규 표현식 리터럴을 사용하는 것.
정규 표현식 리터럴은 패턴과 플래그로 구성됨.
- [예제 31-02]
  
  const target = 'Is this all there is?';
  
  // 패턴: is
  
  // 플래그: i => 대소문자를 구별하지 않고 검색한다.
  
  const regexp = /is/i;
  
  // test 메서드는 target 문자열에 대해 정규표현식 regexp의 패턴을 검색하여
  
  매칭 결과를 불리언 값으로 반환한다.
  
  regexp.test(target); // -> true
RegExp 생성자 함수를 사용하여 RegExp 객체를 생성할 수도 있음.
/*

pattern: 정규 표현식의 패턴

flags: 정규 표현식의 플래그(g, i, m, u, y)

*/

new RegExp(pattern[, flags])
[예제 31-03]

const target = 'Is this all there is?';

const regexp = new RegExp(/is/i); // ES6

// const regexp = new RegExp(/is/, 'i');

// const regexp = new RegExp('is', 'i');

regexp.test(target); // -> true

31-3. RegExp 메서드

정규표현식을 사용하는 메서드는 RegExp.prototype.exec, RegExp.prototype.test, String.prototype.match, String.prototype.replace, String.prototype.search, String.prototype.split 등이 있음.

덧)
match()는 주로 패턴에 맞는 부분을 추출할 때 사용, 로 해당 패턴을 찾아 배열로 만들고, 이를 다시 변환.

1). RegExp.prototype.exec

exec 메서드는 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 배열로 반환함.
매친 결과가 없는 경우 null을 반환함.
- [예제 31-04]
  
  const target = 'Is this all there is?';
  
  const regExp = /is/;
  
  regExp.exec(target);
  
  // -> ["is", index: 5, input: "Is this all there is?", groups: undefined]
exec 메서드는 문자열 내의 모든 패턴을 검색하는 g플래그를 지정해도 첫 번재 매칭 결과만 반환하므로 주의할것.❗

2). RegExp.prototype.test

test 메서드는 인수로 전달받은 문자열에 대해 정규표현식의 패턴을 검색하여 매칭 결과를 불리언 값으로 반환함.
- [예제 31-05]
  
  const target = 'Is this all there is?';
  
  const regExp = /is/;
  
  regExp.test(target); // -> true

3). String.prototype.match

String 표준 빌트인 객체가 제공하는 match 메서드는 대상 문자열과 인수로 전달받은 정규 표현식과의 매칭 결과를 배열로 반환함.
- [예제 31-06]
  
  const target = 'Is this all there is?';
  
  const regExp = /is/;
  
  target.match(regExp); // -> ["is", index: 5, input: "Is this all there is?", groups: undefined]
String.prototype.match 메서드는 g플래그가 지정되면 모든 매칭결과를 배열로 반환함.
- [예제 31-07]
  
  const target = 'Is this all there is?';
  
  const regExp = /is/g;
  
  target.match(regExp); // -> ["is", "is"]

31-4. 플래그

자바스크립트는 6개의 플래그를 지원.
패턴과 함께 정규 표현식을 구성하는 플래그는 정규 표현식의 검색 방식을 설정하기 위해 사용.
i : 대·소문자 구분 없이 검색.
g : 패턴과 일치하는 모든 것들을 찾음. g플래그가 없으면 패턴과 일치하는 첫 번째 결과만 반환.
m : 다중 행 모드(multiline mode)를 활성화.
- 캐럿 기호 ^는 텍스트의 시작, 달러 기호 $는 텍스트의 끝. 두 기호를 '앵커(anchor)'라고함.
- 두 앵커를 같이 쓰는 ^...$는 문자열이 패턴과 완전히 일치하는지 확인할 때 자주 사용. 대표적으로 사용자가 입력한 내용이 올바른 형식으로 되어있는지 확인할 때 사용.
s : .이 개행 문자 \n도 포함하도록 ‘dotall’ 모드를 활성화. 문자클래스
- \d ('digit(숫자)'의 ‘d’)숫자: 0에서 9 사이의 문자.
- \s ('space(공백)'의 ‘s’)스페이스, 탭(\t), 줄 바꿈(\n)을 비롯하여 아주 드물게 쓰이는 \v, \f, \r 을 포함하는 공백 기호.
- \w ('word(단어)'의 ‘w’).
  - 예시) \d\s\w는 1 a처럼 ‘숫자’ 뒤에 ‘공백 문자’ 뒤에 '단어에 들어가는 문자’를 의미.
- 반대 클래스( 모든 문자 클래스에 존재 - '반대’란 해당 문자를 제외한 모든 문자에 일치한다는 뜻 )
  - \D 숫자가 아닌 문자: \d와 일치하지 않는 일반 글자 등의 모든 문자.
  - \S 공백이 아닌 문자: \s와 일치하지 않는 일반 글자 등의 모든 문자.
  - \W 단어에 들어가지 않는 문자: \w와 일치하지 않는 비 라틴 문자나 공백 등의 모든 문자.
    - 예시) +7(903)-123-45-67같은 문자열에서 숫자를 모두 찾아 숫자만 남은 전화번호를 만드는 방법.
    - let str = "+7(082)-123-45-67";
      
      console.log(str.match(/\d/g).join('')); // 70821234567
      
      console.log(str.replace(/\D/g, '')); // 70821234567
u : 유니코드 전체를 지원. 이 플래그를 사용하면 서로게이트 쌍(surrogate pair)을 올바르게 처리할 수 있음.
y : 문자 내 특정 위치에서 검색을 진행하는 ‘sticky’ 모드를 활성화 시킴.
- 문자열 내 특정 문자\w 의 위치를 lastIndex 로 찾을 때 \g보다 \y가 더 정확하고 빠름.
- let str = 'let varName = "value"';
  
  let regexpGG = /\w+/g;
  
  regexpGG.lastIndex = 3;
  
  let wordGG = regexpGG.exec(str);
  
  console.log(wordGG[0]); // varName
  
  console.log(wordGG.index); // 4
  
  let regexpYY = /\w+/y;
  
  regexpYY.lastIndex = 3;
  
  console.log(regexpYY.exec(str)[0]); // null (there's a space at position 3, not a word)
  
  regexpYY.lastIndex = 4;
  
  console.log(regexpYY.exec(str)); // varName (word at position 4)
플래그는 옵션이므로 선택이고, 순서와 상관없이 하나 이상의 플래그를 동시에 설정할 수 있음.
어떠한 플래그를 사용하지 않은 경우 대소문자를 구별해서 패턴을 검색함.
그리고 문자열에 패턴 검색 매칭 대상이 1개 이상 존재해도 첫 번째 매칭한 대상만 검색하고 종료함.
- [예제 31-08]
  const target = 'Is this all there is?';
  
  // target 문자열에서 is 문자열을 대소문자를 구별하여 한 번만 검색한다.
  
  target.match(/is/);
  
  // -> ["is", index: 5, input: "Is this all there is?", groups: undefined]
  
  // target 문자열에서 is 문자열을 대소문자를 구별하지 않고 한 번만 검색한다.
  
  target.match(/is/i);
  
  // -> ["Is", index: 0, input: "Is this all there is?", groups: undefined]
  
  // target 문자열에서 is 문자열을 대소문자를 구별하여 전역 검색한다.
  
  target.match(/is/g);
  
  // -> ["is", "is"]
  
  // target 문자열에서 is 문자열을 대소문자를 구별하지 않고 전역 검색한다.
  
  target.match(/is/ig);
  
  // -> ["Is", "is", "is"]

31-5. 패턴

정규 표현식은 "일정한 규칙(패턴)을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어formal language.

정규 표현식 구성: 패턴, 플래그
정규 표현식의 패턴: 문자열의 일정한 규칙을 표현.
- 패턴은 /로 열고 닫으며 문자열의 따옴표는 생략.
- 따옴표를 포함하면 따옴표까지도 패턴에 포함되어 검색됨.
- 패턴은 특별한 의미를 가지는 메타문자meta character 또는 기호로 표현할 수 있음.
- 어떤 문자열내에 패턴과 일치하는 문자열이 존재할때 '정규 표현식과 매치한다'고 표현함.
정규 표현식의 플래그: 정규 표현식의 검색방식을 설정.

1). 문자열 검색

RegExp 메서드를 사용하여 검색 대상 문자열과 정규 표현식의 매칭 결과를 구하면 검색이 수행됨.

검색 대상 문자열과 플래그를 생략한 정규 표현식의 매칭 결과를 구하면 대소문자를 구별하여 정규 표현식과 매치한 첫 번째 결과만 반환함.
- [예제 31-09]
  
  const target = 'Is this all there is?';
  
  // 'is' 문자열과 매치하는 패턴. 플래그가 생략되었으므로 대소문자를 구별한다.
  
  const regExp = /is/;
  
  // target과 정규 표현식이 매치하는지 테스트한다.
  
  regExp.test(target); // -> true
  
  // target과 정규 표현식의 매칭 결과를 구한다.
  
  target.match(regExp);
  
  // -> ["is", index: 5, input: "Is this all there is?", groups: undefined]
대소문자를 구별하지 않고 검색하려면 플래그 i를 사용.
- [예제 31-10]
  
  const target = 'Is this all there is?';
  
  // 'is' 문자열과 매치하는 패턴. 플래그 i를 추가하면 대소문자를 구별하지 않는다.
  
  const regExp = /is/i;
  
  target.match(regExp);
  
  // -> ["Is", index: 0, input: "Is this all there is?", groups: undefined]
검색 대상 문자열 내에서 패턴과 매치하는 모든 문자열을 전역 검색하려면 플래그 g를 사용.
- [예제 31-11]
  
  const target = 'Is this all there is?';
  
  // 'is' 문자열과 매치하는 패턴.
  
  // 플래그 g를 추가하면 대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색한다.
  
  const regExp = /is/ig;
  
  target.match(regExp); // -> ["Is", "is", "is"]

2). 임의의 문자열 검색

.은 임의의 문자 한 개를 의미.
문자의 내용은 무엇이든 상관없음.
다음 예제의 경우 .을 3개 연속하여 패턴을 생성했으므로 문자의 내용과 상관없이 3자리 문자열과 매치함.
- [예제 31-12]
  
  const target = 'Is this all there is?';
  
  // 임의의 3자리 문자열을 대소문자를 구별하여 전역 검색한다.
  
  const regExp = /.../g;
  
  target.match(regExp); // -> ["Is ", "thi", "s a", "ll ", "the", "re ", "is?"]

3). 반복 검색

{m, n}은 앞선 패턴이 최소 m번, 최대 n번 반복되는 문자열을 의미.
콤마 뒤에 공백이 있으면 정상 동작하지 않으므로 주의할 것.
- [예제 31-13]
  
  const target = 'A AA B BB Aa Bb AAA';
  
  // 'A'가 최소 1번, 최대 2번 반복되는 문자열을 전역 검색한다.
  
  const regExp = /A{1,2}/g;
  
  target.match(regExp); // -> ["A", "AA", "A", "AA", "A"]
{n}은 앞선 패턴이 n번 반복되는 문자열을 의미한다. 즉 {n}은 {n, n}과 같음.
- [예제 31-14]
  
  const target = 'A AA B BB Aa Bb AAA';
  
  // 'A'가 2번 반복되는 문자열을 전역 검색한다.
  
  const regExp = /A{2}/g;
  
  target.match(regExp); // -> ["AA", "AA"]
{n,}은 앞선 패턴이 최소 n번 이상 반복되는 문자열을 의미.
- [예제 31-15]
  
  const target = 'A AA B BB Aa Bb AAA';
  
  // 'A'가 최소 2번 이상 반복되는 문자열을 전역 검색한다.
  
  const regExp = /A{2,}/g;
  
  target.match(regExp); // -> ["AA", "AAA"]
+는 앞선 패턴이 최소 한번 이상 반복되는 문자열을 의미. 즉, +는 {1,}과 같음.

[예제 31-16]의 경우 A+는 앞선 패턴 'A'가 한번 이상 반복되는 문자열 , 즉 'A'만으로 이루어진 문자열 'A', 'AA', 'AAA', ...와 매치함.
- [예제 31-16]
  
  const target = 'A AA B BB Aa Bb AAA';
  
  // 'A'가 최소 한 번 이상 반복되는 문자열('A, 'AA', 'AAA', ...)을 전역 검색한다.
  
  const regExp = /A+/g;
  
  target.match(regExp); // -> ["A", "AA", "A", "AAA"]

?는 앞선 패턴이 최대 한 번(0번 포함)이상 반복되는 문자열을 의미. 즉 ?는 {0,1}과 같음.
[예제 31-17]의 경우 /colou?r는 'colo' 다음 'u'가 최대 한 번(0번 포함) 이상 반복되고 'r'이 이어지는 문자열 'color', 'colour'와 매치함.
- [예제 31-17]
  
  const target = 'color colour';
  
  // 'colo' 다음 'u'가 최대 한 번(0번 포함) 이상 반복되고 'r'이 이어지는 문자열 'color', 'colour'를 전역 검색한다.
  
  const regExp = /colou?r/g;
  
  target.match(regExp); // -> ["color", "colour"]

4). OR 검색

수직선(버티컬라인 vertical line ) |은 or 의미를 갖는다. 다음 예제의 /A|B/는 A 또는 B를 의미.
- [예제 31-18]
  
  const target = 'A AA B BB Aa Bb';
  
  // 'A' 또는 'B'를 전역 검색한다.
  
  const regExp = /A|B/g;
  
  target.match(regExp); // -> ["A", "A", "A", "B", "B", "B", "A", "B"]

분해되지 않은 단어 레벨로 검색하기 위해서는 +를 함께 사용. 패턴을 or로 한 번 이상 반복한 예제.
- [예제 31-19]
  
  const target = 'A AA B BB Aa Bb';
  
  // 'A' 또는 'B'가 한 번 이상 반복되는 문자열을 전역 검색한다.
  
  // 'A', 'AA', 'AAA', ... 또는 'B', 'BB', 'BBB', ...
  
  const regExp = /A+|B+/g;
  
  target.match(regExp); // -> ["A", "AA", "B", "BB", "A", "B"]
[예제 31-19]를 간단히 표현하면 [예제 31-20]처럼 [ ] 내의 문자는 or로 동작함. 그 뒤에 +를 사용하면 앞선 패턴을 한 번 이상 반복함.
- [예제 31-20]
  
  const target = 'A AA B BB Aa Bb';
  
  // 'A' 또는 'B'가 한 번 이상 반복되는 문자열을 전역 검색한다.
  
  // 'A', 'AA', 'AAA', ... 또는 'B', 'BB', 'BBB', ...
  
  const regExp = /[AB]+/g;
  
  target.match(regExp); // -> ["A", "AA", "B", "BB", "A", "B"]

범위를 지정하려면 [ ] 내에 -를 사용. [예제 31-21]은 대문자 알파벳을 검색.
- [예제 31-21]
  
  const target = 'A AA BB ZZ Aa Bb';
  
  // 'A' ~ 'Z'가 한 번 이상 반복되는 문자열을 전역 검색한다.
  
  // 'A', 'AA', 'AAA', ... 또는 'B', 'BB', 'BBB', ... ~ 또는 'Z', 'ZZ', 'ZZZ', ...
  
  const regExp = /[A-Z]+/g;
  
  target.match(regExp); // -> ["A", "AA", "BB", "ZZ", "A", "B"]

대소문자를 구별하지 않고 알파벳을 검색하는 방법은 [예제 31-22]와 같음.
- [예제 31-22]
  
  const target = 'AA BB Aa Bb 12';
  
  // 'A' ~ 'Z' 또는 'a' ~ 'z'가 한 번 이상 반복되는 문자열을 전역 검색한다.
  
  const regExp = /[A-Za-z]+/g;
  
  target.match(regExp); // -> ["AA", "BB", "Aa", "Bb"]

숫자를 검색하는 방법 [예제 31-23]. 쉼표 때문에 매칭 결과가 분리되므로 쉼표를 패턴에 포함시키면 [예제 31-24]가됨.
- [예제 31-23]
  
  const target = 'AA BB 12,345';
  
  // '0' ~ '9'가 한 번 이상 반복되는 문자열을 전역 검색한다.
  
  const regExp = /[0-9]+/g;
  
  target.match(regExp); // -> ["12", "345"]
[예제 31-23]은 쉼표 때문에 매칭 결과가 분리되므로 쉼표를 패턴에 포함시킴 [예제 31-24].
- [예제 31-24]
  
  const target = 'AA BB 12,345';
  
  // '0' ~ '9' 또는 ','가 한 번 이상 반복되는 문자열을 전역 검색한다.
  
  const regExp = /[0-9,]+/g;
  
  target.match(regExp); // -> ["12,345"]

[예제 31-24]를 간단히 표현한 [예제 31-25].
\d는 숫자를 의미. 즉,\d는 [0-9]와 같음. \D는 \d와 반대로 동작함. 즉, \D는 숫자가 아닌 문자를 의미함.
- [예제 31-25]
  
  const target = 'AA BB 12,345';
  
  // '0' ~ '9' 또는 ','가 한 번 이상 반복되는 문자열을 전역 검색한다.
  
  let regExp = /[\d,]+/g;
  
  target.match(regExp); // -> ["12,345"]
  
  // '0' ~ '9'가 아닌 문자(숫자가 아닌 문자) 또는 ','가 한 번 이상 반복되는 문자열을 전역 검색한다.
  
  regExp = /[\D,]+/g;
  
  target.match(regExp); // -> ["AA BB ", ","]
\w (소문자)는 알파벳, 숫자, 언더스코어를 의미함. 즉, \w (소문자)는 [A-Za-z0-9]와 같음.
\W (대문자) 는 \w (소문자)와 반대로 동작함. 즉, \W는 알파벳, 숫자, 언더스코어가 아닌 문자를 의미.
- [예제 31-26]
  
  const target = 'Aa Bb 12,345 _$%&';
  
  // 알파벳, 숫자, 언더스코어, ','가 한 번 이상 반복되는 문자열을 전역 검색한다.
  
  let regExp = /[\w,]+/g;
  
  target.match(regExp); // -> ["Aa", "Bb", "12,345", "_"]
  
  // 알파벳, 숫자, 언더스코어가 아닌 문자 또는 ','가 한 번 이상 반복되는 문자열을 전역 검색한다.
  
  regExp = /[\W,]+/g;
  
  target.match(regExp); // -> [" ", " ", ",", " ", "$%&"]

5). NOT 검색

[...] 내의 ^은 not을 의미.
[^0-9]는 숫자를 제외한 문자를 의미함. 따라서 [0-9]와 같은 의미의 \d와 반대로 동작하는 \D는 [^0-9]와 같고,
[A-Za-z0-9_] 와 같은 의미의 \w와 반대로 동작하는 \W는 [^A-Za-z0-9_]와 같음.
- [예제 31-27]
  
  const target = 'AA BB 12 Aa Bb';
  
  // 숫자를 제외한 문자열을 전역 검색한다.
  
  const regExp = /[^0-9]+/g;
  
  target.match(regExp); // -> ["AA BB ", " Aa Bb"]

6). 시작 위치로 검색

[...] 밖의 ^은 문자열의 시작을 의미.
- [예제 31-28]
  
  const target = 'https://poiemaweb.com';
  
  // 'https'로 시작하는지 검사한다.
  
  const regExp = /^https/;
  
  regExp.test(target); // -> true

7). 마지막 위치로 검색

$는 문자열의 마지막을 의미.
- [예제 31-29]
  
  const target = 'https://poiemaweb.com';
  
  // 'com'으로 끝나는지 검사한다.
  
  const regExp = /com$/;
  
  regExp.test(target); // -> true

31-6. 자주 사용하는 정규표현식

1). 특정 단어로 시작하는지 검사

다음 예제는 검색 대상 문자열이 http://또는 https://로 시작하는지 검사함.
[...] 바깥의 ^은 문자열의 시작을 의미하고, ?은 앞선 패턴(다음예제의 경우 s)이 최대 한 번(0번 포함)이상 반복되는지를 의미함.
다시말해, 검색 대상 문자열에 앞선 패턴(s)이 있어도 없어도 매치됨.
- [예제 31-30]
  
  const url = 'https://example.com';
  
  // 'http://' 또는 'https://'로 시작하는지 검사한다.
  
  /^https?:\/\//.test(url); // -> true
[예제 31-31]도 동일하게 동작함.
- [예제 31-31]
  
  /^ (http | https): \/\//.test(url); // -> true

2). 특정 단어로 끝나는지 검사

다음 예제는 검색 대상 문자열이 'html'로 끝나는지 검사한다. $는 문자열의 마지막을 의미.
- [예제 31-32]
  
  const fileName = 'index.html';
  
  // 'html'로 끝나는지 검사한다.
  
  /html$/.test(fileName); // -> true

3). 숫자로만 이루어진 문자열인지 거사

다음 예제는 검색 대상 문자열이 숫자로만 이루어진 문자열인지 검사함.
[...] 바깥의 ^은 문자열의 시작을, $는 문자열의 마지막을 의미.
\d는 숫자를 의미하고 +는 앞선 패턴이 최소 한번 이상 반복되는 문자열을 의미.
즉, 처음과 끝이 숫자이고 최소 한 번 이상 반복되는 문자열과 매치함.
- [예제 31-33]
  
  const target = '12345';
  
  // 숫자로만 이루어진 문자열인지 검사한다.
  
  /^\d+$/.test(target); // -> true

4). 하나 이상의 공백으로 시작하는지 검사

다음 예제는 검색 대상 문자열이 하나 이상의 공백으로 시작하는지 검사함.
\s는 여러가지 공백 문자(스페이스, 탭 등)를 의미. 즉, \s는 [\t\r\n\v\f]와 같은 의미.
- [예제 31-34]
  
  const target = ' Hi!';
  
  // 하나 이상의 공백으로 시작하는지 검사한다.
  
  /^[\s]+/.test(target); // -> true

5). 아이디로 사용 가능한지 검사

다음 예제는 검색 대상 문자열이 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4~10자리인지 검사함.
{4,10}은 알파벳 대소문자 또는 숫자가 최소 4번, 최대 10번 반복되는 문자열을 의미. 즉, 4~10자리로 이루어진 알파벳 대소문자 또는 숫자를 의미함.
- [예제 31-35]
  
  const id = 'abc123';
  
  // 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4 ~ 10자리인지 검사한다.
  
  /^[A-Za-z0-9]{4,10}$/.test(id); // -> true

6). 메일 주소 형식에 맞는지 검사

다음 예제는 검색 대상 문자열이 메일 주소 형식에 맞는지 검사함.
- [예제 31-36]
  
  const email = 'ungmo2@gmail.com';
  
  /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/.test(email); // -> true
인터넷 메시지 형식internet message format 규약인 RFC 5322에 맞는 정교한 패턴 매칭이 필요하다면 복잡한 패턴을 사용해야함.
- [예제 31 - 37]
  
  (?: [a - z0 - 9!#$ %& '*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&' * +/=?^_`{|}~-] +) *| "(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*") @(?: (?: [a - z0 - 9](?: [a - z0 - 9 -] * [a - z0 - 9]) ?\.) +[a - z0 - 9](?: [a - z0 - 9 -] * [a - z0 - 9]) ?|\[(?: (?: 25[0 - 5] | 2[0 - 4][0 - 9] | [01] ? [0 - 9][0 - 9] ?) \.) { 3}(?: 25[0 - 5] | 2[0 - 4][0 - 9] | [01] ? [0 - 9][0 - 9] ?| [a - z0 - 9 -] * [a - z0 - 9] : (?: [\x01 -\x08\x0b\x0c\x0e -\x1f\x21 -\x5a\x53 -\x7f] |\\[\x01 -\x09\x0b\x0c\x0e -\x7f]) +) \])

7). 핸드폰 번호 형식에 맞는지 검사

다음 예제는 검색 대상 문자열이 핸드폰 번호 형식에 맞는지 검사함.
- [예제 31 - 38]
  
  const cellphone = '010-1234-5678';
  
  /^\d{3}-\d{3,4}-\d{4}$/.test(cellphone); // -> true

8). 특수 문자 포함 여부 검사

다음 예제는 검색 대상 문자열에 특수 문자가 포함되어 있는지 검사함. 특수문자는 A-Za-z0-9 이외의 문자임.
- [예제 31-39]
  
  const target = 'abc#123';
  
  // A-Za-z0-9 이외의 문자가 있는지 검사한다.
  
  (/[^A-Za-z0-9]/gi).test(target); // -> true
다음 방식으로 대체해 사용할수도 있다. 이 방식은 특수 문자를 선택적으로 검사할 수 있다는 장점이 있음.
- [예제 31-40]
  
  (/[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi).test(target); // -> true
특수 문자를 제거할 때는 String.prototype.replace 메서드를 사용.
- [예제 31-41]
  
  target.replace(/[^A-Za-z0-9]/gi, ''); // -> abc123

참고

도서 - 모던 자바스크립트 Deep Dive -이웅모

이웅모 강사님 홈피 - https://poiemaweb.com/js-prototype

이웅모 강사님 유튜브 - https://www.youtube.com/watch?v=0AjTZG6bGq8

- https://ko.javascript.info/regexp-introduction

앵커: 문자열... - https://ko.javascript.info/regexp-anchors

문자클래스 - https://ko.javascript.info/regexp-character-classes

✅ 덧, 부분은 스터디 내용을 기억에 의존해서 쓴 글이라 틀린 부분이 있다면 댓글 부탁드립니다.- 뽀짝코딩 주인장-

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

'프론트 > 모던 자바스크립트 Deep Dive 책 스터디' 카테고리의 다른 글

JS)모던 자바스크립트 Deep Dive 37장 Set과 Map (0)	2024.08.11
JS)모던 자바스크립트 Deep Dive 27장 배열 (0)	2024.07.28
JS)모던 자바스크립트 Deep Dive 22장 this (0)	2024.07.26
JS)모던 자바스크립트 Deep Dive 21장 빌트인 객체 (0)	2024.07.25
JS)모던 자바스크립트 Deep Dive 20장 strict mode (0)	2024.07.25

'프론트/모던 자바스크립트 Deep Dive 책 스터디' Related Articles

Comments

코딩기록

JS)모던 자바스크립트 Deep Dive 31장 RegExp 정규표현식 본문

JS)모던 자바스크립트 Deep Dive 31장 RegExp 정규표현식

31장 RegExp

'프론트 > 모던 자바스크립트 Deep Dive 책 스터디' 카테고리의 다른 글

티스토리툴바