정규식 사용하기

정규식은 자바스크립트 외에도 다양한 언어에서 사용됩니다. 잘 활용하면 코딩 테스트에서도, IDE의 검색창에서도 활용도가 매우 높은데, 제대로 써먹는 개발자는 많지 않은 것 같습니다.
AI프롬프트를 이용하면 기똥차게 정규식을 만들어주고, 만들어진 정규식을 해석해 주기도 하지만 기본적인 규칙 몇가지를 알아두면 더 빠른 개발생활을 할 수 있을 거라고 생각합니다. 

 

 

정규식은 패턴과 플래그로 구성되어 일정한 패턴을 가진 문자열을 표현하는 형식 언어입니다. 표현이 조금 알쏭달쏭하지만 정규식이 뭔지는 알 거라고 생각하니 바로 설명으로 넘어가겠습니다.

 

정규식은 변수로 선언하면서 `/패턴/플래그`로 작성해도 되고, 생성자 함수를 사용해서 생성도 가능합니다. 생성자 함수를 사용하는 법은 아래에서 다시 다루겠습니다. 

아래 예시는 모두 같은 정규식 패턴을 다양한 서술 방법으로 표현했습니다. 따옴표 여부를 주의해서 봐주세요.

const reg1 = /패턴/플래그;
const reg2 = new RegExp(/패턴/플래그);
const reg3 = new RegExp(/패턴/,'플래그');
const reg4 = new RegExp('패턴', '플래그');

`/ /`를 사용하면 따옴표 없이 쓰지만, 그 외에는 따옴표가 들어가야합니다.

 

 

 

---

정규식 사용하는 법

 

1.  플래그

플래그는 검색의 세부 설정(옵션)을 위한 값입니다. 원하는 옵션이 없다면 굳이 적지 않아도 되고, 여러개를 한꺼번에 사용해도 됩니다.

자주 사용하는건 g, i, m 정도가 될 것 같네요.

플래그	사용법
g	패턴과 일치하는 모든 문자열을 검색 (없으면 맨 앞의 하나만 반환)
i	대소문자 구분 없이 검색
m	줄바꿈 무시하고 여러줄에 걸쳐 검색
s	마침표(.)가 줄바꿈 문자 \n도 포함하여 모든 문자를 매칭
u	유니코드 전체를 지원하며 서로게이트 쌍을 올바르게 처리
s	특정 위치에서 검색을 시작하는 'sticky' 모드를 활성화합니다.

 

 

2.  패턴 - 메타문자 사용하기

패턴은 검색하고자 하는 내용을 표현하는데 사용합니다. 검색어 자체를 입력해도 되고 메타문자를 써서 특정 범위를 명시해 줄 수도 있습니다.

 

2.1. 넣고 싶어요

정규식에 검색하고 싶은 문자열을 넣으면 됩니다. `찾는 값`이라는 문자를 검색하기 위해 아래 예시처럼 사용할 수 있습니다. 참고로 test는 검색할 문자열 중 정규식에 해당하는 결과가 있는지 여부를 boolean으로 반환해 줍니다.

const 패턴이름 = /찾는 값/;
const 검색할_원본_string = "여러분이 정규식을 이용해 찾는 값은 이 문장에 포함되어 있습니다.";
console.log( 패턴이름.test( 검색할_원본_string ) ); // true

 

그런데 이렇게 정확한 문자열만 찾아준다면 includes와 크게 다를 게 없어보입니다.정규식의 진가는 '메타문자'를 사용할 때 나타납니다. 메타문자는 패턴을 정의하기 위해 사용하는 문자입니다.

