🔍 JavaScript 정규표현식과 문자열 처리 고급 기법 총정리: 외계어 같던 패턴을 내 무기로 만드는 법

1. 정규표현식, 만드는 방법부터 두 가지 🧱

JavaScript에서 정규표현식을 만드는 방법은 리터럴과 생성자 두 가지예요.

// 1) 리터럴: 패턴이 고정일 때
const re1 = /hello/gi;

// 2) 생성자: 패턴을 동적으로 만들 때
const word = "hello";
const re2 = new RegExp(word, "gi");

// 생성자에서는 역슬래시를 두 번!
const digits = new RegExp("\\d+", "g");

const escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
new RegExp(escapeRegExp("1+1=2"));   // /1\+1=2/

2. 기본 문법 빠르게 훑기 ⚡

여기는 "아 이거 봤던 거~" 하고 넘어가도 되는 구간입니다. 대신 표는 즐겨찾기 각!

3. 플래그 7종 세트, 제대로 알기 🚩

플래그는 정규식의 "모드 스위치"입니다. 현재 JavaScript에는 다음 플래그들이 있어요.

실무에서 가장 많이 사고가 나는 건 단연 g 플래그 + test() 조합이에요.

const re = /a/g;
re.test("a");  // true  (lastIndex → 1)
re.test("a");  // false (1번 위치부터 찾으니 없음! lastIndex → 0)
re.test("a");  // true

g나 y 플래그가 있는 정규식은 lastIndex라는 상태를 기억합니다. 같은 정규식 객체를 재사용해서 검증하면 결과가 번갈아 나오는 "유령 버그"가 생기죠. 👻 검증용 정규식에는 g를 붙이지 않는 것이 정답입니다.

4. 캡처 그룹: 찾은 걸 쪼개서 가져오기 🎣

4-1. 번호 그룹 vs 이름 있는 그룹

const date = "2024-05-17";

// 번호 그룹
const m1 = date.match(/(\d{4})-(\d{2})-(\d{2})/);
m1[1]; // "2024"

// 이름 있는 그룹 (ES2018)
const m2 = date.match(/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/);
const { year, month, day } = m2.groups;  // 구조 분해까지 깔끔!

이름 있는 그룹은 패턴이 길어져도 "3번 그룹이 뭐였더라?" 하며 손가락으로 괄호를 세지 않아도 됩니다. 협업 코드라면 강력 추천!

4-2. 비캡처 그룹과 역참조

// (?:...) 묶기만 하고 저장 안 함 → 결과 배열이 깔끔
/(?:https?|ftp):\/\/(\S+)/.exec("https://a.com")[1]; // "a.com"

// 역참조: 같은 문자 반복 찾기
/(\w)\1/.test("hello");                 // true ("ll")
/(?<q>["']).*?\k<q>/.exec(`say "hi"`)[0];  // "\"hi\""

5. 전방·후방 탐색: 조건만 확인하고 안 먹기 👀

Lookaround는 "그 위치 앞뒤에 이런 게 있는지/없는지"만 확인하고, 실제 매칭 결과에는 포함하지 않는 너비 0(zero-width) 단언입니다.

// 가격에서 숫자만 (₩ 기호는 제외)
"₩3000, $20".match(/(?<=₩)\d+/)[0];   // "3000"

// 비밀번호: 영문·숫자·특수문자 각 1개 이상, 8~20자
const pw = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*]).{8,20}$/;
pw.test("abc12345!");  // true

// 천 단위 콤마 — 정규식 명물
const comma = (n) => String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
comma(1234567);  // "1,234,567"

천 단위 콤마 패턴을 해석하면, "단어 경계가 아닌 위치 중, 뒤에 숫자 3개 묶음이 1번 이상 오고 그 뒤에 더 이상 숫자가 없는 자리"에 콤마를 꽂는 거예요. 물론 실무에선 (1234567).toLocaleString("ko-KR")나 Intl.NumberFormat이 더 확실합니다. 소수점이 있는 수에 위 정규식을 쓰면 소수부에도 콤마가 들어갈 수 있거든요. 😅

