JavaScript 정규 표현식(Regular Expression)

🔍 정규 표현식(Regular Expression)

---

• 정규식은 문자열에서 특정 내용을 찾거나 대체, 또는 발췌하는 데 사용된다.
• 예를 들어 회원가입 화면에서 사용자로부터 입력 받는 전화번호가 유효한지 체크할 필요가 있다. 이때 정규 표현식을 사용하면 간단히 처리할 수 있다.
• 반복문과 조건문을 사용한 복잡한 코드도 정규 표현식을 이용하면 매우 간단하게 표현할 수 있다.
• 그러나 정규 표현식은 주석이나 공백을 허용하지 않고, 여러가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다는 문제가 있다.
• 정규 표현식은 리터럴 표기법으로 생성할 수 있다. 정규 표현식 리터럴은 아래와 같이 표현한다.

 

 

🔍 정규 표현식 활용 예시

---

💡 오늘만 특가, 오징어 땅콩 180g * 16개 32,600원. 오직 mittmall에서만!

 

• /오/: ‘오’를 하나만 찾는다.
  • 오늘만 특가, 오징어 땅콩 180g * 16개 32,600원. 오직 mittmall에서만!
• /오/g: ‘오’를 모두 찾는다.
  • 오늘만 특가, 오징어 땅콩 180g * 16개 32,600원. 오직 mittmall에서만!
  • g(global) 플래그를 뒤에 붙였다.
• /오징어 땅콩/: ‘오징어 땅콩’을 찾는다.
  • 오늘만 특가, 오징어 땅콩 180g * 16개 32,600원. 오직 mittmall에서만!
• /[오m1]/g: ‘오’, ‘m’, ‘1’을 모두 찾는다.
  • 오늘만 특가, 오징어 땅콩 180g * 16개 32,600원. 오직 mittmall에서만!
• /[0-9]/g: 숫자 0-9를 모두 찾는다.
  • 오늘만 특가, 오징어 땅콩 180g * 16개 32,600원. 오직 mittmall에서만!
• /[^0-9]/g: 숫자 0-9가 아닌 것을 모두 찾는다.
  • 오늘만 특가, 오징어 땅콩 180g **** 16개*** 32***,600원. 오직 mittmall에서만!***
  • 대괄호 [] 안에서 앞에 ^를 쓰면 부정의 기능을 한다.
• [a-zA-Z]g: 영어 알파벳 대문자, 소문자를 모두 찾는다.
  • 오늘만 특가, 오징어 땅콩 180g * 16개 32,600원. 오직 mittmall에서만!

 

🔍 정규 표현식 생성

---

생성자 함수 방식

RegExp 생성자 함수를 호출하여 사용한다.

// 표현식
const regexp = new RegExp("^abc");

// 표현식, 플래그
const regexp2 = new RegExp("^abc", "gi");

 

리터럴 방식

/로 감싸진 패턴을 리터럴로 사용한다. 보통의 경우 리터럴 방식이 편리하다.

// 표현식
const regexp = /^abc/;

// 표현식, 플래그
const regexp2 = /^abc/gi;

 

🔍 정규 표현식 형식

---

💡 /패턴/플래그

• 슬래시 / 사이에는 매칭시킬 패턴을 써 준다.
• 슬래시 / 다음에는 옵션을 설정하는 플래그를 써 준다. 플래그는 옵션이므로 선택적으로 사용한다. 플래그를 사용하지 않은 경우 문자열 내 검색 매칭 대상이 1개 이상이더라도 첫 번째 매칭한 대상만을 검색하고 종료한다.

 

플래그

• i (Ignore Case): 대소문자를 구별하지 않고 검색한다.
• g (Global): 문자열 내의 모든 패턴을 검색한다.
• m (Multi Line): 문자열의 행이 바뀌더라도 검색을 계속 한다.

 

매칭 패턴(문자, 숫자, 기호 등)

• a-zA-Z: 영어 알파벳으로 범위 지정
• ㄱ-ㅎ가-힣: 한글 문자로 범위 지정
• 0-9: 숫자로 범위 지정
• .: 모든 문자열
• \d: 숫자
• \D: 숫자가 아닌 것
• \w: 영어 알파벳, 숫자, 언더 스코어(_)
• \W: \w가 아닌 것
• \s: space
• \S: space가 아닌 것

 

검색 패턴

아래 패턴을 이용하면 AND, OR, StartWith, EndWith 등 다양한 조합을 만들 수 있다.

• |: OR
• []: 괄호 안 문자들 중 하나
• [^문자]: 괄호 안의 문자를 제외한 것
• ^문자열: 특정 문자열로 시작
• 문자열$: 특정 문자열로 끝남
• (): 그룹 검색 및 분류
• (?: 패턴): 그룹 검색 (분류 X)
• \b: 단어의 처음/끝
• \B: 단어의 처음/끝이 아님

 

수량 패턴

특정 패턴이 몇 번 반복되는지 필터링 가능

• ?: 최대 한 번 (없거나 한 번)
• *: 없거나 있음
• +: 최소 한 개
• {n}: n개
• {Min,}: 최소 Min개 이상
• {Min, Max}: 최소 Min개 이상, 최대 Max개 이하

 

🔍 정규 표현식 주요 메서드

---

