1. 정규표현식 작성 법
/패턴/플래그
- 패턴 : 어떤 것을 찾을지 패턴을 작성함
- 플래그 : 패턴에 해당하는 것을 찾아올 때의 옵션을 정함 (ex:하나만 or 모두)
2. 패턴 작성법
/[a-zA-Z0-9]/g
- 위의 응용으로
-
를 붙이면 간한하게 charCode를 기준으로 찾아온다.
패턴 |
의미 |
a-zA-Z |
영어알파벳(-으로 범위 지정) |
ㄱ-ㅎ가-힣 |
한글 문자(-으로 범위 지정) |
0-9 |
숫자(-으로 범위 지정) |
. |
모든 문자열(공백을 포함한 모든 문자, 줄바꿈X) |
\d |
숫자 |
\D |
숫자가 아닌 것 |
\w |
영어 알파벳, 숫자, 언더스코어(_) |
\W |
/w 가 아닌 것 |
\s |
space 공백 |
\S |
space 공백이 아닌 것 |
\특수기호 |
특수기호 |
/내용/
/
/
사이에 있는 어떠한 한 단어를 하나만 찾는다. 이는 char
가 될 수 있고 혹은 string
이 될 수 있다.
/내용/g
g
는 global 속성으로 찾고자 하는 내용을 모두 찾아준다.
/[내용]/g
- 만약 내용이
,
없이 그냥 가A0
이렇게 연결되어있다면 각각 가, A, 0을 모두 찾아온다. 즉, []
은 or
의 기능을 한다.
3. 검색 패턴
예시 /[^a-zA-Z0-9]/g
^
는 not의 기능으로 해당 내용을 기준을 제외한 모든 것을 찾아온다.
기호 |
의미 |
| |
OR |
[] |
괄호안의 문자들 중 하나 |
[^문자] |
괄호안의 문자를 제외한 것 |
^문자열 |
특정 문자열로 시작(괄호 없음 주의!) |
문자열$ |
특정 문자열로 끝남 |
() |
그룹 검색 및 분류(match메서드에서 그룹별로 묶어줌) |
(?: 패턴) |
그룹 검색(분류X) |
\b |
단어의 처음/끝 |
\B |
단어의 처음/끝이 아님 |
4. 정규표현식 수량 패턴
- 특정 패턴이 몇번 반복되는지도 필터링 가능하다.
기호 |
의미 |
? |
최대 한번(없음 || 한개) |
* |
없거나 있거나 (없음 || 있음): 여러개 포함 |
+ |
최소 한개(한개 || 여러개) |
{n} |
n개 |
{Min,} |
최소 Min개 이상 |
{Min, Max} |
최소 Min개 이상, 최대 Max개 이하 |
5. 정규표현식 플래그
- 플래그는 동시에 여러개 사용할 수도 있다. 예) gi, gm 등
플래그 |
의미 |
g |
Global: 모든 문자 검색(안 쓰면 매칭되는 첫 문자만 검색) |
i |
Ignore Case: 대소문자 구분 안함 |
m |
Multi line: 여러 행의 문자열에 대해 검색 |
6. 정규표현식 주요 메서드
- JS 상에서 아래 메서드를 통해 패턴을 검사하고, 매칭되는 문자열을 추출, 변환한다.
("문자열").match(/정규표현식/플래그) |
"문자열"에서 "정규표현식"에 매칭되는 항목들을 배열로 반환 |
("문자열").replace(/정규표현식/, "대체문자열") |
"정규표현식"에 매칭되는 항목을 "대체문자열"로 변환 |
("문자열").split(정규표현식) |
"문자열"을 "정규표현식"에 매칭되는 항목으로 쪼개어 배열로 반환 |
(정규표현식).test("문자열") |
"문자열"이 "정규표현식"과 매칭되면 true, 아니면 false반환 |
(정규표현식).exec("문자열") |
match메서드와 유사(단, 무조건 첫번째 매칭 결과만 반환) |
예제
- 아래 짧은 식은 프로젝트를 진행하며 프론트 엔드상에서 input값을 제어할 때 매우 유용한 코드이다.
this.inputValue.replace(/[^\uAC00-\uD7AF\u1100-\u11FF\u3130-\u318F]/gi, '');
this.inputValue.replace(/[^a-z0-9]/gi, '').substring(0, 10);
- 짧게 첨언하자면
/[^a-z0-9]/gi
는 입력된 문자열에서 영문 대/소문자(a-z, A-Z)와 숫자(0-9) 이외의 모든 문자를 찾아서 삭제('공백' 으로 치환)하는 역할을 한다.