[Javascript] 정규식 활용

박기영·2022년 11월 8일
0

Javascript

목록 보기
20/45

알고리즘 문제를 풀다보면 정말 다양한 케이스에서 정규식 활용을 할 수가 있다.
주로 문자열 내에 소문자, 대문자, 한글, 숫자 등의 존재 여부를 판단하여 활용을 하게된다.
필자가 주로 사용했던 방법에 대해서만 정리를 하려고 한다.

정규식 형태

정규식을 사용할 때는 아래와 같이 표현한다.

/정규식 패턴/플래그

예를들어, 알파벳 abc로 되어있는 부분만을 판별해주는 정규식은 아래와 같다.

/abc/g

여기서 정규식 패턴은 abc, 플래그는 g이다.
정규식 패턴을 조건으로 삼아 비교 대상을 판별하며,
플래그 g는 모든 문자열에 대하여 검사를 진행하라는 뜻이다.

정규식 메서드

본 게시글에서는 두 가지의 메서드만 다룰 것이다.
바로 match, test이다.

match

match문자열에서 정규식에 매칭되는 부분을 찾아 배열로 반환해준다.

const regex = /abc/;

console.log("123abc;idv 5".match(regex));

위 예시를 살펴보자.
문자열에서 정규식에 부합하는 부분은 어디일까?
문자열 내부에 있는 "abc"이다.

콘솔을 찍어보자.

[ 'abc', index: 3, input: '123abc;idv 5', groups: undefined ]

다음과 같은 결과가 나왔다.
대상이 되는 문자열과, 그 것의 시작 인덱스, 입력되었던 문자열이 나온다.

음...groups는 뭐죠?

If the g flag is not used, only the first complete match and its related capturing groups are returned. In this case, match() will return the same result as RegExp.prototype.exec() (an array with some extra properties).
- MDN docs -

MDN에 따르면 플래그에 g를 사용하지 않을 경우,
맨 앞에서부터 매칭되는 문자열을 1회만 찾아내고(뒤에 더 있어도 찾지 않는다는 뜻),
그 것의 capturing groups가 반환된다고 한다.
또한, RexExp.prototype.exec()을 사용한 것과 같은 결과를 보여준다고 한다.

capturing groups

아래는 MDN에 있는 예시이다.

const paragraph = "The quick brown fox jumps over the lazy dog. It barked.";

const capturingRegex = /(?<animal>fox|cat) jumps over/;
const found = paragraph.match(capturingRegex);
console.log(found.groups); // {animal: "fox"}

정규식 표현에 플래그 g를 사용하지 않은 것을 확인 할 수 있다.
이로 인해서 groups가 반환된다.
match의 결과인 found를 콘솔에 찍어보자. 아까랑 다르게 나올까?

[
  'fox jumps over',
  'fox',
  index: 16,
  input: 'The quick brown fox jumps over the lazy dog. It barked.',
  groups: [Object: null prototype] { animal: 'fox' }
]

오! 이번에는 groupsundefined가 아니다!
정규식 표현 부분에서 <animal>이라는 것이 groups 객체에key가 되는 모양이다.
정규식으로 뽑아낸 부분들을 좀 더 보기 편하게 만들어주는 것 같다.
명확한 효과에 대한 설명이 없어서 여기까지만 이해하고 넘어가겠다.

RexExp.prototype.exec()

위에서 플래그 g를 쓰지 않으면 RexExp.prototype.exec()를 쓴 것과 같은 결과가 나온다고 했다.
여기서는 결과만 살펴보고 넘어가자.
위 예시를 그대로 사용했다.

regex.exec("123abc;idv 5")

결과는

[ 'abc', index: 3, input: '123abc;idv 5', groups: undefined ]

똑같은 것을 반환해준다!

플래그 g

이번에는 플래그 g를 사용해보자.
예시를 조금 수정해보았다.

const regex = /abc/g;

console.log("123abc;idv 5abc".match(regex));

g를 사용하는 것으로 모든 문자열에 대하여 검색을 진행한다.
따라서, 가장 앞에 있는 abc만 검색하고 끝나는게 아니라, 뒤에 있는 abc도 검색한다.

결과를 살펴보자.

[ 'abc', 'abc' ]

짠! g를 사용하니 이젠 검색된 문자열들이 배열 형태로 나온다.
이 예시에서는 abc만 검색하도록 되어있기에 저 배열이 무슨 의미가 있는지 싶겠지만,
정규식을 더 다채롭게 작성한다면 의미있는 결과를 얻을 것이다.

test

test문자열정규식매칭되면 true, 아니면 false를 반환한다.
match는 검색된 문자열을 배열 형태로 반환한 것과 달리, testboolean 값을 반환한다.
예시를 살펴보자.

const regex = /abc/;

if (regex.test("123abc;idv 5")) {
  console.log("찾았다!");  // 찾았다!
}

필자는 이런 식으로 사용한다.
입력되는 문자열에 대하여 정규식 표현식을 테스트하고,
조건을 만족한다면 통과시키고, 아니면 조건에 맞지 않는다고 반환하는 식으로 말이다.

test는 정말...설명할게 이것밖에 없다.

정규식 활용법

필자가 사용했던 것들만 정리하다보니 글이 굉장히 짧다.
마지막으로 자주 사용한 정규식을 보여드리고 끝내고자 한다.

// 숫자
const 숫자만입력 = /^[0-9]+$/;
const 숫자1에서9만입력 = /^[1-9]+$/;

// 한글
const 한글만하나라도걸려봐 = /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]+$/;

// 영어
const 알파벳하나라도걸려봐 = /^[a-z|A-Z]+$/;

참고 자료

인파_님 블로그
codechacha 게시글
regexr - 정규식 테스트 사이트
String.prototype.match() - MDN docs
RegExp.prototype.exec() - MDN docs
groups가 무슨 의미인가 - stackoverflow 질문글

profile
나를 믿는 사람들을, 실망시키지 않도록

0개의 댓글