#4 TIL - JS 정규표현식

X's Dev·2024년 5월 16일
0

TIL

목록 보기
4/38
post-thumbnail

JS 코드를 짜다보면 정규표현식을 이용할때가 많다. 해당 글에서 정규표현식과 사용예시에 대해 간단하게 정리하려고 한다.

정규표현식

정규표현식은 문자열에서 패턴을 찾거나 대체할때 유용하게 사용된다. JS에서는 RegExp 객체를 사용하여 정규표현식을 처리하는데, RegExp는 패턴 매칭 기능을 제공함으로, 문자열 처리에 사용된다.

RegExp

RegExp 객체는 JS에서 정규표현식을 다루는데 사용되는 내장 객체이다. 해당 객체를 사용하여 문자열에서 특정 패턴을 검색하거나 대체하는 작업을 할 수 있다.

RegExp 객체를 사용하여 정규표현식을 생성하고, 문자열과 매칭 여부를 확인하거나 패턴을 이용한 문자열 조작을 할 수 있다.

RegExp 객체 생성하기

1.리터럴 표기법 : 슬래시(/)로 패턴을 감싸는 방법이다. 슬래시(/)사이에 패턴이 작성된다.

const pattern = /mypattern/;

2.생성자 함수: RegExp 생성자를 사용하여 객체를 생성하는 방법이다. 첫 매개변수패턴으로 문자열에 전달한다.

const pattern = new RegExp('mypattern');

RegExp 객체를 사용하여 문자열에서 패턴 검사하기

const pattern = /mypattern/;
const text = 'adfknalgnblakdfnltyhoqfaldnalkdfmypatternaldkfnalkndln';

console.log(pattern.test(text)); 

해당 코드는 임의로 작성된 문자열에서, 내가 지정한 패턴인 'mypattern'이라는 패턴을 검색하여 매칭 여부를 확인하고, true 또는 false 값을 반환한다.

해당 문자열에는 'mypattern' 이 포함되어있기에 true가 반환되어야 한다.

true 가 반환되는걸 확인할 수 있다.

정규표현식 활용

정규표현식의 활용으로는 웹 사이트에서 이메일 주소 유효성검사를 예시로 들 수 있다.

const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
const isValidEmail = emailPattern.test('thisissample@email.com');
console.log(isValidEmail); 

emailpattern에 다음과 같이 슬래시(/)사이에 패턴을 넣은걸 확인 할 수 있다.

/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/

'^' : 문자열의 시작을 의미한다.

'[a-zA-Z0-9._%+-]+' :이메일 주소의 로컬파트에 해당한다. 이메일 주소의 로컬 파트는 영문 대소문자, 숫자,그리고 특정 특수문자(. , _ , % , + , -)로 구성될 수 있다.

'+'는 하나 이상의 이전 문자의 반복을 나타내는 메타문자를 나타낸다.

'@': 이메일 주소에서 로컬 파트와 도메인 파트(domain part)를 구분하는 'at' 기호(@)이다.

[a-zA-Z0-9.-]+: 이 부분은 이메일 주소의 도메인 파트에 해당한다. 도메인은 영문 대소문자, 숫자, 그리고 하이픈(-)과 점(.)으로 구성될 수 있다.

.: 이 부분은 도메인의 최상위 도메인(top-level domain)을 나타낸다. 백슬래시()는 메타문자인 점(.)을 이스케이프하기 위해 사용되었다.

[a-zA-Z]{2,}: 이 부분은 최상위 도메인의 최소 길이를 나타낸다. 여기서는 영문 대소문자로 이루어진 최소 2글자 이상의 문자열을 의미한다.

$: 문자열의 끝을 나타냅니다. 이 표시는 패턴이 문자열의 끝까지 매칭되어야 함을 의미한다.

실행결과

true가 반환되는걸 확인할 수 있다.

다음 TIL에서는

언급되었던

  • 메타문자
  • 이스케이프

이 두 용어와 위 이메일 주소 유효성 검사의 최적화 패턴에 대한 글을 다루도록 하겠다.

profile
성장 기록하기

0개의 댓글