정규표현식(regular expression)은 문자열에서 특정한 문자를 찾아내는 도구다.
이 도구를 이용하면 수십줄이 필요한 작업을 한줄로 끝낼 수 있다.
정규표현식은 하나의 언어라고 할 수 있다.
*정규식 공부하기 좋은 예제 : https://regexr.com/5ml92
숫자만 가능 : [ 0 ~ 9 ] 주의 : 띄어쓰기 불가능
/^[0-9]+$/이메일 형식만 가능
/^([\w-]+(?:.[\w-]+))@((?:[\w-]+.)\w[\w-]{0,66}).([a-z]{2,6}(?:.[a-z]{2})?)$/한글만 가능 : [ 가나다라 ... ] 주의 : ㄱㄴㄷ... 형식으로는 입력 불가능 , 띄어쓰기 불가능
/^[가-힣]+$/한글,띄어쓰기만 가능 : [ 가나다라 ... ] 주의 : ㄱㄴㄷ... 형식으로는 입력 불가능 , 띄어쓰기 가능
/^[가-힣\s]+$/영문만 가능 :
/^[a-zA-Z]+$/영문,띄어쓰기만 가능
/^[a-zA-Z\s]+$/전화번호 형태 : 전화번호 형태 000-0000-0000 만 받는다. ]
/^[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}$/
정규표현식은 소프트웨어에 따라서 방식이나 지원 범위가 다를 수 있습니다.
^The The로 시작하는 문자열
of despair$ of despair로 끝나는 문자열
^abc$ abc로 시작하고 abc로 끝나는 문자열 (abc 라는 문자열도 해당됨)
notice notice가 들어 있는 문자열
ab* a 다음에 b가 0개 이상 (a, ab, abbb 등등)
ab+ a 다음에 b가 1개 이상 (ab, abbb 등등)
ab? a 다음에 b가 있거나 없거나 (ab 또는 a)
ab{2} a 다음에 b가 2개 있는 문자열 (abb)
ab{2,} a 다음에 b가 2개 이상 (abb, abbbb 등등)
ab{3,5} a 다음에 b가 3개에서 5개 사이 (abbb, abbbb, 또는 abbbbb)
*, +, ?는 각각 {0,}, {1,}, {0,1}과 같습니다.
( )는 문자열을 묶음 처리할 때 사용
[ ] 괄호 안에 있는 내용 중 임의의 한 문자
특수 문자 자체를 검색하기 및 사용하기
검색 + 치환을 위한 하부식(부분식)
예제) mp3파일 이름 바꾸기
ex) "제목 - 연주자.mp3" Þ "연주자 - 제목.mp3"
예제) (.+)\1+
예제) abab같은 문자열이 위에 해당되는데, 일단 (.+) 즉 임의의 문자열 ab를 찾고 그 뒤에 \1+로 첫번째 부분식을 다시 1번 이상 있는 것을 찾으니까 뒤의 ab가 이에 해당합니다.
변경자 ? 검색 방식 변경
(?i) 대소문자 무시 (기본값)
(?-i) 대소문자 구분
(?g) "greedy" 모드로 전환 (기본값)
(?-g) "greedy" 모드 해제, 따라서 "+"는 "+?"과 동일한 것으로 인식
[출처]https://gocoding.tistory.com/93
방법.1 (010/011/017/018/019 등 포괄적인)
let regexphone=/(^01[016789]{1})[- .]([0-9]{3,4})[- .][0-9]{4}$/g;
console.log(regexphone.test("017-8765-0881"));
방법.2
var regExp = /^\d{3}-\d{3,4}-\d{4}$/;
console.log(regExp.test("017-9326-0881"));
방법.3
let regexphone=/^01(0|1|6|7|8|9)/g
let regexTel=/\d{2,3}-\d{3,4}-\d{4}$/g;
console.log(regexTel.test("031-323-1323"))
방법.1
let regexEmail=/^[a-zA-Z0-9]([-_.]?[0-9a-zA-Z])*@[a-zA-Z0-9]([-_.]?)[a-zA-Z0-9]*.[a-zA-Z]{2,3}$/g;
방법.2
let regexEmail=/^[a-zA-Z0-9]([-_.]?\w+)*@[a-zA-Z0-9]([-_.]?)[a-zA-Z0-9]*.[a-zA-Z]{2,3}$/g;
방법.3
let regexEmail=/^\w+([\.-]?\w+)*@\w+([\.-_]?\w+)*(\.\w{2,3})+$/g;
조건 ) 수문자, 문자, 숫자 포함하고 8~16자리 이내의 값
let regexPwd1=/^.*(?=^.{8,16}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/g;
console.log(regexPwd1.test("432!@#fdsas")) // 검사해본다.
조건 ) 특수문자가 있어도 되고 없어도 되는 경우
let regexPwd2=/^.*(?=^.{8,16}$)(?=.*\d)(?=.*[a-zA-Z])|(?=.*[!@#$%^&+=]).*$/g;
console.log(regexPwd2.test("fdsa2$#@134"))
조건 ) 숫자문자 포함 형태의 6~12
let regexPwd3=/^[a-zA-Z0-9]{6,12}$/g;
console.log(regexPwd3.test("432!@#fdsas"))
결과```
코드를 입력하세요
HTML
<div id="wrap">
<p class="imgs">
<img src="./img/cat2.jpeg" alt="img">
</p>
<button class="click">click</button>
</div>
CSS
#wrap{width: 600px; height: 400px; margin: 50px auto; border: 5px solid #ddd; text-align: center;}
.imgs{width: 600px; height: 400px;}
img{width: 50%;}
.hidden{display: none; transition: 1s; background: #eee;}
Script
$('.click').click(function(){
$('.imgs').find('img').toggleClass('hidden');
});
결과
HTML
<body>
<form action="#" method="post" name="form1">
<input type="text" id="input1" maxlength="40" value="텍스트필드입니다.">
<textarea name="textarea" id="textarea1" cols="30" rows="10">텍스트영역입니다.</textarea>
<select name="select1" id="select1">
<option value="city1">서울</option>
<option value="city2">대전</option>
<option value="city3">부산</option>
</select>
<select name="select2" id="select2" ><!-- multiple을 넣으면 옵션이 펼쳐져서 보인다. -->
<option value="town1">동구</option>
<option value="town2">서구</option>
<option value="town3">중구</option>
</select>
</form>
</body>
CSS
form{width: 500px; margin: 50px auto;}
#textarea1{display: block; margin: 10px 0;}
Script
let inp=$('#input1').val("여기는 아이디를 쓰는 곳입니다.");
//jquery에서는 value가 val로 표현
$('#select1').val('city3'); // 밸류값 조정 (옵션선택란이 처음부터 부산으로 보이게끔 가능).
$('#select2').val(['town2','town3']);
결과
empty 와 remove 비교
HTML
<body>
<div id="div1">넣고 싶은 텍스트</div>
<div id="div2">넣고 싶은 텍스트</div>
</body>
CSS
#div1{border: 3px solid #000; margin: 10px 0;}
#div1{border: 3px solid #000;}
Script
$('#div1').empty();
$('#div2').remove();
empty 는 안에가 공백이 되어 비워지는 개념이고,
remove는 지워진다.
결과
HTML
<body>
<div id="wrap">
<p id="p1"><img src="./img/cat2.jpeg" alt="이미지"></p>
<p id="p2"><img src="./img/bonobono.jpg" alt="이미지"></p>
</div>
</body>
CSS
<style>
*{margin: 0; padding: 0;}
#wrap{width: 500px; margin: 100px auto; background: #ddd; padding: 20px 0;}
#p1, #p2{width: 400px; height: 350px; padding: 20px; border: 5px solid orange; margin: 10px auto; transition: .5s;}
p img{width: 100%; height: 100%;}
</style>
Script
let wid1=$('#p1').width();//width
let wid2=$('#p1').innerWidth();//width+padding
let wid3=$('#p1').outerWidth();//width+padding+border
console.log(wid1);
console.log(wid2);
console.log(wid3);
//$('#p2').outerWidth(500).outerHeight(500);
$('#p2').hover(function(){
$(this).outerWidth(500).outerHeight(500);
},function(){
$(this).outerWidth(450).outerHeight(450);
});
변수로 지정하여 width , innerWidth(패딩값 포함) , outerWidth(패딩값+보더값) 포함하여 넓이를 확인할 수 있으며 지정도 가능하다.
hover 함수를 넣어서 사이즈도 조절가능하다.
결과
HTML
<div id="wrap">
<div id="boxWrap">
<p class="box">박스</p>
</div>
<br>
<p class="txt_1">절대 top위치값: <span></span></p>
<p class="txt_2">상대 top위치값: <span></span></p>
<p class="txt_3">상대 left위치값: <span></span></p>
</div>
CSS
*{margin: 0; padding: 0;}
#wrap{width: 500px; height: 500px; background: #ddd; margin: 0 auto;}
#boxWrap{width: 300px; height: 200px; margin: 50px auto; position: relative; background: #ccc;}
.box{width: 50px; height: 50px; position: absolute; top: 50px; left: 100px; background: #fff; text-align: center; line-height: 50px; font-weight: bold;}
p{margin-left: 20px;}
Script
let $txt1=$('.txt_1 span');
let $txt2=$('.txt_2 span');
let $txt3=$('.txt_3 span');
let $box=$('.box');
let off_t=$box.offset().top;//위에 마진 50px 에 .box는 wrap안에서 relative top:50px 떨어져있으므로 offset 값은 100 이 나온다.
$txt1.text(off_t);
let pos_t1=$box.position().top;
$txt2.text(pos_t1);
let pos_t2=$box.position().left;
$txt3.text(pos_t2);
결과
스크롤의 현 위치를 콘솔로 나타나게 한다.
HTML
<div id="wrap">
<h1>위치 메서드</h1>
</div>
CSS
*{margin: 0; padding: 0;}
body{line-height: 1;}
#wrap{height: 5000px; padding-top: 2000px;}
Script
let topNum=$('h1').offset().top;
$(window).scrollTop(topNum);
let sct=$(window).scrollTop();
console.log(sct);
$(window).scroll(function(){
let sct=$(window).scrollTop();
console.log(sct);
});