<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 정규표현식</title>
</head>
<body>
<h1> 정규 표현식 Regular expression </h1>
<h2>개요</h2>
<p>문자열에서 특정 문자조합을 찾거나 대체할때 사용하는 패턴식</p>
<p>주로 사용자가 입력한 값이 어떤 조건을 만족하는지 체크할때 사용
- 이메일, 전화번호, 아이디/비밀번호 </p>
<h2> 정규식 작성 </h2>
<img src ="/img/regexp.png">
<p> 정규표현식은 /로 감싸는 정규식 리터럴을 사용하는 방법과
RegExp라는 객체의 생성자를 사용하는 방법등이 있음</p>
<h2> 정규식 함수와 플래그</h2>
<p>exec : 정규식을 통해 문자열 패턴을 찾고 배열 반환</p>
<p>test : 대응하는 문자열이 있는지 여부 검사, true/false </p>
<p>match : 정규식을 통해 문자열 패턴을 찾고 배열 반환, 문자열 함수 </p>
<script>
let str = 'Hello, World, world!!';
const RE = /world/;
document.write(RE.test(str),'<br>'); //정규표현식 함수
document.write(RE.exec(str),'<br>'); //정규표현식 함수
document.write(str.match(RE),'<br>'); // 문자열객체에서 지원하는 함수
</script>
<p> 정규표현식을 수행시 추가적인 작동방식을 지정하기 위해 플래그를 사용할수도 있음</p>
<p> i : ignore case - 대소문자 구별하지 않음 </p>
<p> g : global - 전체 문자열 범위내에서 패턴 검색 </p>
<p> m : multiline - 여러 줄로 구성된 문자열에서 패턴 검색 </p>
<script>
let re2 = /world/ig;
document.write(re2.test(str),'<br>');
document.write(re2.exec(str),'<br>');
document.write(str.match(re2),'<br>');
</script>
<h2> 정규표현식 패턴문자</h2>
<p>정규식에서 사용가능한 패턴문자들을 조합하면 단순한 문자열 뿐만 아니라
복잡한 문자열 패턴을 찾을 수도 있음 </p>
<p> . : 임의의 문자 한개를 의미 </p>
<p> [] : 임의의 문자들 중 한개를 의미 </p>
<p> [^]: 지정한 문자들을 제외한 나머지 문자들을 의미 </p>
<p> ^ : 문자열의 시작을 의미 </p>
<p> $ : 문자열의 끝을 의미 </p>
<p> | : 여러 패턴 중 하나를 선택한다는 의미 </p>
<p> - : 문자의 범위를 지정 </p>
<p> * : 특정패턴이 0회 이상 반복하는 것을 의미 </p>
<p> + : 특정패턴이 1회 이상 반복하는 것을 의미 </p>
<p> ? : 특정패턴이 0 또는 1회 이상 반복하는 것을 의미 </p>
<p> {n} : 특정 패턴이 n회 반복하는 것을 의미 </p>
<p> {n, m} : 특정 패턴이 최소 n회, 최대 m회 반복하는 것을 의미 </p>
<p> a|b|c|d| ... : a-z </p>
<p> A|B|C|D| ... : A-Z </p>
<p> a|b|c|A|B|Z|0|1|2| ... : a-zA-Z0-9_ => \w </p>
<script>
// 나이를 의미하는 표현식
// let age = /1|2|3|4+|5|6|7|8|9|0/g; 숫자패턴 1자 일치여부
str = '15 35 125';
// let age = /[0-9]/g; // 숫자패턴을 간단히 작성
// let age = /[0-9][0-9]/g; // 숫자패턴 길이가 2자
// let age = /[0-9][0-9][0-9]/g; // 숫자패턴 길이가 3자
// let age = /[0-9]+/g; //숫자 패턴 길이가 1자 이상
let age = /\d+/g; //숫자 digit 패턴 길이가 1자 이상
document.write('나이체크 : ', age.test(str),'<br>');
document.write('나이체크 : ', str.match(age),'<br>');
// 전화번호를 의미하는 정규식
// str = '011-1234-5678';
str = '010-12345678'
// let phone = /[0-9][0-9][0-9]-[0-9][0-9][0-9][0-9]-[0-9][0-9][0-9][0-9]/g;
// let phone = /\d\d\d-\d\d\d\d-\d\d\d\d/g;
// let phone = /[0-9]{3}-[0-9]{4}-[0-9]{4}/;
// let phone = /^01\d-\d{3,4}-\d{4}/; //전화번호 01 로 시작
// let phone = /^01[0|1|6|7|8|9]-\d{3,4}-\d{4}/; //전화번호 010,011,016 등으로
let phone = /^01[0|1|6|7|8|9]-?\d{3,4}-?\d{4}$/; // 4자리 숫자로 끝남
document.write('전화번호 체크 : ', phone.test(str), '<br>');
document.write('전화번호 체크 : ', str.match(phone), '<br>');
</script>
<script>
//아이디를 의미하는 표현식
//아이디는 최소 6, 최대 18자의 문자로 구성
//첫자는 반드시 영소문자, 그외 나머지는 자유롭게
str = 'abc123%^.'; //987xyz는 통과되면 안되게
userid = /^[a-z]{1}[\w!@#$%\^\.]{5,17}$/;
document.write('아디입력해!!!! : ', str.match(userid), '<br>');
</script>
</body>
</html>