정규 표현식 기초 및 활용

정규 표현식이란?

문자열의 패턴을 정의하여 특정 조건에 맞는 텍스트를 검색하거나 검증하는 도구입니다. 컴퓨터가 이해할 수 있는 문자열 일치 규칙을 표현합니다.

표현 방식

var regex1 = new RegExp('패턴', '옵션');
var regex2 = /패턴/옵션;

기본 매칭 문자

  • \d: 숫자(0-9) 하나와 매칭
  • \D: 숫자가 아닌 문자 하나와 매칭
  • \w: 영문자, 숫자, 언더스코어 포함된 단어 형식 문자
  • \W: 단어 형식이 아닌 문자
  • \s: 공백(스페이스, 탭 등)
  • \S: 공백이 아닌 문자
  • \b: 단어 경계
  • \B: 단어 경계가 아님
  • .: 임의의 한 글자 (줄바꿈 제외)
const text = '789xyz';
const digitOnly = /^\d+$/; // 전부 숫자인지 확인
console.log(digitOnly.test(text)); // false

반복 수량자

  • ?: 0회 또는 1회 발생
  • +: 1회 이상 발생
  • *: 0회 이상 발생
  • {n}: 정확히 n번 반복
  • {n,m}: n~m번 사이 반복
  • {n,}: 최소 n번 이상 반복

선택 및 범위 지정

  • [abc]: a, b, c 중 하나와 매칭
  • [a-z0-9]: 소문자 알파벳 또는 숫자 중 하나

시작과 끝 제한

  • ^: 문자열의 시작과 매칭
  • $: 문자열의 끝과 매칭

플래그 옵션

  • g: 전체 일치, 첫 번째 결과 이후에도 계속 검색
  • i: 대소문자 무시

주요 메서드

  • test(str): 일치 여부 반환 (true/false)
  • replace(reg, replacement): 매칭된 부분을 새로운 값으로 교체
const input = 'hello world hello';
const pattern1 = /hello/;
const pattern2 = /hello/gi;

console.log(input.replace(pattern1, '*'));   // * world hello
console.log(input.replace(pattern2, '*'));   // * world *

실용적인 패턴 예제

// 사용자명: 6~20자, 영문자, 숫자, 언더스코어만 허용
const usernamePattern = /^[\w]{6,20}$/;

// 이메일 형식: 시작은 알파벳/숫자, @ 이후 도메인, 최대 두 개의 점 포함
const emailPattern = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;

// 비밀번호: 6~20자, 특수문자 포함 가능
const passwordPattern = /^[\w!@#$%^&*]{6,20}$/;

// 핸드폰 번호: 13, 14, 15, 18로 시작하고 11자리
const phonePattern = /^1[3458]\d{9}$/;

폼 검증 실습 예제

회원가입 폼에서 입력값을 정규 표현식으로 유효성 검사하는 경우, 위 패턴들을 활용하여 사용자명, 이메일, 비밀번호, 전화번호의 형식을 실시간으로 확인할 수 있습니다.

태그: 정규 표현식 JavaScript 검증 문자열 처리 폼 유효성

5월 24일 19:13에 게시됨