반응형
* 실무를 하다 보면 정규식을 마주하는 경우가 많다. 가독성을 포기하고, 짧은 코드와 간결하게 규칙을 정의해놓고 재사용이 용이하기 때문이다.
* 해당 포스팅에서는 정규표현식이 어려운 분들을 위해 아주 쉽게 자주쓰는 표현식을 설명한다.
정규표현식/정규식이란? (Regular Expressions)
* 주로 문자열의 검색과 치환을 위해 패턴을 만들고 사용한다.
* 자바스크립트 뿐만 아니라 닷넷, 자바, 파이썬, C 등 대부분의 언어에서 표준 라이브러리로 제공한다.
정규식의 매개변수 구성
1. 패턴(pattern) : 필수 실행하고자하는 정규식의 표현이 들어가는 부분
2. 플래그(flags) : 선택 정규식 실행에 필요한 옵션으로 없어도 된다.
정규식의 선언
* 정규식은 /패턴/플래그 또는 new RegExp(패턴, 플래그) 로 선언할 수 있다.
let regExp1 = /pattern/flags;
let regExp2 = new RegExp("pattern", "flags");
* 예시) start 문자열을 찾는 표현식 선언
let regExp1 = /(start)/g;
let regExp1 = new RegExp("(start)", "g");
정규식의 사용
1) 정규식 . 메소드 (테스트값)
* 위에서 선언한 정규식은 test와 exec 메소드를 사용할 수 있다.
정규식.test( 테스트값 ); // 일치여부 리턴 true, false
정규식.exec( 테스트값 ); // 실행 결과의 배열 리턴
* 예시) 위에서 선언한 regExp1을 실행 (테스트값에서 start 문자열 검색)
regExp1.test("start example 입니다."); // true
regExp1.test("example2 end"); // false
regExp1.exec("start example 입니다."); // ["start"]
regExp1.exec("start example2 start"); // ["start"], ["start"]
2) 문자열 . 메소드 (정규식)
* 위에서 선언한 정규식은 match와 replace 등의 문자열 메소드에서도 사용할 수 있다.
"문자열".match(정규식); // 실행 결과의 배열 리턴
"문자열".replace(정규식, "치환문자열"); // 일치 결과를 치환하여 리턴
"문자열".split(정규식); // 문자열 전체를 정규식 기준으로 나누어 배열로 리턴
* 문자열의 메소드를 사용하면서 정규식을 함께 사용 가능하다.
"start example 입니다".match(regExp1) // ["start"]
"start example2 start".replace(regExp1, "end"); // "end example2 end"
"start example2 end".split(regExp1, "start"); // ["start"], ["example2 end"]
정규식 패턴의 종류 (pattern)
1) 문자열(숫자) 검색
패턴 | 설명 |
^문자열 | 문자열로 시작됨 |
문자열$ | 문자열로 끝남 |
[문자열] | 문자 중 하나(문자열 아니고 문자 단위) |
[^문자열] | 문자 제외(문자열 아니고 문자 단위) |
(문자열) | 문자열 검색 |
| | OR |
a-zA-Zㄱ-ㅎ가-힣0-9 | 영문, 한글, 숫자 검색범위 |
. | 모든 문자열 |
\d | 숫자 |
\D | 숫자 제외 |
\w | 영어, 숫자, 언더바 |
\W | 영어, 숫자, 언더바 제외 |
\s | 공백 |
\S | 공백 제외 |
\특수문자 | 특수문자 |
\b | 문자열 처음과 끝 |
\B | 문자열 처음과 끝 제외 |
\n | 줄바꿈 |
\0 | Null |
\t | 탭 |
2) 패턴의 갯수
패턴 | 설명 |
? | 0 또는 1번 |
+ | 1번 이상 |
* | 0번 이상 |
{n} | n개 |
{0, 9} | 0개 부터 9개 사이 |
정규식 플래그의 종류 (flags)
플래그 | 설명 |
g | 문자열 전체 반복 검색 (Global) |
i (Ignore Case) | 대소문자 무시 (Ignore Case) |
m (Multi Line) | 다중행 검색 (Multi Line) |
s (Single Line) | 문자열 줄바꿈 허용된 모든 문자 검색(Single Line) |
u (Unicode) | 유니코드를 시퀀스로 처리 (Unicode) |
y (Sticky) | lastIndex에 명시한 위치부터 판별 (Sticky) |
* 주로 gi를 많이 사용. /정규식/gim 과 같이 나열해서 중복 적용 가능
자주쓰는 정규표현식
구분 | 정규표현식 | 설명 |
휴대폰번호 | /^010-?([0-9]{3,4})-?([0-9]{4})$/; | 010 시작 - 0또는1번 3~4자리 숫자 - 0또는1번 4자리 숫자 끝 |
주민번호 | /^([0-9]{6})-?([0-9]{7})$/ | 6자리 숫자 시작 - 0또는1번 7자리 숫자 끝 |
이메일 웹사이트주소 |
/^[\w]+\@[\w]+\.[a-zA-Z]{2,3}$/i | 영문숫자언더바 시작 1번이상 @ 1번 영문숫자언더바 시작 1번이상 . 1번 영문 2~3자리 끝 (flag i) 대소문자 무시 |
특수문자 체크 | /\특수문자 나열/g /[^a-zA-Z0-9ㄱ-ㅎㅏ-ㅣ가-힣]/g |
특수문자 검색 |
* 위는 예시일 뿐 표현할 방법은 다양하다.
* [0-9]는 \d로 변경 가능
그리드형
'IT > Web' 카테고리의 다른 글
[JS] 자바스크립트 소수점 반올림 최적의 사용방법 round(num+"e+2") (1) | 2021.11.10 |
---|---|
[웹스퀘어5] 디자인 탭 깨질 때 CSS 적용 방법 (3) | 2021.11.09 |
RGB 색상표 (0) | 2021.09.17 |
[ES6] 자바스크립트 ES6 - 3. 반복문 (0) | 2021.08.31 |
[ES6] 자바스크립트 ES6 - 2. 추가된 자주 쓰는 문법 (0) | 2021.08.26 |
댓글