[자바스크립트] 정규표현식 (유효성 검사)

송히·2023년 8월 3일
0

개발 공부 🐨

목록 보기
2/15
post-thumbnail

자바스크립트로 코드를 작성하다보면 대문자가 포함되어있는지, 대문자만으로 이루어진 문자열인지 등 조건을 검사하는 경우가 생깁니다.
또, 문제를 풀다보면 특정 단어 혹은 특정 문자열, 특수문자들 등을 찾거나 삭제하는 식의 풀이도 하게 됩니다.

이러한 유효성 검사를 하기 위해서는 정규표현식이 필요합니다 !

언뜻보면 복잡해보이지만 알고보면 규칙적인 정규표현식에 대해 공부했습니다😊


1. 정규표현식이란 ?

Regular Expression인 정규표현식RegExp 혹은 Regex라고 불립니다.

일정한 패턴의 문자열을 찾는 역할을 하고, 적절한 메서드와 함께 사용하면 다양하게 활용할 수 있습니다.
예를 들어 .match(), .replace(), .test(), ... 등이 있습니다.

정규표현식에 익숙해지고 싶다면 RegExr와 같은 사이트에서 연습해볼 수 있습니다.


2. 정규표현식 생성 방법

정규표현식은 리터럴 방식, 생성자 함수 방식 2가지로 표현할 수 있습니다. 보통 리터럴 방식을 더 많이 사용합니다.

2-1. 리터럴 방식

정규표현식을 슬래시(/) 기호로 둘러싸서 직접 작성하는 방법
➡️ 하드코딩이기 때문에 정규표현식이 고정되어 있고, 코드 실행 시점에 이미 패턴이 결정된 경우에 주로 사용함
=> 스크립트 로딩될 때 한번만 컴파일 되니까 효율적임

const regex = /ab+c/i; // /패턴/플래그

2-2. 생성자 함수 방식

RegExp 객체의 생성자를 사용하여 정규표현식을 동적으로 생성하는 방법
➡️ 실행 시점에 정규표현식이 결정되거나, 변경 가능한 문자열 기반의 정규표현식일 때 경우 주로 사용
=> 유연하지만, 런타임 시점에 실행 되기 때문에 매번 객체를 생성해서 컴파일 해야하므로 여러 번 사용되면 성능이 떨어짐

const pattern = "ab+c";
const flags = "i";
const regex = new RegExp(pattern, flags);

3. 정규표현식 생성에 사용되는 구문

  • 리터럴 문자: 목표하는 정확한 특정 단어 / 문자열 그 자체
    ex) "a", "word", "Hello World!", "?", ...

  • 메타 문자: 패턴을 만들 때 사용하는 특별한 의미를 지닌 문자

메타 문자의미메타 문자의미
.줄바꿈 문자를 제외한 어떤 한 문자와 일치^입력의 시작과 일치
*앞의 표현식이 0회 이상 반복되는 경우와 일치$입력의 끝과 일치
+앞의 표현식이 1회 이상 반복되는 경우와 일치?앞의 표현식이 0회 / 1회 등장하는 경우와 일치
\ 다음에 오는 문자를 리터럴 문자로 읽히게 해줌|논리 연산자 OR과 의미 동일

  • 문자 클래스: [] 사용
문자 클래스의미문자 클래스의미
[abc]괄호 안에 있는 문자면 어떤 거든 일치 ex)a, b, c 중 하나[^abc]괄호 안 문자들 제외하고는 다 일치
[a-z]a-z까지의 어떤 소문자든 일치[A-Z]A-Z까지의 어떤 대문자든 일치
[0-9]0-9까지의 어떤 숫자든 일치

  • 이스케이프 처리되어 의미를 가지는 문자: \ 사용
