[javascript] 정규표현식의 개념과 자바스크립트에서의 정규표현식

 

이번 시간에는 정규표현식에 대한 간단한 개념을 자바스크립트 환경에서 사용하며 배워보고자 합니다.

 

 

 

정규표현식을 사용하는 이유

 

 

정규표현식은 특정한 규칙을 가진 문자열의 집합을 표현하는 데에 사용되는 언어입니다.

기능이라기 보다는 하나의 언어에 가깝기 때문에 어렵고, 복잡한 내용이 많지만 간단하게 정리하자면

"문자열의 검색과 치환을 위해 사용되는 언어"라고 할 수 있습니다.

 

정규 표현식을 필요로 하는 가장 간단한 예제는 다음과 같습니다.

 

여러가지 사이트를 편하게 연결할 수 있도록 모아놓은 html이 있다고 가정해봅시다.

그러면 간단하게 아래와 같이 구현할 수 있습니다.

 

네이버 <a href="https://www.naver.com">https://www.naver.com</a>
구글 <a href="https://www.google.co.kr/">https://www.google.co.kr/</a>
다음 <a href="https://www.daum.net/">https://www.daum.net</a>

 

그런데 자세히 보면 중복되는 부분이 눈에 띕니다.

a 태그의 href와 링크가 걸린 텍스트가 동일하죠.

 

 

이러한 경우에 정규표현식을 사용하게 되면, 중복해서 써줄 필요 없이 한 줄로 반복적인 행동을 없앨 수 있습니다.

즉, http 꼴로 되어있는 부분을 찾아 해당 부분을 <a href=~> 를 포함한 문자열로 치환해주면 개발에 있어서의 수고로움을 덜어줄 수 있죠.

 

 

따라서 정규표현식은 크게 

해당 문자를 통해 필요한 정보를 추출하기, 해당 문자가 있는지 테스트하기, 해당 정보를 치환하는 기능,

이렇게 세가지 기능이 많이 활용됩니다.

 

 

 

 

자바스크립트에서 정규표현식 사용하기

 

정규표현식 객체 선언

 

 

정규 표현식 객체를 변수에 담는 방법은 리터럴과 객체 생성자 두 가지가 있습니다.

 

리터럴의 경우, 아래와 같이 변수를 선언하여 해당 변수가 정규표현식 객체를 나타내는 변수임을 나타낼 수 있습니다.

/a/ 의 양쪽 '/'가 이 변수를 정규 표현식으로 사용할 것임을 나타내고, 그 안에 있는 'a'는 찾을 문자입니다.

var pattern = /a/

 

객체 생성자의 경우, RegExp라는 객체를 생성함으로써 변수를 선언합니다.

다음과 같이 RegExp 객체를 생성할 때에 'a'라는 찾을 패턴을 인자로 넣어줍니다.

var pattern = new RegExp('a');

 

 

정규표현식을 통해 실행, 추출, 치환하기

 

정규 표현식 실행은 exec 메소드를 이용하여 아래와 같이 할 수 있습니다.

결과로는 정규표현식을 통해 찾은 문자를 출력하게 됩니다. 만약 해당 문자를 찾지 못하면 null이 반환됩니다.

var pattern = /a/;
pattern.exec('abcde');
//result: ["a"]

 

정규 표현식 테스트는 test 메소드를 이용하여 아래와 같이 나타낼 수 있습니다.

결과로는 해당 정규표현식이 존재하면 true, 그렇지 않다면 false를 반환합니다.

var pattern = /a/;
pattern.test('abcde');
//result: true

 

정규 표현식의 치환은 다음과 같이 string 정규 표현식을 이용하여 할 수 있습니다.

var pattern = /a/
"abc".replace(pattern, "b")
//result: "bbc"

 

참고로 정규 표현식은 exec 또한 string에서도 다음과 같이 사용할 수 있습니다.

var pattern = /a/
"abcd".match(pattern)
//result: ["a"]

 

 

정규표현식의 flag

 

 

정규표현식은 옵션으로 사용할 수 있는 flag들이 존재합니다.

이는 같은 문자를 여러개 찾을 수 있게 하거나, 대소문자를 구분하지 않는 등에 사용됩니다.

여러가지 flag가 있지만 흔하게 사용하는 flag는 아래와 같이 3가지가 있으며, 아래과 같이 사용됩니다.

//g flag 사용
var pattern = /a/g

 

flag	설명
g	global: 문자열 내의 모든 패턴을 찾는다
i	ignore case: 대소문자를 구별하지 않고 찾는다
m	multi line: 문자열이 행이 바뀌어도 찾는다