기호	설명	예시
.	문자 한 개(줄바꿈 제외)	`"뿅 뿅뿅뿅 뿅히 오뿅오".match(/뿅./g)` → ['뿅 ', '뿅뿅', '뿅 ', '뿅히', '뿅오']
^	문자열이나 줄의 시작	`/^hi/`는 hi가 띄어쓰기나 줄바꿈 이후에 나와야 일치
$	문자열이나 줄의 끝	`/hi$/`는 hi가 띄어쓰기나 줄바꿈 직전에 나와야 일치
*	앞 문자가 0개 이상 있을 때	`"aaab".match(/a*/g)` → ['aaa', '', '']
+	앞 문자가 1개 이상 있을 때	`"aab".match(/a+/g)` → ['aa']
?	바로 앞 문자가 0번 또는 1번 존재 (optional)	`"ab ac".match(/a?/g)` → ['a', '', 'a', '', '']
{n,m}	바로 앞 문자가 n~m 회 반복	`"aaab".match(/a{2,3}/g)` → ['aaa']
{n}	바로 앞 문자가 n회 반복	`"aaab".match(/a{2}/g)` → ['aa']
[ ]	문자 집합, 괄호 안의 문자 중 하나에 매치	`"abc".match(/[ab]/g)` → ['a','b']
|	OR 연산자, 양쪽 패턴 중 하나 매치	`/hi|hello/` →  hi나 hello
()	그룹화, 서브패턴 정의 및 캡처	`"ab".match(/(a)(b)/)` → ['ab','a','b']
\d	숫자 (0-9)	`"abc123".match(/\d/g)` → ['1','2','3']
\D	숫자가 아닌 문자	`"abc123".match(/\D/g)` → ['a','b','c']
\w	단어 문자 (알파벳, 숫자, 언더스코어)	`"a_1!".match(/\w/g)` → ['a','_','1']
\W	단어 문자가 아닌 문자	`"a_1!".match(/\W/g)` → ['!']
\s	공백 문자 (스페이스, 탭 등)	`"a b\tc".match(/\s/g)` → [' ', '\t']
\S	공백이 아닌 문자	`"a b".match(/\S/g)` → ['a','b']
[^A]	A가 아닌 문자	`"abc".match(/[^b]/g)` → ['a','c']

 

만약 메타문자에 해당하는 문자열을 메타문자가 아닌 문자열 자체로 검색하기 위해서는 반드시 앞에 `\`를 붙여줘야 합니다.

`안녕하세요? 하하` 에서 /?/를 찾아도 물음표가 아닌 에러가 반환됩니다. (`"안녕하세요? 하하".match(/?/)`)
/?/는 물음표를 의미하는게 아니라, ?앞의 문자열이 0~1번 반복되는 패턴을 찾기 때문에 ? 앞에 문자열이 없는 이 정규식은 잘못된 형태인거죠. 만약 물음표를 검색하고 싶다면 `/\?/`로 써줘야 합니다.

검색에 포함시키고 싶은 패턴의 종류는 대괄호 `[`와 `]` 안에 적습니다.

 

2.2. 조건으로만 쓰고싶어요

만약 검색 조건에는 넣되, 검색 결과에는 빼고 싶다면 어떨까요? 예를 들면 `망_바나나`라는 단어처럼 망(?) 뒤에 바나나라는 단어가 붙지만, 검색 결과에는 망고만 넣고 싶은 경우가 있을거예요. 이 경우 "망고바나나", "망한바나나" 의 망고와 망한은 결과에 포함되지만 "망구사과"와 "망고좋아"의 "망구","망고"는 검색되지 않겠죠? 특히 IDE 검색어에서 정규식을 쓸 때 특히 많이 쓰게 되는 방식입니다.

 

1. 전방탐색 - 긍정형 전방탐색

• `(?= )`
• `찾는값(?=포함할조건)` : 찾는 값 뒤에 '포함할 조건'이 오는 결과만 포함합니다.
  • `가나다(?=ㅁ)` - 가나다를 검색하되, 뒤에 ㅁ이 오는 것만 포함 : 가나다ㅁ, 가나다라ㅁ, 가나다ㅂ, 가나다

2. 전방탐색 - 부정형 전방탐색

• `(?! )`
• `찾는값(?!제외할조건)` : 찾는 값 뒤에 '제외할 조건'이 오면 검색 결과에서 제외합니다.
  • `가나다(?!ㅁ)` - 가나다를 검색하되, 뒤에 ㅁ이 오면 제외 : 가나다ㅁ, 가나다라ㅁ, 가나다ㅂ, 가나다

3. 후방탐색 - 긍정형 후방탐색

• `(?<= )`
• `(?<=포함할조건)찾는값` : 찾는 값 앞에 '포함할 조건'과 일치하는게 와야 합니다.
  • `(?<=ㅁ)가나다` - 가나다를 검색하되, 앞에 ㅁ이 와야 함 : ㅁ가나다, ㅂ가나다라, ㅂㅁ가나다라,

4. 후방탐색 - 부정형 후방탐색

• `(?<! )/
• `(?<!제외할조건)찾는값` : 찾는 값 앞에 제외할 조건이 오면 검색 결과에서 뺍니다.
  • `(?<!ㅁ)가나다` - 가나다를 검색하되, 앞에 ㅁ이 오면 제외 : ㅁ가나다, ㅂ가나다라, ㅂㅁ가나다,

