정규 표현식 RegExp

정규 표현식 RegExp

정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다.
패턴 매칭 기능이란 특정 패턴과 일치하는 문 자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다.

정규 표현식의 구조 및 생성 방법

정규 표현식 객체(RegExp 객체)를 생성하기 위해서는
정규 표현식 리터럴과 RegEXp 생성자 함수를 사용할 수 있다.
일반적인 방법은 정규 표현식 리터럴을 사용하는 것이다.

const target = 'Is this all there is?';
//패턴: is
//플래그: 1 => 대소문자를 구별하지 않고 검색한다.
//1. 정규 표현식 리터럴 사용
const regexp = /is/i;
//test 메서드는 target 문자열에 대해 정규 표현식 regexp의 패턴을 검색하여 매칭 결과를 
//불리언 값으로 반환한다.
regexp.test(target); //- true
RegEXp 생성자 함수를 사용하여 REgEXP 객체를 생성할 수도 있다.

//구조
//new RegExp(pattern[, flags])
//2. 정규 표현식 생성자 함수 사용
const target = 'Is this all there is?';
const regexp = new RegExp(/is/i); // ES6
// 위와 동일 const regexp = new RegExp(/is/, 'i');
regexp.test(target); // - true

RegExp 메서드

1. regexp.exec(target)
   인수로 전달받은 문자열에 대해 정규표현식의 패턴 검색하여 매칭결과를 배열로 반환한다.
   없다면 null을 반환한다.
   참고로 g플래그를 지정해도 첫번째 매칭결과만 반환한다.

2. regexp.text(target)
   target 문자열에 대하 정규 표현식의 패턴을 검색하여 매칭 결과를 불리언 값으로 반환

3. string.prototype.match()
   대상 문자열과 인수로 전달받은 정규 표현식과의 매칭결과를 배열로 반환
   exec() 와 달리 g플래그가 지정되면 모든 매칭 결과를 배열로 반환한다.

플래그 : 검색방식을 설정하기 위해 사용

1) i : 대소문자 구별하지 않고 패턴 검색
2) g : 패턴과 일치하는 모든 문자열을 전역 검색
3) m : 문자열의 행이 바뀌더라도 패턴 검색을 계속

패턴 : 문자열의 일정한 규칙을 표현하기 위해 사용한다.

패턴은 /로 열고 닫으며 문자열의 따옴표는 생략한다. 따옴표를 포함하면 따옴표까지 패턴에 포함되어 검색된다.

• 임의의 문자열 검색
  . 은 임의의 문자 한 개를 의미한다. 문자의 내용은 무엇이든 상관없다. 아래의 경우.을 3개 연속하여 패턴을 생성했으므로 문자의 내용과 상관없이 3자리 문자열과 매치한다.

  const target = 'Is this all there is?';
  // 임의의 3자리 문자열을 대소문자를 구별하여 전역 검색한다.
  const regExp = / ... /g;
  target.match(regExp); // - ["Is ", "is?"]

• 반복 검색
  {m,n}은 앞선 패턴(다음 예제의 경우 A)이 최소 m번, 최대 n번 반복되는 문자열을 의미한다.
  콤마 뒤에 공백 이 있으면 정상 동작하지 않으므로 주의하자.

  const target='A AA B BB Aa BD AAA';
  //'A'가 최소 1번, 최대 2번 반복되는 문자열을 전역 검색한다.
  const regExp = /A{1,2}/g;
  target. match(regExp); // - ["A", "AA", "A", "AA", "A"] 
  const target2 = 'A AA B BB Aa Bb AAA';
  //'A'가 2번 반복되는 문자열을 전역 검색한다.
  const regExp2 = /A{2}/g;
  target2.match(regExp2); // - ["AA", "AA"]
  const target3 = 'A AA B BB Aa Bb AAA';
  //'A'가 최소 2번 이상 반복되는 문자열을 전역 검색한다.
  const regExp3 = /A{2,}/g;
  target3.match(regExp3); // - ["AA", "AAA"]

+는 앞선 패턴이 최소 한번 이상 반복되는 문자열을 의미한다.

const target='A AA B BB Aa Bb AAA':
//'A'가 최소 한 번 이상 반복되는 문자열('A, AA', AAA ', ... )을 전역 검색한다.
const TegEXp = /A+/g;
target.match(regEXp); 1/ - ["A", "AA", "A", "AAA"]