문자 클래스의미문자 클래스의미
\d0-9까지의 모든 숫자와 일치\D숫자를 제외한 모든 문자와 일치
\w모든 알파벳 및 숫자와 일치\W알파벳 및 숫자 제외 모든 문자와 일치
\s모든 공백 문자와 일치 (스페이스, 탭, ...)\S공백 문자를 제외한 모든 문자와 일치

  • 수량자: 바로 앞의 요소가 반복되어야하는 횟수
수량자의미수량자의미
{n}n번 반복
{n,}최소 n번 반복{n,m}최소 n번 최대 m번 반복

  • 플래그: 검색 패턴 지정, 여러 플래그를 붙여 사용하기 가능
    ex) gi, gm, im, ...
수량자의미수량자의미
g전역 검색 (일치하는 모든 항목 반환)i대소문자 구분 없이 검색
m다중 줄 모드 (입력의 각 줄이 시작과 끝으로 처리됨)


4. 자주 사용되는 정규표현식 예시

리터럴 방식으로 예시들었습니다.

  • 이메일 유효성
const email = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/;

const email1 = "wonpil@velog.com";
const email2 = "wonpil+day6@velog.com";
const email3 = "wonpil@sub.velog.co.uk";
const email4 = "wonpil-velog@com";

email.test(email1); // true
email.test(email2); // true
email.test(email3); // true
email.test(email4); // false
  • 안전한 비밀번호 유효성
    -> 최소 8자 이상, 하나 이상의 대문자 & 소문자 & 숫자 & 특수문자 포함
const password = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

const pass1 = "Password123!";
const pass2 = "password";
const pass3 = "PASSWORD123!";
const pass4 = "Pass1234";

password.test(pass1); // true
password.test(pass2); // false (소문자만 있음)
password.test(pass3); // false (대문자와 숫자만 있음)
password.test(pass4); // false (특수문자 없음)
  • 휴대전화 유효성
const phone = /^010-(\d{4})-(\d{4})$/;

const numStr = "010-1994-0428";
const result = phone.exec(numStr);

console.log(result);
// ['010-1994-0428', '1994', '0428', index: 0, input: '010-1994-0428', groups: undefined]
  • 웹 주소 유효성
const URL = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;

const url1 = "https://www.example.com";
const url2 = "http://example.com";
const url3 = "www.example.com";
const url4 = "example";

URL.test(url1); // true
URL.test(url2); // true
URL.test(url3); // true
URL.test(url4); // false (도메인 형식 아님)
  • 문자열 시작과 끝의 공백 제거 패턴
const trim = /^\s+|\s+$/g;

const str = "   Kim Won Pil   ";
const result = str.replace(trim, "");

console.log(result); // "KimWonPil"
  • HTML 태그 찾기
const html = /<[^>]+>/g;

const str = "<p>This is a paragraph.</p>";

if (str.match(html)) console.log(hasHTMLTags); // true
  • 대문자가 포함되어있는지 확인
const capital = /[A-Z]/;

const str1 = "AGHE";
const str2 = "SEgwq";
const str3 = "Sh1235";
const str4 = "hje1235";

capital.test(str1); // true
capital.test(str2); // true
capital.test(str3); // true
capital.test(str4); // false
  • 대문자만으로 이루어져있는지 확인
const onlyCapital = /^[A-Z]+$/;
// ^ 으로 문자열의 시작을 찾고, [A-Z]+ 으로 문자열을 돌면서 각 문자열이 대문자인지 확인, $ 으로 문자열의 끝까지 확인

const str1 = "AGHE";
const str2 = "SEgwq";
const str3 = "Sh1235";
const str4 = "hje1235";

onlyCapital.test(str1); // true
onlyCapital.test(str2); // false
onlyCapital.test(str3); // false
onlyCapital.test(str4); // false

참고한 자료: 📝 [JS 공부기록] 정규표현식(Regular Expression)
[JavaScript] 정규표현식(RegExp)이란?
[자바스크립트] 정규표현식(Regular Expression) 기초/기본 쉽고 상세한 사용 방법 정리(샘플 예제 코드)

profile
데브코스 프론트엔드 5기

0개의 댓글

관련 채용 정보