본문 바로가기

JavaScript/Information

[JavaScript] 정규표현식이란? 개념 정리 및 메타문자와 차이점 + 정규식 플래그

 

 

 

 

 [JavaScript] 정규표현식이란? 개념 정리 및 메타문자와 차이점 



🍓목차

더보기

- 정규표현식이란?

  • 장점
  • 단점

- 패턴 종류

- ‼️ 정규표현식 예시

- 메타문자와 차이점?

  • 정규표현식 사용 시 유용한 상황은 어떤 것이 있나요?

- 정규식 플래그란?

 

 

정규표현식이란?

- 문자열에서 특정 내용을 찾거나 대체하고, 패턴에 부합하는지 검사하는 데 사용됩니다.

- 정규표현식은 두 개의 슬래시(/) 사이에 위치한 패턴으로 표현할 수 있는데요?

- 예를 들어 /apple/는 "apple"라는 문자열을 찾는 정규표현식입니다.

 

 

장점

  • 강력함: 정규표현식은 복잡한 문자열 패턴을 찾고 조작할 수 있는 매우 강력한 도구입니다.
  • 유연성: 다양한 메타문자와 수량자를 조합하여 복잡한 패턴을 표현할 수 있습니다.
  • 언어 독립성: 대부분의 프로그래밍 언어에서 지원하므로, 다양한 언어에서 비슷하게 사용할 수 있습니다.
  • 코드 최적화: 정규표현식을 사용하면 긴 코드를 짧게 줄일 수 있으며, 이는 가독성과 유지보수 측면에서 이점이 될 수 있습니다.

 

단점

  • 가독성: 정규표현식은 처음 보는 사람에게는 이해하기 어려울 수 있으며, 디버깅도 어렵습니다.
  • 학습 곡선: 메타문자와 특별한 구문들을 배우고 익숙해지는 데 시간이 필요합니다.
  • 성능 문제: 잘못 작성된 정규표현식(예를 들어, 역 추적(backtracking)이 많은 경우)은 성능 저하를 초래할 수 있습니다.

 

 

정규표현식 내에서 다양한 메타문자와 수령자를 사용해 복잡한 패턴을 만들 수 있습니다.

 

 매칭 패턴 
a-z, A-Z 영어알파벡(-으로 범위 지정)
ㄱ-ㅎ, 가-힣 한글 문자(-으로 범위 지정)
0-9 숫자(-으로 범위 지정)
.(점) 어떠한 문자와도 매치될 수 있는 와일드카드입니다.
예를 들어, h.t는 "hat", "hit", "hot" 등과 매치됩니다.
\d 숫자와 매치됩니다.
\D 숫자가 아닌 것과 매치됩니다.
\w 영어 알파벳, 숫자, 언더스코어(_)
\W 영어 알파벳, 숫자, 언더스코어(_)가 아닌 것
\s space 공백과 매치됩니다.
\S spcae 공백이 아닌것과 매치됩니다.
\특수기호 특수기호와 매치됩니다.

 

 검색 패턴 
[] 괄호안의 문자들 중 하나
[^문자] 괄호안의 문자를 제외한 것
^문자열 특정 문자열로 시작(괄호 없음)
문자열$ 특정 문자열로 끝남
() 그룹 검색 및 분류
(match메서드에서 그룹별로 묵어줄 수 있다.)
(?: 패턴) 그룹 검색(분류X)
\b 단어의 처음/끝
\B 단어의 처음/끝이 아닌 것

 

 횟수 패턴 
? 최대 한번(없음 or 1개)
* 앞선 문자가 0번 이상 반복되는 패턴과 매치
+ 앞선 문자가 1번 이상 반복되는 패턴과 매치
{n} 앞선 문자가 n번 반복되는 패턴과 일치
{Min,} 최소 Min개 이상
{Min, Max} 최소 Min개 이상, 최대 Max개 이하

 

 

정규표현식 예시

비밀번호 유효성 검사)

function validatePassword(password) {
    var regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/;
    return regex.test(password);
}

console.log(validatePassword("password1")); // true (적어도 하나의 문자와 숫자를 포함하며 8자 이상임)
console.log(validatePassword("pass")); // false (8자리를 만족하지 않음)

위의 정규표현식은 비밀번호가 적어도 하나 이상의 알파벳 문자와 숫자를 포함하며 8자리 이상인지 확인합니다.

 

 

이메일 형식 검)

function validateEmail(email) {
    var regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return regex.test(email);
}

console.log(validateEmail("test@example.com")); // true
console.log(validateEmail("not an email")); // false

위의 정규표현식은 이메일 주소가 올바른 형식인지 확인합니다. [a-zA-Z0-9._%+-]+는 하나 이상의 알파벳, 숫자, 점(.), 백분율(%), 더하기(+), 빼기(-)로 시작하고 @가 따라옵니다. 그다음 [a-zA-Z0-9.-]+로 도메인 이름이 오고 마지막으로 \.[a-zA-Z]{2,} 부분은 최소 두 글자 이상의 도메인 톱레벨을 나타냅니다.

 

 

 

날짜 형식 검증)