?는 앞선 패턴이 최대 한 번(0번 포함) 이상 반복되는 문자열을 의미한다.

const target = 'color colour';
//'colo' 다음 'u'가 최대 한 번(0번 포함) 이상 반복되고
//'r' 이 이어지는 'color', 'colour'를 전역 검색한다.
const regExp = /colou?r/g;
target.match(regExp); // - ["color", "colour"]

• or 검색

1. ㅣ은 or의 의미를 갖는다. /A|B/는 'A' 또는 'B'를 의미한다.
2. [AB] 도 'A' 또는 'B'를 의미한다. 즉 [ ] 내부의 문자는 or로 동작한다.
   • 범위를 지정하려며 [ ] 내부에 - 를 사용한다.

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"]

const target2='A AA BB ZZ Aa Bb';
//'A'~'Z'가 한 번 이상 반복되는 문자열을 전역 검색한다.
// 'A', 'AA', 'AAA',.. 또는 'B', 'BB', 'BBB', ... ~ 또는 'Z', 'ZZ', 'ZZZ', ...
const regExp2 = /[A-Z]+/g;
target2.match(regExp2); //- ["A", "AA", "BB", "ZZ", "A", "B"]

참고로 패턴 검색 시

• /[\d]/ : 숫자를 의미, [0-9] 와 같다
• /[\D]/ : 문자를 의미 \d와 반대
• /[\w]/ : 알파벳, 숫자, 언더스코어를 의미하며 [A-Za-z0-9_] 와 같다
• /[\W]/ : \w와 반대의 의미를 가진다.

• not 검색
  NOT 검색 : [...]내의 ^은 not의 의미를 가진다 [^0-9] 는 숫자를 제외한 문자를 의미한다.

• 시작위치검색 : [...]밖의 ^은 문자열의 시작을 의미한다 /^http/ 라면 http로 시작하는 문자열을 말한다.
  
  
• 마지막위치검색: $는 문자열의 마지막을 의미한다.
  /com$/; 라면 com 으로 끝나는 문자열을 말한다.

자주 사용되는 정규 표현식!

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

   const url = "https://example.com";
   const regExp = /^https?:\/\// ;       
   // http:// 또는 https:// 로 시작하는지 검사한다. 
   regExp.test(url) ;  // true

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

  const fileName = "index.html"
  const regExp = /html$/ ; 
  regExp.text(fileName) ; // ture

3. 숫자로만 이뤄진 문자열인지 검사

const target = '12345';
 /^\d+$/.test(target); // true   

• ^ 문자열이 시작이 숫자고 $끝도 숫자이며
  \d는 숫자를 의미하고 +는 앞선 패턴이 최소 한번이상 반복되는 문자열을 의미한다.
  즉 처음과 끝이 숫자이고 최소 한번이상 반복되는 문자열과 매치한다.

4. 하나 이상의 공백으로 시작하는지 검사, 모든 공백체크
   \s 는 여러가지 공백문자를 의미한다 (스페이스 탭등,,, [\t\r\n\v\f]와 같음)

const target = " HI! ";
/^[\s]+/.test(target); // true    
const regExp = /\s/g; // 이것도 가능 replace로 없앨 수도 있음

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

const id = 'abc123';
// 알파벳 대소문자 or 숫자로 시작하고 끝나며 
// 4~10자리인지 검사한다.
/^[A-Za-z0-9]{4,10}$/.test(id); // true 

6. 핸드폰 형식에 맞는지 검사

const cellphone = ' 010-1234-5678';
/^\d{3}-\d{3,4}-\d{4}$/.test(id); // true 

7. 특수 문자 포함 여부 검사

// 모든 특수문자 포함여부
const target = 'abc#123';
(/[^A-Za-z0-9]/gi).test(target); // - true

//선택적으로 특수문자 포함 여부 확인
const regExp = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi;

// 특수 문자를 제거할 때는 string.prototype.replace 메서드 사용
//특수 문자를 제거한다.
target.replace(/[^A-Za-z0-9]/gi, "'); // - abc123

8. 이메일 체크 정규식

const regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;

9. 아이디나 비밀번호 정규식

const regExp = /^[a-z0-9_]{4,20}$/;