자바스크립트 정규 표현식

정규 표현식은 기본적인 체계는 대부분 비슷하지만 각 프로그래밍 언어에서 사용할 때 조금씩 문법이 다른 경우가 있다.

 

2020/02/03 - [IT 정보 로그캣/CS] - 정규 표현식

정규 표현식

그래서 각 프로그래밍 언어마다 정규 표현식을 확인 후 사용하는게 좋다.

이러한 정규 표현식을 자바스크립트에서는 어떻게 사용하는지 알아보자.

 

 

 

자바스크립트에서 정규 표현식 만드는 법

 자바스크립트에서 정규 표현식을 만드는 방법은 2 가지가 있다.

 

 

정규 표현식 리터럴을 사용하는 방법: 정규 표현식을 슬래쉬(/) 로 감싸는 방법

const regex = /no+ah/;

정규 표현식 리터럴은 스크립트가 불러와질 때 컴파일 된다. 그래서 정규 표현식이 상수일 때 성능이 더 좋다.

 

 

RegExp 객체의 생성자 함수를 호출하는 방법

const regex = new RegExp("no+ah");

생성자 함수를 사용하면 정규 표현식이 실행 시점에 컴파일 된다.

정규 표현식의 패턴이 변경될 수 있는 경우나 사용자 입력과 같이 다른 출처로 부터 패턴을 가져와야 하는 경우 생성자 함수를 사용한다.

 

 

 

자바스크립트에서 정규식 표현 패턴

 자바스크립트에서 정규 표현식 패턴은 단순히 문자로 구성할 수도 있고 메타문자를 사용할 수도 있다.

 

 

단순 문자 패턴

 단순히 문자로 구성하는 경우 /noah/ 로 작성하여 사용하면 문자열에서 noah 라는 부분의 문자열을 찾을 수 있다.

예를들어 "Who is noah?" 에서는 noah와 대응될 것이고, "Do you know Annah?" 에서 no 와 ah 가 부분적으로 포함되지만 noah의 형태가 정확히 포함되지 않기 때문에 대응되지 않는다.

 

 

메타문자를 사용한 패턴

 자바스크립트에서 사용할 수 있는 메타문자들은 다음과 같다.

• \ : 백슬래쉬는 문자 앞에 붙어 사용되는 경우 해당 문자는 글자 그대로 문자가 아닌 메타문자를 나타냄을 의미한다.
  예를들어 정규 표현식에서 d 를 입력하면 소문자 그대로 d를 의미하지만 백슬래쉬를 앞에 붙여 \d 를 입력하면 숫자를 의미하는 메타문자가 된다.
  반대로 백슬래쉬가 특수문자 앞에 붙어 사용되는 경우 특수 문자각 메타문자가 아닌 문자 그대로의 특수문자를 의미한다.
  예를들어 /m*/ 은 m이 0번 이상 반복됨을 나타내는 정규 표현식이지만 /m\*/ 으로 작성하면 m* 문자를 의미한다.
  
  

• ^ : 입력의 시작 부분을 의미한다.
  /^m/ 이라고 입력하면 A로 시작하는 문자열에만 대응한다. 
  
  

• $ : 입력의 끝 부분을 의미한다.
  /m$/ 이라고 입력하면 m으로 끝나는 문자열에만 대응한다.
  
  

• * : 앞에 입력된 문자가 0번 이상 반복됨을 의미한다.
  {0,} 으로도 표현할 수 있다. /no*ah/ 라고 작성하면 "nah" 또는 "nooooooah" 등과 대응 된다.
  
  

• + : 앞에 입력된 문자가 1번 이상 반복됨을 의미한다. {1,} 으로도 표현할 수 있다.
  /no+ah/ 라고 작성하면 "noah" 또는 "noooah" 등과 대응 된다.
  
  

• ? : 앞에 입력된 문자가 0번 또는 1번 나타남을 의미한다. {0,1} 으로도 표현할 수 있다.
  /no?ah/ 라고 작성하면 "nah" 또는 "noah" 만 대응 된다.
  
  

• . : 개행 문자를 제외한 임의의 문자 하나를 의미한다.
  /.o/ 라고 작성하면 "This is a blog of noah" 에서 lo 와 no 와 대응 된다.
  
  