6. 탐욕(Greedy) vs 게으름(Lazy) 🍰

수량자 *, +는 기본적으로 먹을 수 있는 만큼 최대한 먹습니다. 뒤에 ?를 붙이면 최소한만 먹어요.

const html = "<b>굵게</b> 그리고 <i>기울임</i>";
html.match(/<.+>/)[0];   // 전체 문자열 통째로 (탐욕)
html.match(/<.+?>/)[0];  // "<b>" (게으름)
html.match(/<[^>]+>/g); // ["<b>","</b>","<i>","</i>"] ← 부정 집합이 더 빠르고 명확

7. 문자열 메서드 6형제 완전 정복 🧰

7-1. matchAll: 반복문 지옥 탈출 🎉

const log = "user=kim age=31; user=lee age=27";
const re = /user=(?<name>\w+) age=(?<age>\d+)/g;

for (const m of log.matchAll(re)) {
  console.log(m.groups.name, Number(m.groups.age), m.index);
}
// kim 31 0
// lee 27 18

// 배열로 바로 변환
const users = [...log.matchAll(re)].map(m => ({ ...m.groups }));

예전엔 while ((m = re.exec(str)) !== null) 같은 코드를 썼죠. matchAll은 g 플래그가 없으면 TypeError를 던져 실수를 미리 막아줍니다.

7-2. replace의 숨은 필살기: 치환 패턴과 함수

// 날짜 형식 변환
"2024-05-17".replace(/(?<y>\d+)-(?<m>\d+)-(?<d>\d+)/, "$<d>/$<m>/$<y>");
// "17/05/2024"

// 전화번호 마스킹
"010-1234-5678".replace(/(\d{3})-(\d{4})-(\d{4})/, "$1-****-$3");

// 함수로 치환: camelCase → kebab-case
"backgroundColor".replace(/[A-Z]/g, (c) => "-" + c.toLowerCase());
// "background-color"

// kebab → camel
"font-size-large".replace(/-(\w)/g, (_, c) => c.toUpperCase());
// "fontSizeLarge"

7-3. split의 의외의 재능

"a1b2c3".split(/\d/);     // ["a","b","c",""]
"a1b2c3".split(/(\d)/);   // ["a","1","b","2","c","3",""]  구분자 보존!
"사과, 배 ,  포도".split(/\s*,\s*/);  // ["사과","배","포도"]

8. 유니코드와 한글, 이모지 제대로 다루기 🌏

JavaScript 문자열은 UTF-16 기반이라, 이모지 같은 일부 문자는 2개의 코드 유닛(서로게이트 쌍)으로 저장됩니다. 그래서 이런 일이 생겨요.

"😀".length;              // 2  (?!)
/^.$/.test("😀");         // false
/^.$/u.test("😀");        // true  ← u 플래그 효과
[..."😀가"].length;       // 2  (스프레드는 코드 포인트 단위)

8-1. 유니코드 속성 이스케이프 \p{...}

ES2018부터 u 플래그와 함께 \p{...}를 쓸 수 있어요. 언어별 문자를 범위 외우지 않고 이름으로 찾습니다.

/^\p{Script=Hangul}+$/u.test("안녕하세요");  // true
/\p{L}+/gu   // 모든 언어의 문자(Letter)
/\p{N}/u     // 모든 숫자
/\p{Extended_Pictographic}/u.test("🔥");     // true (이모지 판별)

// 한글 초성/자모까지 포함 vs 완성형만
/[가-힣]/      // 완성형 11,172자만 (ㄱ, ㅏ 단독은 불포함)
/[ㄱ-ㅎㅏ-ㅣ가-힣]/  // 호환 자모까지

8-2. 사람 눈 기준 글자 수: Intl.Segmenter