조건이 앞에 올지 뒤에 올지는 어차피 괄호 위치로 알게될텐데 왜 굳이 <를 넣어줄까요? 헷갈리고 별로네요.
모든 탐색은 `?`로 시작하되, 일치하는 값을 찾을 땐 `=`, 일치하지 않는 값을 찾을 땐 `!`, 후방탐색이면 `<`가 추가된다고 외우면 편합니다.

 

 

---

활용편, 사용 가능한 JS내장함수

이게 되나? 싶은 일치, 포함 관련 메서드 중 은근 정규식 가능한 것들이 많습니다. 알아두면 좋을 것들은 이정도입니다.

match, mathAll, search, replace, replaceAll, split

이 중 특이한 내장함수인 test와 match는 몇가지 더 설명해보겠습니다.

 

match

• 문자열.match(정규식)
• 문자열에서 정규식과 일치하는 부분을 찾아서 반환해주는 함수입니다.
• 리턴값 (2종류)
  • g 플래그 없는 경우 : 처음 매칭된 하나의 결과 → 문자열 or null
  • g 플래그 있는 경우 : 모든 매칭 결과 배열 반환 → 배열 or null
• 그룹 캡처
  • 정규식에서 괄호 ( )로 감싼 부분은 “캡처 그룹”이라고 부르며, match() 메서드를 사용할 때 각 그룹에 해당하는 문자열을 따로 추출할 수 있습니다.
  • ex) ("2025-01-30").match(/(\d{4})-(\d{2})-(\d{2})/) → ["2025", "01", "30"]
  • 맨 앞의 숫자 4자리를 한 그룹, 그 뒤의 - 다음에 오는 숫자 두 자리를 또 한 그룹, 또 그 다음의 - 다음 숫자 두 자리를 한 그룹으로 묶었습니다.
• 리턴값 구성

[
    "찾는값",
    groups : undefined,
    index : 7,
    input : "전체 문자열",
    length : 1
]

 

 

test

• 문자열에 정규식과 일치하는 내용이 있는지 확인하는 메서드 : 정규식.test(문자열)
• 매우 중요한 경고입니다. test()는 g 플래그와 함께 쓰면 내부 상태를 기억(캐싱)합니다.
  • test()는 /g가 붙으면 위치 정보를 기억하는 lastIndex 포인터를 가집니다. 그래서 test()가 한 번 호출될 때마다 종료 지점을 기억해 뒀다가 다음 호출 땐 그 뒤에서 이어서 진행합니다. 따라서 reduce() 같은 반복문 안에서 test()를 여러 번 쓰면 의도하지 않은 결과가 발생합니다
  • /g를 제거하거나 정규식을 매번 새로 생성해야 합니다.
  • const regex = /a/g; // g 플래그 있음 const str = "a a a";

console.log(regex.test(str)); // true (첫 번째 'a'에서 매칭됨)  
console.log(regex.test(str)); // true (두 번째 'a'에서 매칭됨)  
console.log(regex.test(str)); // true (세 번째 'a'에서 매칭됨)  
console.log(regex.test(str)); // false (끝까지 갔으므로 더 이상 매칭 없음)  
console.log(regex.test(str)); // true (다시 처음으로 돌아와 매칭됨)

 

 

---

[+] 함수로 정규식 생성하기

아래에서 따로 다루기로 했던 함수로 정규식 생성하는 법입니다. 이 방식을 알아둔다면 정규식을 문자열+변수 조합으로 하거나 조금씩 변형을 줘서 사용하고 싶은 경우에 유용합니다.

const regex = (from, to) => 
  new RegExp(`\\*\\*${from}:\\*\\*\\n([\\s\\S]*?)\\n\\n\\*\\*${to}:\\*\\*`);

//사용
let matchedString = (원본문자열).match(regex(시작할글자, 종료할글자))

 

 

---

[+] vsCode에서 정규식으로 검색하기

커서도 아마 동일할 것 같습니다. 전체검색창이나 파일 내 검색창을 보면 오른쪽 구석에 아래같은 아이콘이 있습니다.

해당 아이콘이 선택된 상태에서는 검색어로 정규식을 사용할 수 있습니다. 제가 가장 많이 쓰는 정규식은 `.*`입니다. 몇 글자건 중간에 다른 문자열을 허용하는 정규식입니다. 이걸 활용해서 

이런 방식으로 function 을 전체검색하는 식으로 쓸 수 있습니다. 

 

 

오늘의 포스팅은 여기까지입니다. 다들 행복한 정규식 생활 되세요~!