43-1. 정규표현식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>정규표현식</title>
<style>
.area{
height : auto;
background-color : cornflowerblue;
border : rgb(46, 108, 224);
color : tomato;
}
</style>
</head>
<body>
<h1>정규표현식</h1>
<p>
정규표현식(Regular Expression : REGEX / REGEXP)이란, <br>
특정 패턴을 가진 문자열을 찾거나 또는 찾아서 변경할 때 사용하는 형식 언어 <br>
정규표현식을 사용하면 문자열에 대해 특정 패턴 조건검사를 하거나 또는 변경할 때 <br>
복잡한 조건을 만들필요없이 간단하게 처리 가능 <br>
자바스크립트 뿐만 아니라 자바/오라클 다른 언어들에서도 사용가능
</p>
<hr>
<h3>* 정규표현식 객체 생성 및 정규표현식과 관련된 메소드들</h3>
<button onclick="test1();">나는 정규표현식이야</button>
<div id="area1" class="area"></div>
<script>
function test1(){
// 정규표현식 객체 생성 == 정규식 변수를 선언한다.
// 검색 조건으로 삼고자하는 문자열 또는 패턴 제시
var regExp = new RegExp('lunch'); // 방법1
var regExp2 = /lunch/; // 방법2 (보편적으로 선호함)
console.log(regExp);
console.log(regExp2);
// 욕설 필터링할때 쓸 수 있음(exec메소드로)
/*
* RegExp 객체에서 제공하는 메소드 => 정규표현식객체.메소드명(검사할문자열);
- 정규식.test(문자열) : 문자열에서 정규식값과 일치하는 값이 있다면 true / 없다면 false 반환
- 정규식.exec(문자열) : 문자열에서 정규식값과 일치하는 값이 있다면 처음 매칭된 문자열을 반환 / 없다면 null
* String 객체에서 제공하는 메소드 => 검사할문자열.메소드명(정규표현식객체);
- 문자열.match(정규식) : 문자열에서 정규식값과 "일치하는 값"을 찾아서 반환
- *문자열.search(정규식) : 문자열에서 정규식값과 "일치하는 값의 시작 인덱스 값"을 반환 / 일치하는게 없다면 -1
- 문자열.replace(정규식, 바꿀값) : 문자열에서 정규식값과 일치하는 첫 번째 값을 바꿀 값으로 변경해서 반환
- 문자열.split(정규식) : 정규식에서 지정된 값을 구분자로 쪼개서 값들이 담겨있는 배열로 반환
*/
// 비교할 문자열
var str1 = 'breakfast lunch dinner';
var str2 = 'javascript jQuery AJAX';
const area1 = document.getElementById('area1');
// 정규식 메소드
area1.innerHTML += 'regExp.test(str1) : ' + regExp.test(str1) + '<br>'; // true
area1.innerHTML += 'regExp.test(str2) : ' + regExp.test(str2) + '<br>'; // false
area1.innerHTML += 'regExp.exec(str1) : ' + regExp.exec(str1) + '<br>'; // lunch
area1.innerHTML += 'regExp.exec(str2) : ' + regExp.exec(str2) + '<br>'; // null
// 문자열 메소드
area1.innerHTML += 'str1.match(regExp) : ' + str1.match(regExp) + '<br>';
area1.innerHTML += 'str1.search(regExp) : ' + str1.match(regExp) + '<br>';
area1.innerHTML += 'str1.replace(regexp, 바꿀값) : ' + str1.replace(regExp, '점심') + '<br>';
area1.innerHTML += 'str1.split(regExp) : ' + str1.split(regExp) + '<br>';
}
</script>
<h3>* 메타문자</h3>
<p>
메타문자를 이용하여 정규표현식으로 "검색조건으로 삼을 특정 패턴"을 만들 수 있음 <br>
문자열이 해당 정규식으로 제시한 패턴에 만족하는지 <br>
=> test()통해 검사하거나 replace()를 이용해서 치환
</p>
<button onclick="test2();">실행</button>
<div id="area2" class="area"></div>
<script>
function test2(){
const area2 = document.getElementById('area2');
let regExp = /a/;
// 비교할 문자열
let str = 'javascript jquery ajax';
area2.innerHTML += '/a/ : ' + regExp.test(str) + '<br>';
area2.innerHTML += '/a/ : ' + str.replace(regExp, '(***)') + '<hr>';
// 기본적으로 replace는 치환할 때 일치하는 값들 중에서 첫 번째 값만 바꿔줌
// * 메타 문자 *
// 1. ^ : 시작을 의미 => CSS속성선택자 ^= 해당 값으로 "시작"하는 경우
regExp = /^j/; // 문자열이 소문자 j로 "시작"하는 경우
area2.innerHTML += '/^j/ : ' + regExp.test(str) + '<br>';
area2.innerHTML += '/^j/ : ' + str.replace(regExp, '(***)') + '<hr>';
// 문자열 시작값이 j또는 a또는 s인지
regExp = /^[jsa]/;
area2.innerHTML += '/^[jsa]/ : ' + regExp.test(str) + '<br>';
area2.innerHTML += '/^[jsa]/ : ' + str.replace(regExp, '(***)') + '<hr>';
// 2. [] : []안에 있는 문자 중 하나라도 존재할 경우를 의미
regExp = /[abc]/; // 문자열 중 a또는 b또는 c가 하나라도 존재할 경우
area2.innerHTML += '/[abc]/ : ' + regExp.test(str) + '<br>';
area2.innerHTML += '/[abc]/ : ' + str.replace(regExp, '(***)') + '<hr>';
// 3. $ : 끝을 의미
regExp = /x$/; // 문자열이 x로 끝나는지 비교할 목적
area2.innerHTML += '/x$/ : ' + regExp.test(str) + '<br>';
area2.innerHTML += '/x$/ : ' + str.replace(regExp, '(***)') + '<hr>';
// 시작값은 j이고 끝값은 x인지
regExp = /^jx$/;
area2.innerHTML += '/^x$/ : ' + regExp.test(str) + '<br>';
// 이 패턴을 만족하는 문자열은 오로지 'jx' 뿐이기 때문에 false!!!
// 4. . : 개행문자를 제외한 모든 문자를 의미(영문자, 숫자, 한글, 특수문자 등등...)
// 5. + : 한 글자 이상을 의미(0글자 XX)
// 시작부터 끝까지 오로지 숫자값으로 이루어진 경우
regExp = /^[0123456789]+$/; // 숫자의 개수는 상관없는데 1개 이상이어야 함!
regExp = /^[0-9]+$/; // 0123456789를 0-9로 표현이 가능
area2.innerHTML += '/^[0-9]+&/ : ' + regExp.test('3245684215') + '<br>';
area2.innerHTML += '/^[0-9]+&/ : ' + regExp.test('54561fe44512') + '<br>';
// a부터 z까지는 a-z // A-Z
// 시작부터 끝까지 오로지 영문자(소문자, 대문자)로만 이루어진 경우
regExp = /^[a-zA-Z]+$/; // 문자열의 길이는 상관없음 단 최소한 한글자는 있어야함!
// 시작부터 끝까지 오로지 영문자, 숫자로만 이루어진 경우
regExp = /^[a-zA-X0-9]+$/;
area2.innerHTML += '/^[a-zA-Z0-9]+$/ : ' + regExp.test('JavaScript123') + '<br>';
area2.innerHTML += '/^[a-zA-Z0-9]+$/ : ' + regExp.test('sdfaaw@3rk') + '<br>';
// 시작부터 끝까지 오로지 한글(자음, 모음, 결합)로만 이루어진 경우
regExp =/^[ㄱ-ㅎㅏ-ㅣ가-힣]+$/;
area2.innerHTML += '/^[ㄱ-ㅎㅏ-ㅣ가-힣]+$/ : ' + regExp.test('메로엠로아아재ㅡㅇ') + '<br>';
// 프롬프트를 이용해서 한국인 사용자에게 이름을 입력받고
// 유효한 이름을 입력했다면 잘했다~를 알림창으로 띄워주고
// 이상한 이름을 입력했다면 못했다~를 알림창으로 띄워봅시다!
let name = window.prompt('이름을 입력하세요.');
regExp = /^[가-힣]{2,}$/;
if(regExp.test(name)){
alert('잘했다~');
}
else{
alert('못했다~');
}
}
</script>
<hr>
<h3> * 플래그 문자</h3>
<p>
/정규표현식/ 뒤에 써줌 <br><br>
종류 <br>
i : 대/소문자를 구분하지 않고 비교를 수행하겠다. <br>
g : 문자열 내의 모든 패턴을 검사하곘다.(전역으로 비교하겠다) <br>
m : 여러 줄 비교를 수행하겠다.
</p>
<button onclick="test3();">실행</button>
<script>
function test3(){
// 비교할 문자열
var str = 'JavaScript jQuery, Ajax';
// 정규표현식
var regExp = /a/;
console.log('/a/ : ' + str.replace(regExp, '(***)'));
regExp = /a/g;
console.log('/a/g : ' + str.replace(regExp, '(***)'));
regExp = /a/ig;
console.log('/a/ig : ' + str.replace(regExp, '(***)'));
str = 'JavaScript\nJQuery\nAJAX';
regExp = /^J/;
console.log('/^J/ : ' + str.replace(regExp, '(***)'));
regExp = /^J/g;
console.log('/^J/g : ' + str.replace(regExp, '(***)'));
regExp = /^J/gm;
console.log('/^J/gm : ' + str.replace(regExp, '(***)'));
}
</script>
<hr>
<h3>* 정규표현식을 이용해서 주민번호 확인</h3>
주민번호 : <input type="text" placeholder="-를 포함해서 입력해주세요" id="pno">
<button onclick="test4();">확인</button>
<script>
function test4(){
// 비교할 문자열 == 사용자가 입력한 값(input태그의 value속성의 값)
let value = document.getElementById('pno').value;
// 1단계 : 6글자 - 7글자
// . : 개행문자를 제외한 모든 문자중 1개
var regExp = /^......-......$/;
// 2단계 : 숫자여야함
regExp = /^[0-9][0-9][0-9][0-9][0-9][0-9]-[0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/;
/*
* 메타문자
\d : 숫자(==[0-9])
\D : 숫자를 제외한 모든 문자
\w : 영문자, 숫자, _(== [a-zA-Z0-9])
\W : 영문자, 숫자, _를 제외한 모든 문자
\s : 공백문자(스페이스, 탭, 줄바꿈)(== [\t\n])
\S : 공백문자를 제외한 모든 문자
*/
regExp = /^\d\d\d\d\d\d-[1-4]\d\d\d\d\d\d$/;
/*
* 수량문자
+ : 최소한 1글자 이상
* : 0글자 이상(0글자 가능)
? : 0글자 또는 1글자(2글자 이상은 불가)
{5} : 5글자
{2,5} : 2글자 이상 5글자 이하
{2,} : 2글자 이상
{,5} : 5글자 이하
*/
regExp = /^\d{6} - [1-4]\d{6}$/;
// 3단계 생년월일
/*
- 생년(두자리) : \d{2} 아무숫자로 2자리 채우기
그룹핑(경우1|경우2)
- 월(두자리) : 앞자리가 0일 경우 뒷자리가 1 ~ 9 까지 가능
앞자리가 1일 경우 뒷자리가 0 ~ 2 까지 가능
(0[1-9]|1[0-2])
- 일(두자리) : 앞자리가 0일 경우 뒷자리가 1 ~ 9 까지 가능
앞자리가 1 또는 2일 경우 뒷자리가 0 ~ 9 까지 가능
앞자리가 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}$/;
}
</script>
</body>
</html>
43-2. 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<style>
form {
border : 1px solid lightsteelblue;
padding : 20px;
}
label{
color: gray;
font-size : 12px;
}
</style>
</head>
<body>
<br>
<form action="insert.me">
* 아이디 :
<input type="text" name="userId" id="userId" required> <br>
<label>첫 글자는 반드시 영문자로, 그리고 영문자, 숫자를 포함하여 총 4~12자로 입력하시오.</label>
<br><br>
* 비밀번호 :
<input type="password" name="userPwd" id="userPwd" required> <br>
<label>영문자, 숫자, 특수문자(!@#$%^)로 총 8~15자로 입력하시오.</label>
<br><br>
* 비밀번호 확인 :
<input type="password" id="userPwd2" required> <br>
<label>위의 비밀번호와 일치하게 입력하시오.</label>
<br><br>
* 이름 :
<input type="text" name="userName" id="userName" required> <br>
<label>한글로만 이루어져야 하며 2글자 이상으로 입력하시오.</label>
<br><br>
* 이메일
<input type="email" name="email" id="email"> <br>
<label>이메일 형식에 맞춰서 입력하시오.</label>
<br><br>
*취미
<input type="text" name="hobby" id="hobby" placeholder= "축구, 농구 야구 등" list="hobbyList"> <br>
<datalist id="hobbyList">
<option value="soccer">축구</option>
<option value="basketball">농구</option>
<option value="baseball">야구</option>
</datalist>
<br><br>
*거주지
<select name="address" id="addres">
<option value="namyangju">남양주</option>
<option value="seoul">서울</option>
<option value="incheon">인천</option>
</select>
<br><br>
<input type="submit" value="회원가입" onclick = "return validate();">
<input type="reset" value="취소">
</form>
<script>
function validate(){
// 유효성 검사 : 아이디, 비밀번호, 비밀번호 일치, 이름
// input요소로부터 value속성값 뽑기
// 1) 아이디 검사
// 첫글자를 반드시 영문자로,
// 그리고 영문자, 숫자 총 4 ~ 12자로 입력하시오.
// var value1 = document.getElementById('userId').value; // 아예 이렇게 빼면 조건식이 안걸린다.. 왜지
var userId = document.getElementById('userId');
var userPwd = document.getElementById('userPwd');
var userPwd2 = document.getElementById('userPwd2');
var userName = document.getElementById('userName');
// var regExp = /^[a-zA-Z][a-zA-Z0-9]{4,12}$/; 앞에서 한글자 빠져야 돼 =>
var regExp = /^[a-zA-Z][a-zA-Z0-9]{3,11}$/;
if(!regExp.test(userId.value)){
alert('아이디 다시 입력');
userId.selet(); // 다시 입력하게 해줌
userId.value = '';
return false;
}
// 2) 비밀번호 검사
// 영문자(대소문자 포함), 숫자, 특수문자로 총 8~15자로 입력하시오.
// 특수문자 : !@#$%^
regExp = /^[a-zA-Z0-9!@#$%^]{8,15}$/;
if(!regExp.test(userPwd.value)){
alert('비밀번호 다시 입력');
return false;
}
// 3) 비밀번호 일치
if(userPwd2.value != userPwd.value){
alert('비밀번호가 일치하지 않습니다.');
return false;
}
// 4) 이름검사
regExp = /^[가-힣]{2,}$/;
if(!regExp.test(userName.value)){
alert('이름 다시 입력');
return false;
}
return true;
}
</script>
</body>
</html>
43-3. jQuery 개요
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>jQuery</h1>
<h3>jQuery란??</h3>
<p>
기존에 자바스크립트 언어만으로 구현하기 복잡했던 구문 작성들을 <br>
간소화하기 위해 "존 레식"에 의해 개발된 <br>
JavaScript기반의 라이브러리(유용한 기능들의 모음집) <br>
즉, JavaScript언어로 유용한 함수나 내용들이 이미 만들어져있는 모음집 <br>
<br><br>
- JQuery의 장점 <br>
1) DOM요소와 관련된 스크립트를 보다 쉽게 구현할 수 있음 <br>
2) AJAX(비동기식통신), 이벤트 처리 등 폭 넓게 지원한다. <br>
3) JQuery와 관련된 확장플러그인, 오픈API등을 지원한다. <br>
=> 적은 양의 코드로 풍부한 기능을 제공한다!
</p>
<hr>
<h3>* jQuery 라이브러리 연결 방법</h3>
<p>
head태그 내부에 script태그로 jQuery관련 .js파일 가져오기 <br>
오프라인 / 온라인 방식이 있음 <br>
- jQuery공식 사이트 : <a href="http://jquery.com" target="_black">jQuery 공식 사이트</a>
<!-- compressed압축퇸 production배포용 -->
<!-- uncompressed비압축된 development개발자용 -->
<br><br>
<!--
Uncompressed : 개발자같은 사람들이 보기 쉽도록 주석, 코드정렬 등을 활용해서
가시성(가독성)을 높인 파일
Compressed : 배포
주석, 들여쓰기 등을 최소화해서 파일 용량을 줄인 버전
-->
1. jQuery라이브러리 파일을 직접 다운로드 받은 후 경로 지정(오프라인 방식) <br>
2. CDN(Content Delivery Network)을 통한 연결(온라인방식) <br>
- 라이브러리를 제공하는 사이트의 url을 제시해서 파일 경로를 지정하는 방식
<!-- jQuery사이트 -> other CDNs -> Goodle CDN(뭐든 똑같음) -> jQuery 3.x스니펫 복붙-->
</p>
<br>
<hr>
<h3>* jQuery구문 작성하기</h3>
<p>
<b>
우리는 기본적으로 jQuery구문으로 DOM요소를 다룰 것! 이기 때문에 <br>
jQuery구문은 문서상에서 모든 요소들이 전부다 로드된 후에 실행되어야 함 => window.onload
</b>
<br><br><br>
</p>
<pre>
- 순수 자바스크립트에서 해당 내용
[ 표현법 ]
window.onload = function(){
실행내용;
}
onload : 페이지가 다 로딩되면 자동으로 딱 한번 수행!
해당 HTML문서의 요소들도 다 로딩되고, 연동되어있는 외부 문서들도 전부 다 로딩된 후에
실행되는 특징을 가짐
window.onload는 해당 HTML문서에서 딱 한번만 수행 가능!
</pre>
<script>
/*
window.onload = function(){
console.log('안녕하세요');
};
window.onload = function(){
console.log('반갑습니다'); // 덮어씌움
};
*/
</script>
<pre>
- jQuery에서는 해당 내용을 3가지 구문으로 제공
[ 표현법 ]
1)
jQuery(document).ready(function(){
실행내용;
});
2)
$(document).reay(function(){
실행내용;
});
$ : jQuery 키워드를 나타냄
jQuery에서 해당 function은 해당 HTML문서안에 있는 DOM요소들만 로드되면 바로 실행됨
여러번 기술 가능, 횟수 제한 없음!!!
3)
$(function(){
실행내용;
})
</pre>
<script>
/* window.onload = function(){실행내용;} */
// 방식 1)
jQuery(document).ready(function(){
console.log('문서 읽어들이기 완료');
});
// 방식 2)
$(document).ready(function(){
console.log('문서 읽어들이기 완료22222');
});
// 방식 3)
$(function(){
console.log('문서 읽어들이기 완료3333333333');
});
$(() => {
console.log('문서 읽어들이기 완료444444444444444444444');
// h3요소를 선택해서 배경색을 노란색으로 변경
// 순수 자바스크립트 방식
/*
const h3Arr = document.getElementsByTagName('h3'); // [h3, h3, h3]
for(let i = 0; i < h3Arr.length; i++){
h3Arr[i].style.backgroundColor = 'yellow';
}
*/
// jQuery방식
$('h3').css('background', 'yellow');
// $('선택자') : 해당 요소를 선택하겠다.
// .css() : 선택된 요소들의 스타일과 관련된 기능 수행
// .Javascript
// pre태그에 대한 글자색을 red으로 바꾸겠다!
/*
const preArr = document.getElementsByTagName('pre');
for(var i = 0; i < preArr.length; i++){
preArr[i].style.color = 'red';
};
*/
// jQuery방식
$('pre').css('color', 'red');
});
</script>
</body>
</html>'FrontEnd > JavaScript' 카테고리의 다른 글
| #42. JavaScript(객체2, window객체, 이벤트) (1) | 2023.08.30 |
|---|---|
| JS에서의 this (+ jQuery에서의 this) (1) | 2023.08.28 |
| #40. JavaScript(배열, 함수, 객체1) (2) | 2023.08.28 |
| #39. JavaScript(요소접근하기, 변수와자료형, 문자열과 숫자) (0) | 2023.08.25 |
| #38. JavaScript(개요, 데이터입출력) (0) | 2023.08.24 |