cotnmin

프론트엔드에서도 입력자의 값을 검증하거나 API를 통해 가져온 값을 분석 또는 재구성해서 사용하고 싶을 때 정규표현식을 이용할 수 있다.

정규표현식(Regular Expression)이란?

특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다.
프로그래밍을 하는 과정에서 문자열을 검증하거나 문자열 일부를 추출하고 싶을 때 많이 사용한다.

Javascript에서 정규식 사용하기

일단 Javascript에서는 정규식 리터럴이나 RegExp 객체를 이용해 정규표현식을 선언할 수 있다.
생성된 정규식은 문자열이 아닌 정규식 객체이다.

const regexp1 = /a\d{1,}/i;
const regexp2 = new RegExp(/a\d{1,}/, 'i');
const regexp3 = new RegExp('a\\d{1,}', 'i');
// 'a' 또는 'A' 뒤에 숫자가 1개 이상 나열 되는지 체크

위 3가지 모두 같은 정규식을 의미한다.
하드코딩이 가능한 부분은 1번의 방식으로 사용자 입력에 따르거나 API통신을 통해 정규식을 생성해야 하는 경우는 3번의 경우를 주로 쓰게 된다.
이미 생성된 정규식에서 플래그만 다른 새 정규식이 필요한 경우 2번 같이 사용 가능

위 정규식을 하나씩 해석하면

1. / a \d{1,}/i : 문자 'a'
2. /a \d {1,}/i : 모든 숫자
3. /a\d {1,} /i : {n, m} n개 이상 m개 미만 -> 1개 이상
4. /a\d{1,}/ i : 대소문자 구분 X -> 1번의 문자 'a', 'A'둘 다 가능

==> 'a' 또는 'A' 뒤에 숫자가 1개 이상 나열 되는지 체크

위와 같이 해석이 가능합니다 그럼 자세히 알아보겠습니다.

정규식 구문

Groups and Ranges (그룹과 범위)

정규식에서 일부를 그룹으로 묶을 필요가 있을 때 사용
추후 match 라는 메서드와 주로 사용

Character classes (문자 클래스)

키보드로 입력하기 힘들거나 문자를 하나씩 입력하면 너무 길어질 수 있는 부분을 짧게 대체해서 사용하기 위해서 사용

Assertions (어서션)

문자에 매칭하는 것이 아닌 앞뒤 상황에 따라 매칭, 어서션은 매칭 결과에 포함되지 않는다.

Quantifiers (수량자)

앞 문자를 반복해서 사용할지 결정

기본적으로 수량자는 탐욕적(Greedy)으로 동작하는데, 이는 매치되는 부분을 찾고도 더 길게 찾을 수 있으면 그걸 찾는 걸 말한다.
이때 ?를 뒤에 붙이면 탐욕적으로 찾는 것을 멈춘다. (x??,x{1,5}?)

Greedy: '<div>test</div>'.match(/<.*>/)[0] => <div>test</div>

Non-greedy: '<div>test</div>'.match(/<.*?>/)[0] => <div>

Flag (플래그)

// y Flag
const regex = /test/y;
const str = 'testtesttest!';
regex.test(str);
// 첫번째 탐색 (testtesttest!) // true
regex.test(str);
// 두번째 탐색 (testtest!) // true
regex.test(str);
// 세번째 탐색 (test!) // true
regex.test(str);
// 네번째 탐색 (!) // false

1번에서는 정규식을 해석하고 작성하는 방법을 적었다면
2번에서는 Javascript에서 정규식을 활용하는 string method 또는 regexp method를 적을 예정이다.

해석이 어려운 정규식이 있다면 https://regexr.com/ 와 같은 페이지들을 활용할 수 있다.

참고

• mdn web docs - Regular Expressions