유틸리티 소개

CSS 클래스명 추출하는 정규표현식 작성하기

HTML에서 class 속성의 값들을 뽑아내고 싶다. 정규표현식으로 할 수 있다.

class 속성 찾기

class="([^"]*)" 이 패턴은 class= 다음 큰따옴표 안의 내용을 캡처한다. 정규표현식 테스터에서 HTML 코드를 넣어보자.

작은따옴표도

class=["']([^"']*)["'] 이러면 작은따옴표로 감싼 것도 잡는다. class=value 처럼 따옴표 없는 경우도 있으니 그것도 고려해야 할 수 있다.

개별 클래스 분리

class="btn primary active" 이런 건 공백으로 split 해서 개별 클래스를 얻을 수 있다. 테스터로 패턴 확인 후 코드로 후처리하자.

플래그 조합 활용

g, i, m 플래그를 상황에 맞게 조합해서 쓰면 더 유연하게 매칭할 수 있다. 대소문자 구분 없이 전역 검색하려면 gi를 쓰고, 여러 줄 처리가 필요하면 m을 추가하자. 정규표현식 테스터에서 플래그별 차이를 확인해보자.

캡처 그룹 효율적으로 쓰기

캡처 그룹이 많으면 성능에 영향을 줄 수 있다. 캡처가 필요 없는 그룹은 (?:...)로 비캡처 그룹으로 만들자. 정말 추출해야 하는 부분만 괄호로 감싸면 된다.

정규표현식 라이브러리 활용

자주 쓰는 패턴들은 라이브러리로 만들어져 있다. 이메일, 전화번호, URL 검증 같은 건 이미 검증된 패턴을 가져다 쓰는 게 안전하다. 테스터로 동작을 확인하고 사용하자.

정규표현식 테스터에서 실시간으로 패턴을 테스트하고 결과를 확인하면서 학습하면 정규표현식 실력이 빠르게 늘어난다.