[jQuery][국비교육] Day 52

🔍 정규식, Regular Expression

정규 표현식, regex

• 문자열에서 특정 규칙에 맞는 문자열을 찾아내기 위한 표현법
• 특정 패턴을 가진 문자열을 찾아내서 검색, 교체, 삭제 등의 작업을 할 수 있음
  👉🏻 <form>태그에 입력된 데이터가 프로그램에서 원하는 형식이 맞는지 검사할 때 등 사용
• 기본 문법 : /정규식 패턴/플래그

➰ 자바스크립트에서 정규식 사용방법

👉🏻 둘 다 변수에 저장하여 사용할 수 있음

• 정규식 리터럴을 이용
  /pattern/flag

• 정규식 객체RegExp를 이용
  new RegExp("pattern", "flag")

➰ 자바스크립트 정규식 적용 함수

• 문자열.match(정규식) : 문자열에서 정규식패턴에 맞는 문자열을 찾음
  👉🏻 정규식의 API가 아니라 문자열의 API임 / 정규식을 활용하는 문자열의 API

var str = "apple banana cherry application"

//정규식 패턴에 맞는 데이터를 찾아 결과데이터 반환
console.log(str.match(/apple/))		// -> 일치하는 문자열의 인덱스
console.log(str.match(/banana/))

//패턴에 맞는 데이터 없음 -> null 반환
console.log(str.match(/orange/))

//----------------------------------------------------------------

//g 플래그 없음 -> 첫번째 매칭되는 패턴 1개만 찾음
console.log(str.match(/app/))
➡ apple 하나만 찾음

//g 플래그 있음 -> 매칭되는 패턴을 모두 찾음
console.log(str.match(/app/g))
➡ apple, application 모두 찾음

• 문자열.replace(정규식, 교체문자열) : 문자열에서 정규식 패턴에 맞는 문자열을 찾아 교체문자열로 치환환 결과를 반환
  👉🏻 정확히 특정 패턴을 찾아서 바꾸기 ➡ 딱 하나가 아니라! 대문자들 전부~ 같은 식으로 패턴 혹은 규칙을 찾아서 바꾸는데 사용
  👉🏻 정규식의 API가 아니라 문자열의 API임 / 정규식을 활용하는 문자열의 API

var str = "apple banana cherry application"

var res1 = str.replace(/app/, "TEST")	//원본은 건들이지 않고 반환값으로 결과를 보냄
console.log(str)	// -> 원본 그대로 출력
console.log(res1)	// -> 반환된 결과값 출력
➡ apple 하나만 변환

var res2 = str.replace(/app/g, "NEXT")
console.log(str)
console.log(res2)
➡ apple, application 모두 변환

• 정규식.test(문자열) : 문자열에 정규식 패턴이 맞는 부분이 있는지 확인함 👉🏻 Boolean 반환 ➡ true / false만 반환하므로 flag의 유무가 상관이 없음

console.log(/app/.test(str)) ➡ true
console.log(/app/g.test(str)) ➡ true

• 정규식.exec(문자열) : 문자열.match(정규식) 사용법과 비슷하게 동작 👉🏻 g 플래그를 적용해도 첫번째 매칭만 반환

➰ 정규식 플래그

• i, case Insensitive : 대소문자 구분없이 적용
• g, Global : 패턴 일치하는 모든 문자열 검색 👉🏻 g가 없으면 한 번만 검색
• m, Multiline : 다중행 모드 👉🏻 줄 바꿈이 있어도 인식하도록 설정
  〰〰〰〰 위에 세개는 자주, 특히 g를 제일 많이 사용할 것 / 아래 두개는 잘 사용하지 않음 〰〰〰〰
• u, Unicode : 유니코드를 적용할 수 있도록 설정
• y, stickY : 스티키 모드 활성화 👉🏻 지정한 위치에 달라붙어서 그때이후로 찾을 수 있도록 조절할 수 있음 but, 조정하기가 까다로움

➰ 정규식 객체의 lastIndex 프로퍼티

문자열에서 정규식이 적용될 위치를 지정 👉🏻 정규식.exec(), 정규식.test() 메소드에서 활용됨

• g플래그, y플래그를 적용했을 때 lastIndex도 적용됨
• g플래그를 적용하면 lastIndex부터 뒤쪽 인덱스에서 패턴을 매칭시킴 👉🏻 유동위치
• y플래그를 적용하면 lastIndex에 있는 문자열에 패턴을 매칭시킴 👉🏻 고정위치

➰ 정규식 패턴 작성방법

• 단순패턴 : 문자열을 있는 그대로 패턴으로 적용

  👀 Example
  /apple/ 👉🏻 "apple"과 똑같은 문자열을 찾음

• 특수패턴 : 정규식 특수 기호들을 이용하여 특정 형식을 갖춘 문자열을 찾음
  참고 사이트

➰ 정규식 특수문자

메타문자, 특수 패턴에 사용되는 특수 기호들
✔ 정규식에서 사용하는 특수문자들
[ ] \ ^ $ . | ? * + ( ) /

