예전에 문자열 관련 코테 문제 풀다가 정규 표현식을 알았더라면 금방 풀텐데라고 생각했었는데 ㅎ.. 공부해야지 해놓고 맨날 다른거 하느라 까먹다가 생각난 김에 오늘은 정규 표현식을 공부하기로 했다.
정규표현식
정규 표현식은 특정 문자 조합을 찾기 위한 패턴이다.
자바스크립트에서는 정규 표현식도 객체이다.
정규 표현식 만들기
const reg = /abc/;
const reg2 = new RegExp('ab+c');MDN 공식문서에 따르면 정규표현식은 스크립트를 불러올 때 컴파일 되기 때문에 정규 표현식을 리터럴로 작성하면(바뀌지 않는 패턴의 경우) 성능 향상을 기대할 수도 있다고 한다.
단, new 키워드를 사용한 생성자 함수로 만든 정규 표현식은 런타임에 컴파일되므로 바뀔 가능성이 있는 패턴이나 외부에서 받아오는 패턴(사용자 입력 등)은 생성자 함수를 통해 만들어주면 된다.
정규표현식 플래그
정규표현식에 플래그를 지정하여 사용할 수 있다.
1. g
const reg = /IU/g;
const reg2 = new RegExp('i+u', 'g');
console.log('손틈새로 비치는 IU 참 좋다'.match(reg)); // ["IU"]
console.log('iu, i luv u'.match(reg2)); // ["iu"]g 플래그를 사용해보았다. g플래그는 전역을 탐색한다.
const reg = /[IU]/g;
console.log('손틈새로 비치는 IU 참 좋다. U&I'.match(reg));
//["I", "U", "U", "I"]대괄호를 넣으면 I 또는 U를 찾는다는 의미의 정규표현식이다.
여기서 플래그로 g를 넣었기 때문에 전역을 모두 탐색해서 I와 U가 들어가는 것을 모두 찾아준다. match 메서드를 사용해서 배열로 반환받은 결과값을 보면 I와 U를 모두 찾아준 것을 확인할 수 있다.
2. i
const reg = /IU/gi;
console.log('손틈새로 비치는 iu 참 좋다. IU, U&I'.match(reg));
// ["iu", "IU"]g 플래그와 i 플래그를 함께 사용해보았다.
i플래그를 대소문자를 구분하지 않는다.
그렇기 때문에 IU 를 찾을 때 iu와 IU를 모두 찾아서 반환한 것을 확인할 수 있다. g플래그를 사용하지 않고 i 플래그만 사용한 경우 일치하는 가장 앞쪽 iu만 반환된다.
g나 i는 많이 사용할 것 같아서 따로 실습도 해봤는데 나머지 플래그(d, m, s, u, y)는 이런게 있구나~정도만 알고 필요할 때 찾아보기로!
숫자 찾기
console.log('안녕 숫자 1234'.match(/\d/));
// ["1"]\d 를 사용하면 숫자를 찾아낼 수 있다.
1234중 가장 앞쪽에있는 1 한개가 반환되었다.
g 플래그를 함께 사용하면 1, 2, 3, 4를 모두 찾을 수 있다.
console.log('안녕 숫자 1234'.match(/\d/g));숫자, 알파벳, _(언더스코어) 찾기
console.log("iu_길을 잃었다 어딜 가야 할까 123".match(/\w/g));
// ["i", "u", "_", "1", "2", "3"]소문자 \w는 알파벳, 숫자, _ 만 찾을 수 있기 때문에 한글은 출력되지 않았음을 확인할 수 있다.
글자 찾기
console.log("길을 잃었다 어딜 가야 할까 123".match(/\D/g));
// ['길', '을', ' ', '잃', '었', '다', ' ', '어', '딜', ' ', '가', '야', ' ', '할', '까']\d를 숫자를 찾는 거였다면 \D는 숫자가 아닌 것을 찾아준다.
숫자가 아닌 것 이라서 공백도 함께 배열의 요소로 반환되었는데
다른 메서드와 함께 사용하면 유용하게 쓸 수 있을 것 같아서 join 메서드를 사용해보았다.
console.log("길을 잃었다 어딜 가야 할까 123".match(/\D/g).join(''));
//길을 잃었다 어딜 가야 할까 \D외에도 \W 를 사용하면 한글을 포함해서 찾을 수는 있다.
차이점이 있다면 \D는 알파벳과 _도 함께 포함해서 찾아주지만, \W는 알파벳, 언더스코어, 숫자를 제외한 값만 반환한다.
console.log("W : iu_길을 잃었다 어딜 가야 할까 123".match(/\W/g).join(''));
// : 길을 잃었다 어딜 가야 할까
console.log("D : iu_길을 잃었다 어딜 가야 할까 123".match(/\D/g).join(''));
// D : iu_길을 잃었다 어딜 가야 할까 숫자 여러개 찾기
\d를 사용해서 숫자를 1개 찾아봤었다. 010-0000-0000처럼 여러개의 숫자가 붙어있는 경우에는 \d+를 사용하면 된다.
console.log("전화번호 : 010-0000-0000".match(/\d+/g));
// ["010", "0000", "0000"]
console.log("전화번호 : 010-1234-5678".match(/[0-9]\d*/g));
["010", "1234", "5678"]또는 \d*를 사용할 수도 있다. * 은 0개 이상을 포함한다는 의미로 사용되는데
현재 숫자만 찾아야 하므로 이 경우에는 [0-9]\d*로 작성해줄수 있을 것이다.
[0-9]는 0부터 9사이의 숫자를 의미하는데, \d*를 작성해주었으므로 0~9까지의 숫자가 0개 이상 포함되었다면 해당 값을 반환하게 될 것이다.
만약 위 코드에서 [0-9]를 작성하지 않고 \d* 만 한다면 공백까지도 같이 포함된다.
정규표현식으로 전화번호 찾기
보통 정규 표현식하면 이메일, 전화번호 검증이 가장 먼저 떠오를 것 같은데
오늘 공부한 것을 가지고 전화번호 찾는 정규식을 작성해보면서 마무리하고자 한다!
다음 번에는 이메일을 정규표현식으로 작성하는 방법을 공부해봐야겠다.
console.log("전화번호 : 010-1234-5678".match(/\d+-\d+-\d+/g));
// ["010-1234-5678"]
console.log("전화번호 : 01012345678".match(/\d+-?\d+-?\d+/g));
// ["01012345678"]
console.log("전화번호 : 010 1234 5678".match(/\d+[- ]?\d+[- ]?\d+/g));
// ["010 1234 5678"]두번째 코드는 전화번호에 -가 없는 경우이다.
ㄹ-가 없는 전화번호의 경우도 있을 수 있으므로 ? 를 뒤에 붙여주면 있든지 말든지~ 를 뜻한다.
세번째 코드는 전화번호를 공백으로 구분한 경우이다.
이때는 [- ]?를 사용할 수 있다. [] 를 사용해주어야 - 또는 공백을 선택 시킬 수 있끼 때문이다.
console.log("전화번호 : 010.1234.5678".match(/\d+[- .]?\d+[- .]?\d+/g));
//["010.1234.5678"].도 추가해보았다. -, 공백, . 중 하나를 포함하면 된다는 뜻이된다. (OR)
지금은
3자리-4자리-4자리숫자로 정확하게 들어왔지만 사용자에게 이런 식으로 입력을 받게 한다면 말도안되는 이상한 전화번호를 작성하는 경우도 있을 수 있을 것이다.
console.log("이상한 번호 : 123456789".match(/\d+[- .]?\d+[- .]?\d+/g));
// ["123456789"]console.log("핸드폰 번호 : 010-1234-5678".match(/\d{3}[- .]?\d{4}[- .]?\d{4}/g));자리수를 지정시키는 방법도 있다.
\d뒤에 + 를 지우고 {n}을 작성해주었다.
아주 완벽한 번호 검증은 아니겠지만 ㅎㅎ
처음엔 이게 무슨 소리지? 싶었는데 하나씩 차근차근 작성해보니까
아 이렇게 작성하는거구나 하고 배울 수 있었다. 너무 어려운 정규식부터 이해하려고 했었는데
역시 가장 간단한 글자 찾기나 숫자 찾기로 시작해보는 것이 최곤거 같다.
참고 자료
MDN 정규표현식
