본문 바로가기

Front-End: Web/JavaScript

정규표현식

반응형

1. 정규표현식이란?

문자를 찾아내는 도구

영어로는 regular expression. 문자열에서 특정 문자를 찾아내는 도구로, 이를 이용하면 수십줄이 필요한 작업을 단 한 줄로 끝낼 수 있다. 

 

사용하는 언어

그림1. 정규표현식

자바스크립트 뿐만 아니라 수 많은 언어들이 정규표현식을 사용하고 있다.

 

어떻게 공부할까?

정규표현식은 하나의 언어이다. 따라서 정규표현식의 모든 것을 완벽하게 알 수는 없다. 해당 글에서는 자바스크립트에서 어떻게 사용하는지 알아볼 것이므로 정규표현식 자체에 대한 수업은 https://opentutorials.org/course/909/5142 여기서 익힐 수 있다.

 

2. 정규표현식 생성하기

정규표현식을 사용할 때에는 컴파일실행, 두 가지 단계를 거친다.

 

2-1. 컴파일

컴파일은 검출하고자하는 패턴을 만드는 일이다. 패턴을 만드는 방법에는 크게 두 가지가 있다. 차례대로 살펴보자.

1) /정규표현식 리터럴/

let str = "a";

여기서 따옴표는 문자열임을 컴퓨터에게 표명해준다. 마찬가지로 정규표현식을 만드는 첫 번째 방법은 '정규표현식 리터럴'을 사용하는 것이다.

let pattern = /a/;

이렇게 작성하면 이제 우리가 찾고자하는 대상이 'a'라고 컴퓨터에게 알려준다. 그리고 이것을 patten 변수에 담으면 앞으로 pattern 변수를 사용하여 우리가 찾고자하는 대상 a를 찾을 수 있게 된다.

 

2) 정규표현식 객체 생성자

let pattern = new RegExp('a');

RegExp는 Regular Expression의 약자이다. 그리고 new를 작성하여 정규표현식 객체를 만들었다. 괄호내에는 우리가 찾고자하는 대상을 작성한다. 

 

/a/와 new RegExp('a') 모두 동일한 결과를 만들지만 각각 장단점이 있다. 장단점은 후에 알아보자!

 

2-2. 정규표현식 메소드 실행

만든 패턴에 해당하는 정보를 실행해보자. 실행 방법에는 세 가지가 있다. 어떤 문자가 길게 있을 경우 이곳에서 url, 이메일과 같은 특정 정보만 추출하거나, 우리가 찾는 정보가 있는지 없는지 여부를 확인하고 싶거나, 혹은 검색된 정보를 다른 정보로 치환하고 싶은 경우가 있을 것이다. 하나씩 살펴보자.

let pattern = /a/;

pattern 속에 정규표현식 객체가 들어 있다. 패턴이 들어있다고 생각하면 된다. 이제 이 pattern에 .을 작성하면 정규표현식 객체가 사용할 수 있는 모든 함수들 즉 메소드들이 뜬다.

그림2. 정규표현식 객체가 가지는 메소드들

 

RegExp.exec()

  • execution
  • input: 찾고자 하는 정보(패턴)를 가졌는지 확인하려는 대상(정규표현식을 실행하는 대상)
  • output: 패턴을 값으로 하는 배열

(ex 1)

그림3. RegExp.exec()

'abcde'에는 'a'가 있으므로 ['a']를 리턴한다.

(ex 2) 

그림4. '.'의 사용법

.은 하나의 문자를 의미한다. 즉, 'a' 뒤에 하나의 어느 문자가 와야한다. a로 시작하는 두 개의 문자열인 ['ab']를 리턴한다.

(ex 3)

그림5. RegExp.exec() - return null

만약 작성한 문자열에 찾고자하는 대상(패턴)인 'a'가 없다면 어떻게 될까? 'bcdef'에는 'a'가 없기 때문에 null을 리턴한다.

 

RegExp.test()

  • 반환값: boolean
    • true - 첫 번째 인자(검색의 대상) 안에 찾고자하는 대상(패턴)이 존재함
    • false - 존재하지 않음

(ex)

exec() vs test()

exec() 메소드의 사용 목적은 추출이고, test() 메소드의 사용 목적은 우리가 찾는 대상의 존재 유무이다. 용도에 맞게 메소드를 잘 골라 사용하자!

 

2-3. 문자열 메소드 실행

문자열 객체의 몇몇 메소드는 정규표현식을 사용할 수 있다.

String.match()

  • RegExp.exec()와 비슷하다.
  • 반환값
    • 배열: 해당 문자열에 첫 번째 인자로 넣은 문자열이 있는지 확인하고 있을 경우 (하나만 반환함)
    • null: 없을 경우

String.replace()

  • 문자열 변경하기
  • 해당 문자열에서 첫 번째 인자(패턴)을 검색하고, 두 번째 인자 값으로 변경한 후에 변경된 문자열을 리턴한다.

 

2-4. 옵션

정규표현식 패턴을 만들 때 옵션을 설정하여 검출되는 데이터를 다르게 할 수 있다.

i

  • 대소문자를 구분하지 않는다.

(ex)

  • xi는 옵션 i를 사용하지 않은 패턴이므로 대소문자를 구분하여 null을 리턴한다.
  • oi는 옵션 i를 사용한 패턴이므로 대소문자를 구분하지 않으므로 'a'나 'A'가 검색되면 값을 리턴한다.

 

g

  • 검색된 모든 결과를 반환한다.

(ex)

  • xg는 옵션 g를 사용하지 않은 패턴이므로 한 번만 검색되더라도 패턴 하나만 배열로 만들어 리턴한다.
  • og는 옵션 g를 사용한 패턴이므로 발견된 모든 패턴을 리턴한다.

 

 

 

 

 

 

 


참고 자료

 

 

반응형

'Front-End: Web > JavaScript' 카테고리의 다른 글

js class  (0) 2021.07.03
for in & for of  (0) 2021.06.11
API란? (+ UI)  (0) 2021.05.26
라이브러리(Library)  (0) 2021.05.26
모듈(Module)  (0) 2021.05.26