JavaScript 정규 표현식(Regular Expression)

JavaScript

JavaScript 정규 표현식(Regular Expression)

kohi ☕ 2022. 10. 16. 22:27

🔍 정규 표현식(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