• \ : 이스케이프 문자(시퀀스)
  역슬래시 다음에 일반문자가 오면 특수문자로 인식, 특수문자가 오면 일반문자로 인식

  • \^ : ^를 일반문자로 인식

  • \d : digit, 0~9 숫자를 패턴으로 매칭시켜줌 👉🏻 0~9 중 아무거나

  • \D : not digit, 0~9가 아닌 문자

  • \w : word, 알파벳 대소문자, 숫자, _언더스코어 👉🏻 언더스코어를 제외한 특수문자 인식x

  • \W : not word, \w패턴에 매칭되지 않는 문자

  • \s : space, 공백문자(스페이스, 탭, 개행)

  • \S : not space, \s패턴에 매칭되지 않는 문자

  • \b : word boundary, 단어의 경계부분(단어의 앞, 뒤 경계선)을 나타냄

  • \B : not word boundary, \b패턴에 매칭되지 않는 문자
    👉🏻단어의 중간이 아닌 시작부분, 끝부분에 매칭되는 패턴을 선택할 수 있음

    ---

  • . : dot, 개행을 제외한 어느 문자든지 매칭

  • ^ : carot, 전체 문장의 시작을 나타냄 👉🏻 패턴의 첫 문자로 올 수 있음
    ➡ 전체에서 하나만 찾아주고, flag m을 넣어주면 문장의 시작마다 찾아줌

  • $ : dollar, 전체 문장의 끝을 나타냄 👉🏻 패턴의 마지막 문자로 올 수 있음
    ➡ \.$을 적용하면 전체 문장에서 마지막 .을 찾아주고, flag m을 적용하면 문장마다 마침표를 찾아줌

    • ^단어$ 형식으로 사용하면 완전 일치 문자를 찾음 👉🏻 문자열 전체를 완전 일치하는 단어 패턴으로 찾을 때 사용하므로 문장이 아닌 단어 수준일 때 사용
    • ❗ <input>태그에 입력된 값을 검사할 때 사용 ➡ 자주 사용하게 될 것

  • | : or, 둘 중에 하나라도 매칭된다면 만족 👉🏻 연속으로 |를 사용하여 패턴을 나열할 수 있음

  • [] : 문자들의 집합

    • 나열된 문자들을 각각의 패턴으로 적용 👉🏻 나열된 문자들 사이에 |를 사용한 것과 같음
      [abcde]과 a|b|c|d|e가 같은 효과
    • 연속된 ASCII 문자라면 -로 연결하여 표현 가능

      👀 Example
      a~z까지 : [a-z] / 소문자들과 1~5까지 : [a-z][1-5] ➡ [a-z1-5] / 알파벳과 숫자 : [a-zA-Z0-9] / 한글 :[ㄱ-ㅎ] [ㅏ-ㅣ] [가-힣] ➡ [ㄱ-하-ㅣ가-힣]

      ❗ [^0-9] 대괄호 안에서 사용되는 ^는 not(부정)을 의미 👉🏻 숫자가 아닌

    ---

  • + : 앞에 있는 패턴이 1회 이상 연속으로 반복될 때 매칭

  • * : 앞에 있는 패턴이 0회 이상 연속으로 반복될 때 매칭

  • ? : 앞에 있는 패턴이 0회 또는 1회 나타날 때 매칭

    👀 Example
    gr+ : r에 +가 붙어 r이 1회 이상 나올 때
    gr* : r에 *가 붙어 r이 0번 나오거나 그 이상 나올때
    gr? : r에 +가 붙어 r이 0회 또는 1회 나타날 때 매칭

  • {횟수} : 앞에 있는 패턴이 지정된 횟수만큼 나타날 때 매칭

    • 원하는 만큼 사용자 지정으로 정할 수 있음 👉🏻 위에 있는 애들 없이도 이걸로 해결 가능
      - {최소횟수, 최대횟수} : 최소횟수 이상 최대횟수 이하 / {최소횟수, } : 최소횟수 이상
      ✔ 가능한 최대한 많이 반복되는 패턴을 한 묶음으로 처리함

  • 횟수를 표현하는 기호들(수량제한자) +, {} 뒤에 ? 기호를 붙일 수 있음 👉🏻 최소횟수를 만족하는 문자들을 묶음으로 처리함

    • 수량제한자들은 탐욕알고리즘으로 동작함(Greedy)
    • 수량제한자 뒤에 ? 기호를 붙으면 게으른 알고리즘으로 동작함(Lazy)

  • () : 그룹으로 묶어서 패턴으로 적용

    👀 Example
    AppleAppleAppleAppleAppleApple
    Apple{2,4}를 적용하면 e에만 적용되어 <e가 2개~4개인 애들을 찾게 될 것>
    (Apple){2,4}로 그룹핑해서 검색해야 Apple이 검색됨
    👉🏻 여기서 검색결과는 AppleAppleAppleApple / AppleApple 이렇게 !최대단위인 4개씩! 묶게 될 것이고 ➡ Greedy
    (Apple){2,4}?로 검색하면 AppleApple / AppleApple / AppleApple 이렇게 최소한으로 2개씩 묶이게 될 것 ➡ Lazy

    • ()를 다른 패턴 앞뒤를 탐색해보는 기호로 사용할 수 있음
      👉🏻 전후방 탐색자, Lookaround : 패턴을 찾을 때 지정된 탐색패턴이 전방, 후방에 같이 적용되어있는지 검사
      • ?= : 뒤쪽에 탐색패턴이 있어야 만족 패턴(?=탐색패턴)
      • ?! : 뒤쪽에 탐색패턴이 없어야 만족 패턴(?!탐색패턴)
      • ?<= : 앞쪽에 탐색패턴이 있어야 만족 (?<=탐색패턴)패턴
      • ?<! : 앞쪽에 탐색파턴이 없어야 만족 (?<!탐색패턴)패턴