가족 이모지 👨‍👩‍👧는 여러 코드 포인트가 ZWJ(제로 폭 결합자)로 이어진 것이라 u 플래그로도 1개로 안 셉니다. 이때는 Intl.Segmenter가 정답이에요. (주요 모던 브라우저와 Node.js에서 지원)

const seg = new Intl.Segmenter("ko", { granularity: "grapheme" });
const count = (s) => [...seg.segment(s)].length;
count("👨‍👩‍👧안녕");  // 3

// 한국어 단어 분리도 가능
const ws = new Intl.Segmenter("ko", { granularity: "word" });
[...ws.segment("정규식 정말 재밌다")].filter(s => s.isWordLike).map(s => s.segment);

SNS 글자 수 제한, 닉네임 길이 검증처럼 "사용자가 체감하는 글자 수"가 중요할 때 꼭 써보세요.

8-3. 정규화(normalize): 같은데 다른 문자열

macOS에서 업로드된 파일명의 한글이 자모 분리(NFD)되어 검색이 안 되는 경험, 개발자라면 한 번쯤 있죠. 😇

const a = "한";                   // NFC (완성형 1개)
const b = "한".normalize("NFD");  // 자모 3개로 분해
a === b;                          // false
a === b.normalize("NFC");         // true

비교·검색 전에 normalize("NFC")로 통일하는 습관이 사고를 막아줍니다.

9. 고급 플래그 활용: y, d, v 🛠️

9-1. sticky(y)로 미니 토크나이저 만들기

y 플래그는 lastIndex 위치에서 딱 그 자리에서만 매칭을 시도합니다. 건너뛰며 찾지 않으니 렉서(토큰 분석기)에 딱이에요.

function tokenize(src) {
  const rules = [
    ["num", /\d+(?:\.\d+)?/y],
    ["id",  /[A-Za-z_]\w*/y],
    ["op",  /[+\-*/=()]/y],
    ["ws",  /\s+/y],
  ];
  const tokens = [];
  let pos = 0;
  outer: while (pos < src.length) {
    for (const [type, re] of rules) {
      re.lastIndex = pos;
      const m = re.exec(src);
      if (m) {
        if (type !== "ws") tokens.push({ type, value: m[0] });
        pos = re.lastIndex;
        continue outer;
      }
    }
    throw new SyntaxError(`알 수 없는 문자: ${src[pos]} (위치 ${pos})`);
  }
  return tokens;
}
tokenize("x = 3.14 * (r + 2)");

9-2. hasIndices(d)로 위치 하이라이트

const m = /(?<key>\w+)=(?<val>\w+)/d.exec("id=42");
m.indices[0];            // [0, 5]  전체 범위
m.indices.groups.val;    // [3, 5]  값의 시작~끝

검색 결과 하이라이트, 에디터 오류 표시처럼 "어디서부터 어디까지"가 필요한 곳에 유용합니다.

9-3. unicodeSets(v): 집합 연산

// 차집합: 그리스 문자 중 문자(Letter)만, 단 α 제외
/[\p{Script=Greek}--[α]]/v
// 교집합: ASCII 이면서 숫자
/[\p{ASCII}&&\p{N}]/v

v 플래그는 u의 상위 호환 개념이며 u와 동시에 쓸 수 없습니다. 비교적 최신 기능이라 지원 환경을 확인한 뒤 쓰는 게 좋아요.

10. 성능과 보안: ReDoS를 조심하세요 💣

정규식 엔진은 매칭에 실패하면 다른 경우의 수를 되짚어 보는 백트래킹을 합니다. 중첩된 수량자가 있으면 경우의 수가 지수적으로 폭발해요. 이게 바로 ReDoS(Regular expression Denial of Service)입니다.

// 🚨 위험 패턴: 중첩 수량자
const evil = /^(a+)+$/;
evil.test("a".repeat(30) + "!");  // 매우 오래 걸릴 수 있음 (메인 스레드 멈춤)