(“문자열”).match(/정규표현식/플래그)

문자열에서 정규 표현식에 매칭되는 항목들을 배열로 반환

const str = "오늘만 특가, 오징어 땅콩 180g * 16개 32,600원. 오직 mittmall에서만!";

console.log(str.match(/[a-zA-Z]/g));

/* [
  'g', 'm', 'i',
  't', 't', 'm',
  'a', 'l', 'l'
] */

 

(”문자열”).replace(/정규표현식/,”대체문자열”)

정규 표현식에 매칭되는 항목을 대체 문자열로 변환

const str = "오늘만 특가, 오징어 땅콩 180g * 16개 32,600원. 오직 mittmall에서만!";

console.log(str.replace(/오징어 땅콩/, "꼬북칩"));
// 오늘만 특가, 꼬북칩 180g * 16개 32,600원. 오직 mittmall에서만!

 

(”문자열”).split(정규표현식)

문자열을 정규 표현식으로 매칭되는 항목으로 쪼개어 배열로 반환

const str = "오늘만 특가, 오징어 땅콩 180g * 16개 32,600원. 오직 mittmall에서만!";

console.log(str.split(/\\s/g));

/* [
  '오늘만',
  '특가,',
  '오징어',
  '땅콩',
  '180g',
  '*',
  '16개',
  '32,600원.',
  '오직',
  'mittmall에서만!'
] */

 

(정규표현식).test(”문자열”)

문자열이 정규 표현식과 매칭되면 true, 아니면 false 반환

const str = "오늘만 특가, 오징어 땅콩 180g * 16개 32,600원. 오직 mittmall에서만!";

console.log(/^어제/.test(str)); // false

 

(정규표현식).exec(”문자열”)

match 메서드와 유사 (단, 무조건 첫 번째 매칭 결과만 반환)

const str = "오늘만 특가, 오징어 땅콩 180g * 16개 32,600원. 오직 mittmall에서만!";

console.log(/[a-zA-Z]/.exec(str));

/* [
  'g',
  index: 18,
  input: '오늘만 특가, 오징어 땅콩 180g * 16개 32,600원. 오직 mittmall에서만!',
  groups: undefined
] */

 

🔍 정규 표현식 활용 코드

---

• 웹사이트 주소 정규 표현식
  • http:// 혹은 https://로 시작하고 알파벳, 언더스코어, 하이픈, dot으로 이루어져 있다.

  const str = "개준생 mitt의 티스토리: <https://trustmitt.tistory.com>";
  
  console.log(str.match(/https?:\\/\\/[\\w\\-\\.]+/g));
  // [ '<https://trustmitt.tistory.com>' ]
  

  • /https?:\/\/[\w\-\.]+/g
    • http ⇒ 로 시작
    • s? ⇒ 다음 s는 있거나 없다.
    • : ⇒ 다음으로 :
    • \/\/ ⇒ 다음으로 특수기호 //
    • [\w\-\.]+ ⇒ 영문자, 언더스코어, 하이픈, dot으로 이루어진 문자열이 한 개 이상 있다.
    • 플래그 g ⇒ 매칭되는 걸 모두 반환

 

• 전화번호 정규 표현식
  • 유선 번호는 02-111-1111, 핸드폰은 010-1111-1111 형식이다. 숫자의 개수가 다르다.

  const str = "오징어 땅콩 구입 문의: 010-1111-1111 neartheclouds@naver.com";
  
  console.log(str.match(/\\d{2,3}-\\d{3,4}-\\d{4}/g));
  // [ '010-1111-1111' ]
  

  • /\d{2,3}-\d{3,4}-\d{4}/g
    • \d{2,3} ⇒ 숫자 2-3개로 시작
    • \- ⇒ 다음 하이픈
    • \d{3,4} ⇒ 다음 숫자 3-4개
    • \- ⇒ 다음 하이픈
    • \d{3,4} ⇒ 다음 숫자 3-4개
    • 플래그 g ⇒ 매칭되는 걸 모두 반환

 

• 이메일 주소 정규 표현식
  • xxx@xxx.com

  const str = "오징어 땅콩 구입 문의: 010-1111-1111 neartheclouds@naver.com";
  
  console.log(str.match(/[\\w\\-\\.]+\\@[\\w\\-\\.]+/g));
  // [ 'neartheclouds@naver.com' ]
  

 

• 아이디로 사용 가능한지 검사
  • 영문자, 숫자만 허용, 4~10 자리

  const id = "mainmirror";
  
  console.log(/^[A-Za-z0-9]{4,10}$/.test(id)); // true
  

 

• 특수문자 포함 여부 검사

  const str = "m@ainmirror";
  
  // case 1
  console.log(/[^A-Za-z0-9]/gi.test(str)); // true
  
  // case 2
  regexr = /[\\{\\}\\[\\]\\/?.,;:|\\)*~`!^\\-_+<>@\\#$%&\\\\\\=\\(\\'\\"]/gi;
  console.log(regexr.test(str)); // true
  
  // 특수문자 제거
  console.log(str.replace(regexr, "")); // mainmirror
  

 

🔍 Reference

---

https://poiemaweb.com/js-regexp

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=jeongju02&logNo=221517177533

https://heropy.blog/2018/10/28/regexp/

https://curryyou.tistory.com/234