• (text) : 여기서 괄호를 포획 괄호라고 부르며 문자열을 묶어서 대응시켜 준다.
  예를들어 tistory noah 문자열에서 각각 tistory와 noah로 묶어서 나타내고 싶을 때 각 문자열을 /(\w+)\s(\w+)/ 와 같은 형식으로 대응 시켜 표현할 수 있다.
  
  

• (?:text) : 비포획 괄호라고 하여 정규 표현식 연산자가 text 문자열 전체에 동작할 수 있게 하고 싶을 때 사용할 수 있다.
  예를들어 /abc+/ 는 c가 반복되는 것을 나타냄으로 "abcabcabc" 에서 처음 abc에만 대응되지만 /(?:abc)+/ 라고 하면 abc 전체가 반복되는 것을 대응할 수 있다.
  
  

• prefix(?=suffix) : suffix 가 뒤따라오는 prefix만 대응된다.
  예를들어 noah(?=log|blog) 라고하면 noahlog 또는 noahblog 에 대응된다.
  
  

• prefix(?!suffix) : suffix 가 뒤따라오지 않는 prefix 에만 대응된다.
  예를들어 /\d+(?!\.)/ 은 소수점이 뒤따라오지 않는 숫자에만 대응되어 3.1417 이면 1417에만 대응된다.
  
  

• x|y : x 또는 y 에 대응된다.
  
  

• {n} : 앞 문자가 n번 나타날 경우 대응된다. (n은 양의 정수)
  /p{2}/ 이면 "apple" 에서 'pp'에 대응된다.
  
  

• {n,m} : 앞 문자가 n번 이상 m번 이하일 경우에 대응된다.
  /o{2,3}/ 이면 "noooah" 에서 'ooo' 에 대응된다.
   

• [text] : 문자셋(Character set)을 의미한다. [ ] 안에서는 점(.) 과 별표(*)도 단순 문자로 인식된다. 하이픈을 사용하면 범위를 지정할 수 있다. [ ] 안에서는 ^ 는 not 을 \b 는 백스페이스를 의미한다.
  예를들어 /[a-z]/ 는 알파벳 전체 범위를 의미한다.
  
  

• \b : 단어의 경계(시작이나 끝)을 의미한다.
  
  

• \B : 단어의 경계가 아닌 곳(단어의 시작과 끝 사이)을 의미한다.
  
  

• \cX : 문자열 내부의 제어 문자에 대응된다. X는 A ~ Z 까지의 문자 중 하나다.
  
  

• \d : 숫자에 대응된다 [0-9]와 동일하다.
  
  

• \D : 숫자가 아닌 문자에 대응된다. [^0-9]와 동일하다.
  
  

• \f : 폼피드 문자에 대응된다.
  
  

• \n : 줄 바꿈 문자에 대응된다.
  
  

• \r : 캐리지 리턴 문자에 대응된다.
  
  

• \s : 스페이스, 탭, 폼피드, 줄 바꿈 문자 등을 포함한 하나의 공백 문자에 대응 된다.
  
  

• \S : 공백 문자가 아닌 하나의 문자에 대응된다.
  
  

• \t : 탭 문자에 대응된다.
  
  

• \v : 수직 탭 문자에 대응된다.
  
  

• \w : 밑줄를 포함한 영숫자에 대응된다. [A-Za-z0-9_] 으로도 표현할 수 있다.
  
  

• \W : 단어 문자가 아닌 문자에 대응된다. [^A-Za-z0-9_] 으로도 표현할 수 있다.
  
  

•  \숫자 : 정규 표현식 내부의 숫자 번째 괄호에서 대응된 부분에 대한 역참조
  
  

• \0 : null 문자에 대응한다.

 

 

 

정규 표현식 플래그를 통한 검색

 정규 표현식은 정규 표현식 패턴 구분자가 끝나는 곳에서 플래그를 추가해 줄 수 있다. 플래그는 각각 사용될 수도 있고 함께 사용될 수도 있다. 플래그 끼리의 순서에는 구분이 없다. 주로 많이 사용 되는 플래그는 다음과 같다.

• g : 전역 검색
  
  

• i : 대소문자 구분 없는 검색
  
  

• m : 다중 행(multi-line) 검색

 

 

 

정규 표현식 메서드

자바스크립트에는 정규 표현식과 함께 사용되는 메서드들이 있어 참고하면 좋다.

 

 

 

 

 

* 해당 포스팅은 JavaScript | MDN 을 참고하여 작성하였습니다.