function validateDate(date) {
    var regex = /^(19|20)\d\d[-](0[1-9]|1[012])[-](0[1-9]|[12][0-9]|3[01])$/;
    return regex.test(date);
}

console.log(validateDate("2023-09-18")); // true
console.log(validateDate("2023/09/18")); // false (날짜 구분자가 "-"가 아니므로)

이 정규표현식은 날짜가 YYYY-MM-DD 형식을 따르는지 검사합니다. (19|20)은 1900년대나 2000년대인지 확인하고, \d\d는 두 자리의 숫자를 나타냅니다. 그 다음 [-]는 하이픈(-)을 나타내고, (0[1-9]|1[012])는 월이 01에서 12 사이인지 확인합니다. 마지막으로 (0[1-9]|[12][0-9]|3[01])는 일이 01에서 31 사이인지 확인합니다.

 

 

URL 검증)

function validateURL(url) {
    var regex = /^(http|https):\/\/[^ "]+$/;
    return regex.test(url);
}

console.log(validateURL("https://www.openai.com")); // true
console.log(validateURL("not a url")); // false

이 정규표현식은 ^(http|https):\/\/[^ "]+$ 이 부분은 http 또는 https로 시작하고 그 다음에 ://가 오며, 그 후에 공백(" ") 없이 한 개 이상의 문자가 오고 문자열의 끝날 때까지 아무런 문자([^ "])가 계속되어야 함을 의미합니다.

 

 

IP 주소 검증)

function validateIP(ip) {
    var regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
    return regex.test(ip);
}

console.log(validateIP("192.168.1.1")); // true
console.log(validateIP("256.60.124.136")); // false (256은 유효한 IP 섹션 번호가 아님)

이 정규표현식은 (?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.는 0255 사이의 숫자와 그 뒤에 점(.)이 오는 패턴을 나타냅니다. 이 패턴이 정확히 세 번 반복되어야 하며({3}), 마지막에도 0255 사이의 숫자가 와야 합니다.

 

 

 

정규표현식과 메타문자의 차이점?

- 정규표현식(Regular Expression)과 메타문자(Metacharacter)는 서로 다른 개념이지만, 같은 문맥에서 함께 사용되는 경우가 많습니다.


 각 정의를 간략하게 요약하자면  

  • 정규표현식은 문자열에서 특정 패턴을 찾거나 대체하고, 패턴에 부합하는지 검사하는데 사용됩니다. 정규표현식은 두 개의 슬래시(/) 사이에 위치한 패턴으로 표현됩니다.
  • 메타문자는 정규표현식 내에서 특별한 의미를 가진 문자입니다. 예를 들어, .은 어떠한 문자와도 매치될 수 있는 와일드카드를 나타내고, *는 앞선 문자가 0번 이상 반복되는 패턴을 나타냅니다.

즉, 메타문자는 정규표현식을 구성하는 요소 중 하나입니다. 메타문자들을 조합하여 복잡한 패턴을 표현할 수 있는 것이죠. 따라서 메타문자와 정규표현식은 서로 다른 역할과 기능을 가집니다.

 

 

정규표현식 사용 시 유용한 상황은 어떤 것이 있나요?

  • 데이터 유효성 검사: 이메일 주소, 전화번호, 우편번호, 비밀번호 등의 형식이 올바른지 확인하는 데 사용됩니다.
  • 문자열 파싱 및 추출: 웹 페이지의 HTML 코드에서 특정 패턴을 가진 정보를 추출하거나, 로그 파일에서 필요한 데이터를 찾아내는 데 사용됩니다.
  • 검색 및 대체: 텍스트 에디터나 IDE에서 특정 패턴을 가진 문자열을 찾거나 바꾸는 데 사용됩니다.
  • URL 라우팅: 웹 서버가 요청 URL을 분석하여 적절한 핸들러에 연결하는 데 사용될 수 있습니다.
  • 문법 강조(Syntax Highlighting): 프로그래밍 언어의 문법을 강조하기 위해 코드 에디터가 정규표현식을 사용합니다.
  • 입력 필터링: 악성 코드 삽입(SQL Injection, XSS 등)을 방지하기 위해 입력값에 대해 정규표현식으로 필터링할 수 있습니다.

 

 

 

 

정규식 플래그란?

  • g (global): 패턴과 일치하는 모든 문자열을 찾습니다. 이 플래그가 없으면 첫 번째 일치 항목만 반환합니다.
  • i (ignore case): 대소문자를 구분하지 않고 검색합니다.
  • m (multiline): 여러 줄에서 검색할 수 있게 해줍니다. 이 플래그가 없으면 한 줄에서만 검색합니다.
  • u (unicode): 유니코드 전체에 대해 패턴을 적용하도록 합니다.
  • y (sticky): 타겟 문자열의 "현재 위치"부터 검사를 시작하며, 현재 위치와 정확히 일치하는 결과만 반환합니다.
var regex = /pattern/gi; // 'g'와 'i' 플래그를 사용한 예

- regex는 pattern과 일치하는 모든 문자열을 대소문자 구분 없이 찾아냅니다.

 

 

 

 

 

 

 

 

 

감사합니다!

 

 

참조

 

 

반응형