// ✅ 개선: 중첩 제거
const safe = /^a+$/;

Node.js 서버에서 ReDoS가 터지면 이벤트 루프가 막혀 전체 요청이 멈출 수 있어요. 실제로 여러 npm 패키지에서 ReDoS 취약점이 보고된 사례가 있으니, 검증 패턴은 꼭 극단적인 입력으로 테스트해 보세요.

11. 실전 레시피 모음 🍳

// 1. 앞뒤 공백 + 중복 공백 정리
const clean = (s) => s.trim().replace(/\s+/g, " ");

// 2. 휴대폰 번호 정규화 (숫자만 뽑아 하이픈)
const phone = (s) => s.replace(/\D/g, "").replace(/^(\d{3})(\d{3,4})(\d{4})$/, "$1-$2-$3");
phone("010 1234 5678");  // "010-1234-5678"

// 3. 간단한 이메일 형식 체크 (완벽한 RFC 검증은 아님!)
const isEmail = (s) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(s);

// 4. 쿼리스트링 파싱은 정규식보다 표준 API
const params = Object.fromEntries(new URLSearchParams("?q=js&page=2"));

// 5. 템플릿 치환
const tpl = (str, data) => str.replace(/\{\{\s*(\w+)\s*\}\}/g, (_, k) => data[k] ?? "");
tpl("안녕, {{ name }}!", { name: "재능러" });

// 6. HTML 특수문자 이스케이프 (XSS 기본 방어)
const escHtml = (s) => s.replace(/[&<>"']/g, (c) =>
  ({ "&":"&amp;", "<":"&lt;", ">":"&gt;", '"':"&quot;", "'":"&#39;" })[c]);

12. 정규식 말고도 알아두면 좋은 문자열 무기들 🗡️

// 숫자 섞인 파일명 자연 정렬
const files = ["파일10", "파일2", "파일1"];
files.sort(new Intl.Collator("ko", { numeric: true }).compare);
// ["파일1", "파일2", "파일10"]

// String.raw로 정규식 문자열 작성 시 이스케이프 지옥 탈출
new RegExp(String.raw`\d+\.\d+`);

13. 디버깅 꿀팁 🐞

정규식은 "쓰기 전용 언어"라는 농담이 있을 정도로 나중에 읽기 어려워요. 그래서 이렇게 관리하면 좋습니다.

const YEAR  = String.raw`(?<y>\d{4})`;
const MONTH = String.raw`(?<m>0[1-9]|1[0-2])`;
const DAY   = String.raw`(?<d>0[1-9]|[12]\d|3[01])`;
const DATE_RE = new RegExp(`^${YEAR}-${MONTH}-${DAY}$`);

const cases = { "2024-05-17": true, "2024-13-01": false, "24-05-17": false };
for (const [input, expected] of Object.entries(cases)) {
  console.assert(DATE_RE.test(input) === expected, input);
}

참고로 이 패턴은 형식만 보기 때문에 2월 31일도 통과합니다. 날짜의 실제 유효성은 Date 객체나 날짜 라이브러리로 2차 검증하세요.

정규식이 여전히 막막하다면 혼자 끙끙대기보다 경험자의 리뷰를 받아보는 것도 방법이에요. 재능넷 같은 재능 공유 플랫폼에서 JavaScript 코드 리뷰나 맞춤 개발을 도와줄 고수를 만날 수도 있답니다. 🙌

정규표현식은 처음엔 외계어지만, 한 번 손에 익으면 수십 줄짜리 문자열 처리 코드를 한 줄로 줄여주는 마법 지팡이가 됩니다. 🪄 오늘 배운 레시피 중 하나만 내 프로젝트에 적용해 봐도 이미 절반은 성공이에요. 다음엔 여러분이 고양이 발자국 같은 패턴을 술술 읽어주는 사람이 될 차례입니다!