고래씌
[JavaScript] 12. 정규표현식 본문
1. 정규식
- 정규표현식(REGEX / REGEXP : Reqular Expression) 이란, 특정패턴을 가진 문자열을 찾거나 또는 찾아서 변경할 때 사용하는 형식 언어
- 정규표현식을 이용하면 문자열에 대해 특정패턴 조건 검사 시 또는 치환시 복잡한 조건을 제시할 필요없이 간단하게 처리 가능하다.
- 자바스크립트뿐만 아니라 자바나 오라클등 다른언어에서도 사용가능
1) 정규표현식 객체 생성 및 정규식과 관련한 메소드
▶ 정규표현식 객체 생성 == 정규식 년수를 선언 == 검색조건으로 삼고자하는 문자열이나 패턴을 제시해야함
▶ 정규식 객체 생성
const regExp = /script/; // 정규식 객체 단축생성 구문
const regExp2 = new RegExp("script") // 정규식 객체 생성
console.log(regExp, regExp2);
|
☞ 두 구문 모두 정규식 객체 생성 구문으로 동일하다.
▶ RegExp객체에서 제공하는 메소드(정규식.xxx(문자열))
- 정규식.test(문자열) : 문자열에서 정규식 값과 일치하는 값이 있으면 true / 없으면 false 반환
- 정규식.exec(문자열) : 문자열에서 정규식 값과 일치하는 값이 있으면 처음 일치하는 문자열을 반환 / 없으면 null 반환
▶String 객체에서 제공하는 메소드(문자열.xxx(정규식))
- 문자열.match(정규식) : 문자열에서 정규식 값과 일치하는 값을 찾아서 반환
- 문자열.serach(정규식) : 문자열에서 정규식 값과 일치하는 값의 시작인덱스 값을 반환 / 없으면 -1 반환
- 문자열.replace(정규식, 바꿀값) : 문자열에서 정규식값과 일치하는 첫번째 부분을 바꿀값으로 변경해서 반환
- 문자열.split(정규식) : 정규식에서 저장된 값을 구분자로 해서 쪼개진 값들이 담긴 배열을 반환
▶ 비교할 문자열
const str1 = 'javascript jquery ajax';
const str2 = 'java oracle html css';
|
▶ 정규식 메소드
▶ 문자열 메소드
☞ repalce는 원본에 영향을 끼치지 않는다.
2. 메타문자
- 메타문자를 이용해서 정규식으로 검색 조건으로 삼을 특정 패턴을 제시할 수 있다.
- 문자열이 해당 정규식으로 제시한 특정페턴에 만족하는지 test()를 이용해서 검사하거나, replace()를 이용해서 치환할 수 있다.
▶ 비교할 문자열
const str = 'javascript jquery ajax'; |
1) 메타문자가 없는 케이스
let regExp = /a/;
area2.innerHTML += `/a/ : ${regExp.test(str)}<br>`;
area2.innerHTML += `/a/ : ${str.replace(regExp, "(***)")}<br>`;
|
☞ replace는 첫번째 a문자만 변경된다. replace는 값을 치환시 일치하는 값들 중 "첫번째" 값만 바꿔준다.
2) 메타문자가 있는 경우
str은 위에 비교할 문자열의 값으로 한다.
(1) ^ : 시작을 의미 => css 속성선택자 중 ^= : 해당값으로 "시작"하는 경우를 의미
(2) [ ] : [ ] 내의 문자중 하나라도 존재할 경우를 의미
☞ replce 첫번째 값만 치환됨
(1,2) 세트로 묶기 - ^ 와 [ ] 사용
regExp = /^[jsa]/; // 시작값이 j거나 s거나 a인지 체크
area2.innerHTML += `/^[jsa] : ${regExp.test(str)}<br>`;
area2.innerHTML += `/^[jsa] : ${str.replace(regExp, "(***)")}<br>`
// 시작값만 (j)만 치환됨 |
=> 만약 시작값이 j 또는 s, a가 아니라면 false 결과 반환됨
(3) $ : 끝을 의미. css속성선택자 $= : 속성값이 끝으로 끝나는 경우를 의미
(1,3) 세트로 묶기 - ^, $ 사용
▶ 시작값은 j이고 끝값은 x인지 확인
regExp = /^jx$/; ==> (X)
☞ 이 정규식은 문자열이 jx로 시작하고 jx로 끝나는 문자열인지 검사한다. 첫글자, 마지막글자를 따로따로 검사할 수 X !!!
regExp = /^[jx]$/; // 시작과 끝이 jx인지 확인
area2.innerHTML += `/^[jx]$/ : ${regExp.test(str)}<br>`; ==> false 출력
(4) . : 개행문자를 제외한 모든 문자(영문자, 숫자, 한글, 특수문자)
(5) + : 한글자 이상(0글자 x)
ex) .+ : 개행문자를 제외한 모든 문자가 한글자 이상인 경우
regExp = /^j.+x$/
area2.innerHTML += `/^j.+x$/ : ${regExp.test(str)}<br>`;
area2.innerHTML += `/^j.+x$/ : ${str.replace(regExp,"(***)")}<br>`;
|
☞ 시작은 j로 시작하고 끝은 x로 끝나면서 중간에 한글자이상의 문자가 존재할 수 있다.
▶ 개수는 상관없이 시작부터 끝까지 오직 숫자만 작성해야하는 케이스. 단, 최소 한글자는 무조건 존재해야함.
regExp = /^[0123456789]+$/
regExp = /^[0-9]+$/ // 0123456789 -> 0-9로 줄여서 표현가능
area2.innerHTML += `/^[0-9]+$/ : ${regExp.test("12121212d")}<br>`;
|
☞ 12121212d => d때문에 조건을 불만족하게 되어 false 반환된다.
▶ 시작부터 끝까지 오직 영문자로만 이루어진 경우(개수는 상관없으나, 최소 한글자는 무조건 있어야함)
▶ 시작부터 끝까지 오로지 한글로만 이루어진 경우
- 자음 = ㄱ-ㅎ
- 모음 = ㅏ-ㅣ
- 결합 = 가-힣
regExp = /^[가-힣]+$/;
// regExp = /^[가-힣ㅏ-ㅣ]+$/; // 모음도 추가하고 싶다면 ㅏ-ㅣ 추가
area2.innerHTML += `/^[가-힣]+$/ : ${regExp.test("자바스크립트최고")}<br>`;
|
3. 플래그 문자
- i : 대소문자를 가리지 않고 비교를 수행하겠다.
- g : 문자열 내의 "모든" 패턴을 찾는다. (즉, 전역으로 비교를 수행하겠다)
- m : 여러줄 비교를 수행하겠다.
<button onclick="test3();">확인</button>
<script>
function test3(){
let str = "JavaScript JQuery Ajax";
// g
let regExp = /a/g;
console.log('/a/g : ', str.replace(regExp, '(***)')); // 모든 a가 치환됨
// ig
regExp = /a/ig;
console.log('/a/ig : ', str.replace(regExp, '(***)'));
str = str.split(" ").join("\n"); // "JavaScript\nJQuery\nAjax"
console.log(str);
str = "JavaScript\nJQuery\nAjax";
console.log(str);
regExp = /^J/;
console.log("/^J/", str.replace(regExp,'(***)')); // 첫줄에 J만 치환됨
regExp = /^J/g;
console.log("/^J/g", str.replace(regExp,'(***)')); // g를 추가하여도 위에 /^J/와 결과는 같음(첫번째 J만 치환됨)
regExp = /^J/gm;
console.log("/^J/gm", str.replace(regExp,'(***)')); // 각 라인의 시작이 "J"라면 치환된 것을 볼 수 있음
}
</script>
4. 정규식을 가지고 주민번호 확인
주민번호 : <input type="text" placeholder="-포함해서 입력하시오" id="pno">
<button onclick="test4();">확인</button>
<script>
function test4(){
// 사용자가 입력한 주민번호 값
const value = pno.value;
// 6글자-7글자
// . : 개행문자를 제외한 모든 문자
// step 1) 숫자 외에 다른문자가 와도 글자수만 맞으면 정상입력으로 간주
let regExp = /^......-.......$/;
// step 2) 주민번호 입력글자가 숫자인지 아닌지 검사
regExp = /^\d{6}-[1-4]\d{6}}$/;
regExp = /^\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])-[1-4]\d{6}$/;
if(regExp.test(value)){
alert("정상입력");
}else{
alert("잘못 입력!");
}
}
</script>
▶ step 1) 숫자 외에 다른문자가와도 글자수만 맞으면 정상입력으로 간주
let regExp = /^......-.......$/; |
▶ step 2) 주민번호 입력글자가 숫자인지 아닌지 검사
① regExp = /^[0-9][0-9][0-9][0-9][0-9][0-9]-[1-4][0-9][0-9][0-9][0-9][0-9][0-9]$/
※ 추가 메타 문자
- \d : 숫자([0-9]와 동일)
- \D : 숫자를 제외한 모든 문자
- \w : 영문자, 숫자, _ 만 취급
- \W : 영문자, 숫자, _ 를 제외한 모든 문자
- \s : 공백문자(띄워쓰기, 탭, 줄바꿈)
- \S : 공백문자를 제외한 나머지
② regExp = /^\d\d\d\d\d\d-[1-4]\d\d\d\d\d\d$/;
※ 수량 문자
- + : 1글자 이상
- * : 0글자 이상
- ? : 0글자 이거나 1글자(즉, 2글자 이상은 불가능)
- {6} : 6글자
- {2,5} : 2글자 이상 5글자 이하
- {2,} : 2글자 이상
- {,6} : 6글자 이하
③ regExp = /^\d{6}-[1-4]\d{6}}$/;
※ 생년월일 자리수 체크
- 생년(두자리) : 0~9까지의 숫자 모두 활용 가능
아무 숫자나 2개만 존재하면 된다 => \d{2}
- 월(두자리) : 01~12 -> 0,1 0-9
앞자리가 0일 경우 뒷자리는 : 1~9 가능 : 0[1~9]
앞자리가 1일 경우 뒷자리는 : 0~1 가능 : 1[0-2]
두 경우의 수를 묶어주기, (경우1 | 경우2)
→ (0[1-9] | 1[0-2])
- 일(두자리) :
앞자리가 0일 경우 뒷자리는 1~9 : 0[1-9]
앞자리가 1일 경우 뒷자리는 0~9 : 1[0-9]
앞자리가 2일 경우 뒷자리는 0~9 : 2[0-9] -> 위 조건과 합쳐서 [1-2][0-9]
앞자리가 3일 경우 뒷자리는 0-1 : 3[0-1]
→ (0[1-9] | [1-2][0-9] | 3[0-1] )
④ regExp = /^\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])-[1-4]\d{6}$/;
☞ \d{2} 생년 입력
☞ (0[1-9]|1[0-2]) : 앞자리가 0 이면 뒷자리 1-9 입력, 앞자리가 1이면 뒷자리 0-2 입력(10월~12월생)
☞ (0[1-9]|[1-2][0-9]|3[0-1]) : 일이 앞자리가 0이면 1-9 입력, 앞자리가 1또는 2이면 0-9 입력, 앞자리가 3이면 0-1 입력
▶ 검사
if(regExp.test(value)){
alert("정상입력");
}else{
alert("잘못 입력!");
}
|
'Front-End > JavaScript' 카테고리의 다른 글
[JavaScript] 13. 정규표현식을 활용한 회원가입 폼 - 실습문제 (0) | 2023.11.14 |
---|---|
[JavaScript] 함수_구매정보 검색 실습문제 (0) | 2023.11.13 |
[JavaScript] 11. 이벤트(addEventListener, mouseenter.. 등) (0) | 2023.11.13 |
[JavaScript] 10. window 객체 (0) | 2023.11.13 |
[JavaScript] 회원가입 - 실습문제3 (0) | 2023.11.10 |