정규 표현식(regular expressions) from Secrets of the JavaScript Ninja

728x90

이번 글은 'Secrets of the JavaScript Ninja'의 'Chapter 10. Wrangling regular expressions'를 바탕으로 작성하였습니다.

핵심 Concepts

정규 표현식에 대한 복습
정규 표현식 컴파일링(compiling)
정규 표현식 캡처링(capturing)
자주 접하는 관용구 다루기

사전 지식 체크!

RegExp 객체보다 RegExp 리터럴 사용을 더 선호하는 경우는 언제인가?
스티키 매칭(sticky matching)이란 무엇이며 어떤 기능을 하는가?
전역(global)과 비전역(non-global) 정규 표현식을 사용할 때 일치 여부는 어떻게 다른가?

들어가며

정규 표현식을 잘 활용하면 문자열을 분해하고 정보를 찾는 작업을 간소화할 수 있기 때문에 복잡한 코드를 단순하게 작성하는 데 매우 유용하다. 정규 표현식은 다음과 같은 작업에 주로 쓰인다.

HTML 노드의 문자열을 활용할 때
CSS 선택자 표현식(selector expression) 내에서 부분 선택자 찾을 때
요소가 특정 클래스 이름을 가졌는지 판별할 때
입력값 검증할 때

Why regular expressions rock

웹사이트에서 미국 우편번호 9자리를 '99999-9999'와 같이 문자열로 입력 받는다고 가정해보자. 그리고 아래와 같이 정규 표현식을 사용하지 않고 하이픈(-)을 기준으로 입력 받은 값이 모두 10진수인지 검증하는 함수를 작성해보자.

위 함수는 문자열 내 각 숫자가 0~9 사이의 숫자인지 한 번, 그리고 6번째 문자가 하이픈인지 한 번, 총 두 번 확인을 수행한다. 따라서 비교 작업을 9번이나 수행해야 하는데 이를 정규식으로 간단히 작성하면 다음과 같다.

얼핏 보기에는 난해해 보이나 코드는 더욱 간결히 작성되었음을 알 수 있다. 이것이 바로 정규 표현식의 위력이다.

A regular expression refresher

Regular expressions explained

정규 표현식은 텍스트 내 일치되는 문자열의 패턴을 나타내는 방법으로 이러한 패턴을 정의할 수 있는 용어와 연산자로 구성된다.

JavaScript 내 다른 객체 타입과 마찬가지로 정규 표현식을 만드는 데는 두 가지 방법이 있다.

정규 표현식 리터럴

RegExp 객체 인스턴스 생성

