1. 정규 표현식이란
정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다.
이 패턴들은 RegExp의 exec 메소드와 test 메소드,
그리고 String의 match메소드 , replace메소드 , search메소드 , split 메소드와 함께 쓰입니다 . -MDN
MDN에서는 RegExp와 String으로 정규 표현식을 이용할 수 있다고 한다.
RegExp
정규 표현식 객체이다. 두가지 메서드가 있다.
- exec:
array[] | null매칭결과 배열 반환 - test:
boolean매칭여부 반환
String
String일 경우, 함께 쓰이는 메서드가 있다.
- match:
array[] | null매칭결과 배열 반환 - search:
number일치하는 문자열 인덱스 반환 - replace:
string치환 후 문자열 반환 - split:
string[]자른후 문자열 배열 반환
함께 쓰이는 메서드들은 많지만, 대표적인 것만 정리하려 한다.
2. 정규 표현식 만드는 법
기본
정규 표현식을 만드는 데에는 두가지 방법이 있다.
1) 생성자 함수 new RegExp('')
2) 정규 표현식 리터럴 const regex = // new RegExp(//)
생성자 함수로 만들 경우, 컴파일시 차이가 있다고 한다. MDN👈
표현식이 변하지 않을 경우, 리터럴 방식을 이용하면 된다.
const regex = / /i
// 매칭시키고 싶은 식은 / /안에 작성하고, 필요에 따라 뒤에 플래그를 붙인다.플래그
검색방식을 위해 맨 뒤에 작성하는 것을 플래그라고 하며, 필요에 따라 다르다. 조합해서 두개를 같이 쓸 수도 있다.
i(ignore): 대소문자 구분Xg(global): 모든 문자열 검색m(multiline): 행이 바뀌어도 검색
패턴
특정 값과 매칭을 하기위해 ?: ( ) + 이런 기호들을 쓴다. 이런 기호들과 함께 작성하는 것을 패턴이라고 한다.
3. 적용 예시
유저가 jellybrown.javascript.com 에서 javascript를 검색했다고 하고, 어떻게 활용할 수 있는지 생각해보려 한다.
const url = "https://jellybrown.javascript.com/search?q=javascript";RegExp.test
- 상황: 특정 값이 있는지 확인만 하면 될 때 사용
- return 값:
boolean
유저가 현재 검색한 상황을 캐치하고 싶다면, url에서 search라는 단어가 있는지 확인하면 될 것이다.
const regex = /\/search/
const result = regex.test(url) // result: trueString.match
- 상황: 특정 값을 추출할 때 사용
- return 값:
string[]
유저가 현재 검색한 값을 알고 싶다면, search?q= 뒤의 단어를 가져오면 될 것이다.
const regex = /(?:search\?q=)([a-zA-Z0-9ㄱ-ㅎ|ㅏ-ㅣ|가-힣]+)/
const result = url.match(regex)
// result: ["search?q=javascript", "javascript"]
// [0]: 전체 매칭 값, [1]: 실제로 쓰려고 추출한 값
// result[1]을 쓰면 된다.4. 여러가지 패턴
그룹 & 범위
1) () 그룹
2) [] 괄호 안의 어떤 문자든
3) [^] 괄호 안의 문자가 아닐때(부정)
4) (?:) 찾지만 기억X
// 특정 값 추출
const regex = /(?:search\?q=)([a-zA-Z0-9ㄱ-ㅎ|ㅏ-ㅣ|가-힣]+)/
// ()를 이용해 그룹으로 묶고, ?:를 이용해 제외시킨다.수량
1) ? 없거나 있거나
2) * 없거나 있거나 많거나
3) + 하나 또는 많이
// 알파벳 한 글자이상
const regex = /[a-zA-Z]+/
3) {n} n번 반복
4) {min, } 최소
5) {min, max} 최소, 최대
경계
1) \b 단어 경계
2) \B 단어 경계가 아님
3) ^ 문장의 시작
4) $ 문장의 끝
문자
1) \ 특수문자가 아님
2) . 어떤 글자
3) \d 숫자(digit)
// 핸드폰 번호 (010-1111-1111)
const regex = /^\d{3}-\d{4}-\d{4}$/
// ^와 $로 숫자로 시작하고 끝나는지 확인
4) \D 숫자 제외
5) \w 문자열(word) // 영어,숫자(O) 한글(X)
6) \W 문자열 제외 // 영어,숫자(X) 한글(O)
7) \s 공백
8) \S 공백 제외
MDN, 정규표현식, https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions
이응모, 모던 자바스크립트 Deep Dive, 578p
드림코딩, 정규표현식, https://www.youtube.com/watch?v=t3M6toIflyQ