이때 슬래시(/)를 문자열 리터럴 내에서 사용하고 싶다면 이렇게 두 번 겹쳐서 쓰면 된다.(//)

아래는 주로 쓰이는 플래그 5가지이다. 플래그는 정규 표현식 리터럴의 경우 끝에 붙여 사용하고 (/test/ig) RegExp 생성자의 경우 두 번째 매개변수로 전달하여 사용한다. (new RegExp("test", "ig")

i: 대소문자 구분 없이 검색. /test/i의 경우 test, Test, TEST, tEsT 등 모두 검색
g: 패턴과 일치하는 모든 문자를 탐색.
m: 다중 행 모드(multiline mode) 활성화. textarea 태그 내 텍스트 탐색 등에 쓰임.
y: sticky 모드 활성화. 문자 내 특정 위치에서 검색.
u: 유니코드 전체를 지원.

Terms and operators

Matching from a class of characters

/test/와 같이 정규 표현식을 작성하였다면 't', 'e', 's', 't' 4문자 각각을 탐색한다는 뜻이 아니라 'test'라는 문자 조합을 탐색한다는 뜻이다. 따라서 문자를 하나하나 탐색하는 정규 표현식은 [test]와 같이 대괄호로 감싸줘서 작성한다. 반대로 'test'라는 문자 이외에 모든 값을 탐색하고자 한다면 [^test]와 같이 탈자(caret) 기호(^)를 앞에 붙여주면 된다.

또한 'a'부터 'm'까지처럼 특정 범위 내 모든 문자를 탐색하고자 한다면 [a-m]과 같이 쓰면 된다.

Escaping

정규 표현식의 기능을 다채롭게 하기 위해 특수 문자가 더러 쓰인다. 이러한 특수 문자 자체를 탐색하려면 어떻게 해야 할까? 바로 백슬래시(\)를 앞에 붙여주면 된다. 따라서 아까 봤던 탈자 기호(^)를 탐색하는 정규 표현식을 작성하고 싶다면 /\^/와 같이 작성하면 된다.

Begins and ends

특정 문자로 시작되는 값을 탐색할 때는 탈자 기호(^)를 사용하여 /^test/와 같이 쓴다. 이는 'test'로 시작하는 문자를 탐색하겠다는 뜻이다. 반대로 /test$/와 같이 달러($) 기호를 쓰면 'test'로 끝나는 문자와 일치된다. 두 기호를 함께 사용하여 /^test$/와 같이 작성하면 지정된 패턴이 전체 후보 문자열을 포함해야 함을 나타낸다.

Repeated occurrences

주어진 문자와 일치하는 문자를 횟수에 상관없이 모두 탐색하는 정규 표현식을 작성하려면 어떻게 해야 할까? 정규 표현식은 이러한 반복 탐색 기능을 자체적으로 제공한다.

?: /t?est/와 같이 적으면 test와 est 둘 다 일치한다. 즉 한 번만 나타날 수도 있고 전혀 나타나지 않을 수도 있는 선택사항으로 문자를 지정하는 것이다.
+: /t+est/와 같이 적으면 문자는 반드시 한 번 혹은 그 이상 나타나야 한다. 따라서 est가 아니라 test, ttest, tttest 등과 일치한다.
/a{4}/와 같이 적으면 a가 4회 연속으로 적혀 있는지 탐색한다.
/a{4, 10}/과 같이 적으면 a가 4~10회 연속으로 적혀 있는지 탐색한다.
/a{4, }/와 같이 적으면 4회 이상 연속된 모든 a문자를 탐색한다.

반복 연산자는 모두 그리디(greedy) 혹은 논그리디(nongreedy)가 될 수 있는데 기본값은 그리디이다. 논그리디로 작성하려면 물음표(?)를 쓰면 된다. 예를 들어 aaa에 대한 일치 여부를 탐색할 때 /a+/와 같이 쓰면 a문자 3개와 모두 일치한다고 나오지만 /a+?/와 같이 쓰면 a문자 한 개와 일치한다고 나온다.

Predefined character classes

때때로 리터럴 문자로 나타낼 수 없는 10진수 및 공백 모음 등의 문자를 탐색해야 할 때가 있다. 이러한 문자를 탐색하기 위해 정규 표현식에는 문자 클래스 및 문자 용어가 존재한다.

Grouping

앞서 살펴봤듯 연산자들은 바로 앞의 문자에만 영향을 준다. 여러 문자에 영향을 주고 싶을 때는 /(ab)+/와 같이 괄호로 묶어서 작성하면 된다.

Alternation(or)

양자택일은 파이프(|) 연산자로 나타낸다. /a|b/와 같이 적으면 a 혹은 b와 일치하는지 여부를 확인한다.

Backreferences

정규 표현식에서 나타낼 수 있는 가장 복잡한 용어는 regex에 정의된 캡처(captures)에 대한 역참조이다. \1, \2와 같이 백슬래시 다음에 참조할 캡처 번호를 적어서 표기한다.

예를 들어 /^([dtn])a\1/와 같이 적으면 'd', 't' 또는 'n'문자로 시작하는 문자열과 일치하고 그 뒤에 바로 a가 따라오고 또 그 뒤에 첫 번째 캡처와 일치하는 모든 문자가 온다. 이는 /[dtn] a[dtn]/과 같지 않다는 점이 중요하다. a 뒤에 오는 문자는 'd', 't' 또는 'n' 중 하나일 수는 없지만 첫 번째 문자에 대한 일치 여부를 불러오는 문자여야 한다. 따라서 \1이 일치할 문자는 평가가 끝나기 전까지는 알 수 없다.

이러한 역참조가 유용하게 쓰이는 예로는 XML 형식 마크업(markup) 요소가 있다.

위와 같이 작성하면 <strong>whatever</strong>과 같은 요소와의 일치 여부를 확인할 수 있다. 이 같은 기능은 역참조 없이는 구현 불가능한데 역참조를 사용하지 않고서는 클로징 태그가 오프닝 태그와 일치하는지 미리 알 수 있는 방법이 없기 때문이다.

Compiling regular expressions

정규 표현식은 여러 처리 과정을 거친다. 우선 생성될 때 컴필레이션(compilation)이 일어난다. 컴필레이션이 일어나는 동안 JavaScript 엔진은 표현식을 분석(parse)하고 내부 표현(internal representation)으로 변환한다. 이러한 작업은 정규 표현식이 생성될 때마다 행해진다.

앞서 봤듯이 컴파일링된 정규 표현식을 만드는 데는 2가지 방법이 있다. 아래 예를 통해 살펴보자.

위 예제에서 두 정규 표현식은 모두 생성된 후 컴파일링된 상태이다. re1에 대한 모든 참조를 리터럴 /test/i로 바꾸면 동일한 정규식이 계속해서 컴파일될 수 있으므로 정규 표현식을 한 번 컴파일하고 나중에 참조할 수 있도록 변수에 저장하는 것은 최적화에 있어 중요하다.

각 정규식은 고유한 객체 표현이라는 점에 유의하자. 정규 표현식이 생성되어 컴파일링될 때마다 새로운 정규 표현식 객체가 생성된다. 따라서 문자열이나 숫자 같은 원시 타입(primitive types)과는 달리 결과값은 늘 고유한 값이다.

특히 주목해야 할 부분은 생성자(new RegExp())를 통해 정규식을 만드는 것이다. 이를 통해 런타임되는 동안 동적으로 생성할 수 있는 문자열에서 표현식을 만들고 컴파일하는 작업이 가능하다. 특히 재사용률이 높은 복잡한 표현식일수록 유용하다.

예를 들어 문서 안에서 어느 요소가 런타임될 때까지 값을 알 수 없는 특정한 클래스 이름을 가지는지 판별한다고 하자. 각 요소는 클래스 이름으로 다양한 값을 가질 수 있기 때문에 이는 컴필레이션의 적절한 예가 된다. 예제를 살펴보자.

우선 테스트를 위해 여러 클래스 이름을 가진 div 및 span 요소를 몇 개 설정한다. 그러고 나서 파라미터로 클래스 이름 및 요소 형식을 받는 클래스 이름 확인용 함수를 정의한다.

getElementsByTagName() 메서드로 특정 형식의 모든 요소를 모으고 정규 표현식을 다음과 같이 설정한다.

여기서 함수에 전달된 클래스 이름을 기반으로 한 new RegExp 생성자로 정규 표현식을 작성했다는 점에 주목하자. 정규식 리터럴로는 위처럼 정규 표현식을 작성할 수 없다.

이렇게 생성자를 통하여 정규 표현식을 한 번 작성해두면 불필요한 리컴필레이션 작업을 방지할 수 있다. 위 정규식은 문자열의 첫 글자 및 공백과 일치한 다음 바로 뒤에 클래스 이름이 오고 다시 공백 및 문자열의 마지막 글자가 따른다.

정규식이 컴파일되고 난 후 test 메서드를 통해 일치하는 요소를 모은다.

Capturing matching segments

정규식 패턴이 문자열과 일치하는지 판별하는 것이 가장 주된 목적이겠지만 무엇이 일치하는지 판별하는 것도 많은 경우 도움이 된다.

Performing simple captures

복잡한 문자열에서 값을 추출한다고 하자. CSS transform 프로퍼티가 적절한 예가 될 것이다. 아래 예제 코드를 살펴보자.

위 예제 코드에 정의된 정규 표현식을 처음 봤을 때는 복잡해 보일 것이다. 하지만 뜯어보면 그렇게 복잡하지도 않다. 맨 처음에는 transform 프로퍼티가 존재하는지부터 판별한다. 없다면 빈 값을 반환한다. transform 프로퍼티가 존재한다면 복잡해 보이는 값 추출 작업을 이행 가능하다. 그러고 나서 match 메서드는 값을 찾으면 발견된 값들을 배열로 반환하고 없다면 null을 반환한다.

match 메서드에 의해 반환된 메서드의 첫 번째 인덱스 값에는 일치하는 값 전체가 들어 있고 캡처 처리한 값들이 연속된다. 따라서 0번째 인덱스 값은 translateY(15px)가 되고 다음 값은 15px가 되는 것이다.

여기서 캡처는 정규 표현식 안에서 괄호로써 정의된다는 점을 기억하자. 따라서 1번째 인덱스에 transform의 값이 들어가는 것이고 이는 정규식에서 지정한 유일한 캡처는 정규식의 translateY 뒤에 삽입한 괄호로 생성되었기 때문이다.

이 같은 일치 값은 전역(global) 표현식의 경우 달라진다.

Matching using global expressions

앞서 봤듯 전역 플래그를 사용하지 않고 String 객체의 match 메서드를 쓰는 지역(local) 정규 표현식은 모든 일치하는 문자열 및 캡처들을 반환한다.

그러나 g 플래그를 써서 전역 정규 표현식으로 작업할 때는 여전히 배열을 결과값으로 반환하기는 하지만 첫 번째 일치 값만 찾는 것이 아니라 모든 일치하는 값을 찾는다. 이 경우 각 일치 값 내의 캡처가 반환되지 않는다.

지역 일치의 경우 하나의 인스턴스만 일치되고 일치 값 내의 캡처 역시 반환된다. 하지만 전역 일치의 경우 일치 값의 목록을 반환한다.

만약 전역 탐색에서 캡처가 중요할 경우 정규 표현식의 exec 메서드를 사용하면 된다. 이 메서드는 정규 표현식에 대해 반복적으로 호출될 수 있으므로 호출될 때마다 다음으로 일치하는 정보 집합을 반환한다.

위 예제에서도 exec 메서드를 반복해서 호출한다. 이는 이전 호출로부터 상태를 유지하여 이어지는 각각의 호출이 다음 전역 일치 값으로 계속된다. 각 호출은 다음 일치 값 및 해당 캡처를 반환한다.

이와 같이 match와 exec 메서드로써 정확한 일치 값과 캡처를 찾을 수 있다.

Referencing captures

캡처한 일치 값의 일부를 두 가지 방식으로 참조 할 수 있다. 하나는 일치 값 자신이고 또 하나는 대체 문자열(replacement string)이다. 다음 예제를 살펴보자.

위 예제 코드에서 첫 번째 캡처인 태그의 이름을 참조하기 위해 \1을 썼다. 이 같은 정보로써 정확한 클로징 태그를 탐색할 수 있다.

또한 replace 메서드에 대한 호출의 대체 문자열 내의 캡처 참조를 얻을 수 있다. 위 예제 코드에서처럼 역참조를 쓰는 대신 $1, $2, $3 문자를 사용할 수 있다.

위 예제에서 첫 번째 캡처의 값(F)는 $1을 통한 대체 문자열에서 참조된다. 이를 통해 값이 일치할 때까지 값이 무엇인지 알지 않고도 대체 문자열을 지정할 수 있다.

Noncapturing groups

괄호는 두 가지 역할을 한다. 연산자에 대한 용어를 그룹화할 뿐만 아니라 캡처를 지정한다. 다음 코드를 살펴보자.

위 같은 정규식을 짠 의도는 sword 앞에 오는 ninja-를 한 번 혹은 그 이상 탐색 가능하게 하고 모든 전치사를 캡처화하는 것이다. 이 정규식은 두 가지 괄호 세트를 필요로 한다.

캡처를 정의하는 용.(문자열 sword 앞에 오는 모든 것)
+ 연산자에 대한 텍스트 ninja-를 그룹화하는 용.

이는 잘 작동하는 듯 보이지만 안에 들어 있는 그루핑용 괄호 때문에 캡처가 하나 이상 반환된다. 캡처 안에 괄호 세트가 나타나지 않게 하기 위해서는 ?: 를 활용하면 된다. 이는 수동 하위 표현식(passive subexpression)으로 알려져 있다.

이처럼 쓰면 캡처를 생성하는 데 바깥쪽 괄호만이 쓰인다. 안쪽 괄호는 수동 하위 표현식으로 바뀌는 것이다. 이를 테스트하기 위해 다음 예제 코드를 살펴보자.

위 예제 코드를 실행해보면 수동 하위 표현식이 불필요한 캡처를 방지해준다는 것을 알 수 있다.

Replacing using functions

String 객체의 replace 메서드는 여러모로 쓸모가 많다. replace 메서드를 쓸 때 정규 표현식이 첫 번째 매개 변수로 주어져 패턴과 일치하는 값을 교체한다.

예를 들어 문자열 내 모든 대문자를 X로 교체한다고 하자. replace 메서드를 사용하여 다음과 같이 작성할 수 있다.

따라서 결과는 'XXXXXfg'가 된다.

하지만 replace 메서드의 가장 강력한 기능은 고정된 문자열이 아닌 함수를 교체 값으로 준다는 점이다.

교체 값(두 번째 매개 변수)가 함수일 때 매개 변수의 변수 목록과 함께 각 탐색된 일치 값에 대해 호출된다. 이렇게 함수를 통해 반환된 값이 바로 교체 값이 된다.

이는 런타임 시 대체 문자열이 무엇인지 결정할 엄청난 양의 자유도를 제공한다. 다음은 살펴보면 동적으로 변하는 대체 값을 활용하여 대시(-)를 기준으로 나뉜 문자열을 낙타식(camel-cased) 표기법으로 변환한 예이다.

위 예제의 정규식은 대시 문자 앞에 오는 어떤 문자든 일치시킨다. 전역 정규식 내의 캡처는 대시를 제외하고 일치하는 문자를 식별한다. 함수가 호출될 때마다(위 예제의 경우 2번) 첫 번째 매개 변수로 전체 일치 문자열을 받고 캡처를 두 번째 매개 변수로 받는다.(위 예제의 경우 단 하나)

함수가 처음 호출됐을 때는 '-b'와 'b'를 전달 받고 두 번째에는 '-w'와 'w'를 전달 받는다. 각 경우 일치하는 문자는 대문자로 변환되고 교체 문자열로 반환된다. 결국 '-b'는 'B'로, '-w'는 'W'로 교체되는 것이다.

이 같은 코드를 앞서 살펴봤던 exec() 메서드와 while 반복문을 활용한 문자열 탐색 기능 대신 활용 가능하다.

정규 표현식과 replace 메서드를 활용하면 코드를 매우 간결히 작성할 수 있다. 아래 예제를 살펴보자.

위 예제에서 가장 주목할 만한 점은 replace 메서드를 단순히 값을 찾아 교체하는 데 쓰지 않고 문자열 전체를 탐색하는 데 썼다는 점이다. 작동 원리는 크게 두 가지이다. 첫 번째는 함수를 교체 값 인수로 전달하는 것이고 값을 반환하는 대신 문자열을 탐색하는 데 쓰는 것이다.

예제 코드에서는 우선 소스 쿼리 문자열에서 찾은 키와 값을 저장할 해시 키를 선언한다. 그 다음 소스 문자열에서 replace 메서드를 호출하여 키와 값 쌍을 일치시키는 정규식을 전달하고, 키와 값을 캡처한다. 또한 전체 일치 값과 키 캡처와 값 캡처를 받는 함수를 전달한다. 이렇게 캡처된 값은 나중에 참조할 수 있도록 해시에 저장된다. 소스 문자열에 일어난 변화는 신경 안 써도 되기 때문에 빈 문자열을 반환한다. 즉 결과값이 아닌 부수 효과만을 활용하는 것이다.

replace 메서드가 값을 반환한 후 결과값을 합치고 찾은 키를 반복하여 각각 추가할 배열을 선언한다. 마지막으로 배열 내 값을 join 메서드로 합쳐 반환한다. 이렇듯 String 객체의 replace 메서드를 자체 문자열 검색 메커니즘으로 활용 가능하다.

Solving common problems with regular expressions

Matching newlines

개행 문자를 포함하지 않는 마침표(.)를 활용하여 탐색 기능을 구현할 때 개행 문자를 포함해야 할 때가 있다. 다른 언어에서는 플래그를 추가하여 이 같은 기능을 구현 가능하지만 JavaScript에서는 불가능하다. 다음 예제를 보면 이 같은 결함을 볼 수 있다.

위 예제에서는 우선 개행 문자를 포함하는 테스트용 문자열을 정의한다. 첫 테스트에서는 . 연산자로는 개행 문자를 일치시킬 수 없다는 점을 확일할 수 있다. 다음 테스트에서는 공백 문자가 아닌 모든 문자 및 공백 문자를 일치시킨다. 마지막 테스트에서는 교대 정규식(alternation regex)을 활용하여 . 연산자로 일치되는 개행 문자를 제외한 모든 문자 및 개행 문자를 포함한 공백 문자를 일치시킨다. 여기서 의도하지 않은 캡처를 막기 위해 수동 하위 표현식을 사용했다는 점에 주목하자.

이 같은 기능을 구현하는 데 두 번째 테스트에서 쓰인 /[\S\s]*/가 최적이다.

Matching Unicode

영문자만으로는 모든 문자를 탐색할 수 없으므로 유니코드 문자를 활용하여 정규식을 확장시킬 필요가 있다. 다음 예제를 살펴보자.

위 예제의 정규식은 \w 용어를 사용하여 모든 일반 문자와 일치시키고 u+8000 위의 전체 유니코드 문자 집합까지 포함한다. 128부터 시작하면 기본 다국어 평면의 모든 유니코드 문자와 함께 일부 높은 ASCII 문자가 제공된다.

Matching escaped characters

일반적으로는 페이지 작성자가 페이지 요소에 id를 할당할 때 프로그램 식별자를 준수하는 이름을 사용한다. 허나 이는 단지 관습적인 것이어서 id 값은 문자가 아닌 구두점 등을 포함하기도 한다. 예를 들어 'form:update'와 같이 말이다.

라이브러리 개발자는 CSS 선택기 엔진과 같은 구현을 작성할 때 이스케이프된(escaped) 문자를 지원하려고 한다. 이로써 사용자는 일반적인 명명 규칙을 따르지 않고 이름을 복잡하게 지정할 수 있다. 아래 예제에서 이스케이프된 문자를 일치시키는 정규식을 살펴보자.

위 코드를 통해 연속된 문자 및 백슬래시 뒤에 따르는 모든 문자들도 탐색 가능하다.

요약 정리

정규 표현식을 생성하는 데는 2가지 방법이 있다. 하나는 정규 표현식 리터럴(/test/)이고 또 하나는 RegExp 생성자(new RegExp("test"))이다. 리터럴은 개발 시에 정규식을 이미 알고 있을 때 선호되고, 생성자는 런타임 시에 정규식이 생성될 때 선호된다.
정규 표현식에는 5개의 플래그가 있다. 아래 플래그들은 리터럴의 경우 끝에 붙여 쓰고(/test/ig), RegExp 생성자의 경우 두 번째 매개 변수에 전달한다.(new RegExp("test", "ig")
- i: 탐색 민감도를 낮춤.
- g: 패턴의 모든 인스턴스와 일치.
- m: 여러 줄 탐색.
- y: 스티키 매칭 활성화.
- u: 유니코드 이스케이프.
대괄호([])로 다음과 같이 문자들을 묶으면 ([abc]) 대괄호 안의 문자를 하나하나 탐색하겠다는 뜻임.
탈자 기호(^)를 쓰면 패턴은 문자열 맨 앞에 나타나야 하고, 달러 기호($)를 쓰면 맨 끝에 나타나야 한다.
물음표(?)는 용어의 선택적 일치, 더하기(+)는 용어가 한 번 혹은 여러 번 일치, 별표(*)는 최소 0번에서 그 이상 일치이다.
백슬래시(\)는 특수한 정규식 문자를 이스케이프할 때 쓰인다.(. [ $ ^)
괄호(())로써 여러 용어를 묶을 수 있고, 파이프(|)로써 OR를 나타낸다.
용어와 일치하는 문자열의 일부는 백슬래시 뒤에 캡처 번호를 써서 역참조될 수 있다.(\1, \2)
모든 문자열은 match 함수를 가지며 정규 표현식을 받고 일치하는 모든 캡처 및 일치하는 문자열 전체를 포함하는 배열을 반환한다. 또한 replace 함수를 활용하여 일치하는 값들을 동적으로 교체할 수 있다.

함께 보기

Regular Expressions

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

Regular expressions - JavaScript | MDN

Regular expressions are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects. These patterns are used with the exec() and test() methods of RegExp, and with the match(), matchAll(), replace(), replac

developer.mozilla.org