YJ의 새벽
Java Script ( 정규표현식 ) 본문
- 정규표현식 ( Regular Expression )
-- 특정한 규칙을 가진 문자열 집합을 표현, 사용하는 형식 언어.
-- 정규표현식을 이용하면 입력한 문자열에 대한
특정 조건 검색, 일치 여부 판단, 치환에 대한 조건문을 간단히 처리할수 있다.
---- 참고 사이트 (( 작성한 정규표현식을 그림으로 나타내줌 ))
Regexper
regexper.com
---- 참고사이트 (( 정규표현식 테스트 ))
RegExr: Learn, Build, & Test RegEx
RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).
regexr.com
---- 참고사이트 (( MDN - 정규표현식 ))
정규 표현식 - JavaScript | MDN
정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. JavaScript에서는 정규 표현식도 객체로서, RegExp의 exec()와 test() 메서드를 사용할 수 있습니다. String의 match(), matchA
developer.mozilla.org
- 정규표현식 객체 생성 및 확인하기
-- 1. 정규 표현식 객체 생성 방법
1) const regExp = new RegExp ("정규표현식") ;
2) const regExp = / 정규표현식 / ;
-- 2. 문자열 패턴 확인 메서드 (함수)
1) regExp.test ( "문자열" )
--> 문자열에 정규 표현식과 일치하는 패턴이 있으면 true, 없으면 false
2) regExp.exec ( "문자열" )
--> 문자열에 정규표현식과 일치하는 패턴이 있을 경우
처음 매칭되는 문자열 반환. 없으면 null .
- 정규표현식의 메타문자
-- 문자열의 패턴을 나타내는 문자.
-- 문자마다 지정된 특별한 뜻이 담겨있다.
a (일반문자열) : 문자열 내에 a 라는 문자열이 존재하는지 검색
[ abcd ] : 문자열 내에 a, b, c, d 중 하나라도 일치하는지 검색
^ (캐럿) : 문자열의 시작을 의미
$ (달러) : 문자열의 끝을 의미
\ w (단어) : 아무 글자 ( 띄어쓰기, 특수문자, 한글 X )
\ d (숫자) : 아무 숫자 ( 0~9 중 하나 )
\ s (공간) : 아무 공백 문자 ( 띄어쓰기, 엔터, 탭 등 )
[ 0-9 ] : 0 부터 9 까지 모든 숫자
[ ㄱ-힣 ] : ㄱ 부터 힣 까지 모든 한글 ( 자음,모음, 자+모음, 받침)
[ 가-힣 ] : 자음, 모음만 작성되는 경우를 제외한 한글
[ a-z ] : 모든 영어 소문자
[ A-Z ] : 모든 영어 대문자
** 특수문자의 경우 각 값을 입력하는 방법만 있음.
단, 메타문자와 중복되는 특수문자는 앞에
\ (백슬래시) 를 추가하여 Escape 문자로 만들어 사용.
** 수량 관련 메타문자
a { 5 } : a 문자가 5개 존재 -- aaaaa
a { 2,5 } : a가 2개 이상 5개 이하 -- aa, aaa, aaaa, aaaaa
a { 2, } : a가 2개 이상
a { ,5 } : a가 5개 이하
* : 0개 이상 . -- 0번 이상 반복 : 있어도되고, 없어도되고
+ : 1개 이상. -- 1번 이상 반복
? : 0개 또는 1개
. : 1칸 ( 개행문자를 제외한 문자 하나 )
- EX )))))))))
// [abcd] : 문자열내에 a b c d 하나라도 일치하는지 검색
const regEx1= /[abcd]/;
div1.innerHTML += "/[abcd]/ , apple : "+regEx1.test("apple")+"<hr>";
div1.innerHTML += "/[abcd]/ , qwerty : "+regEx1.test("qwerty")+"<hr>";
//^(캐럿) : 문자열의 시작을 의미
const regEx2 =/^group/;
div1.innerHTML += "/^group/ , group100 : "+regEx2.test("group100")+"<hr>";
div1.innerHTML += "/^group/ , 100group : "+regEx2.test("100group")+"<hr>";
// ^[abcd] : 문자열이 a b c d 하나로 시작하는지 검색
const regEx3 = /^[abcd]/;
div1.innerHTML += "/^[abcd]/ , group : "+regEx3.test("group100")+"<hr>";
div1.innerHTML += "/^[abcd]/ , car : "+regEx3.test("car")+"<hr>";
div1.innerHTML += "/^[abcd]/ , dark : "+regEx3.test("dark")+"<hr>";
// &(달러) : 문자열 끝을 의미
const regEx4 =/team$/;
div1.innerHTML += "/team$/ , A-team : "+regEx4.test("A-team")+"<hr>";
div1.innerHTML += "/team$/ , team-A : "+regEx4.test("team-A")+"<hr>";
요소 . classList : 요소가 가지고있는 클래스를 배열로 반환
요소 . classList.add("클래스명") : 요소에 특정 클래스 추가
요소 . classList.remove("클래스명") : 요소에 특정 클래스 삭제
요소 . classList.toggle("클래스명") : 클래스가있으면 제거, 없으면 추가
- 이름유효성검사 ( 한글2글자이상, 6글자이하 )
<style>
#text2{
display: inline-block
}
.confirm{
color: green;
font-weight: bold;
text-decoration: underline;
}
.error{
color: red;
font-family: "궁서";
font-weight: bold;
}
</style>
<body>
이름 : <input type="text" id="text1">
<div id="text2"></div>
</body>document.getElementById("text1").addEventListener("keyup",function(){
var text1 =document.getElementById("text1");
var text2 =document.getElementById("text2");
const regEx1= /^[가-힣]{2,6}$/
if( regEx1.test(text1.value)==true){
text2.innerText="유효한 이름형식입니다";
text2.classList.add("confirm");
text2.classList.remove("error");
}else if(!regEx1.test(text1.value)){
text2.innerText="잘못된 형식입니다";
text2.classList.add("error");
text2.classList.remove("confirm");
}
})이름유효성검사
이름 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
form{
width: 500px;
}
.true{
color: green;
}
.false{
color: red;
}
td{
height: 30px;
}
</style>
</head>
<body>
<form action="main.html" method="GET" onsubmit="return validate();">
<fieldset>
<legend>회원가입양식</legend>
<table>
<tr>
<td>아이디</td>
<td><input type="text" id="inputId"></td>
<td><input type="button" value="중복확인"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" id="inputPassword1"></td>
<td><span id="passwordCheck"></span></td>
</tr>
<tr>
<td>비밀번호확인</td>
<td><input type="password" id="inputPassword2"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" id="inputName"></td>
<td><span id="nameCheck"></span></td>
</tr>
<tr>
<td>성별</td>
<td>남 <input type="radio" id="select" name="gender" value="m">
여 <input type="radio" id="select" name="gender" value="f"></td>
</tr>
<tr>
<td>전화번호</td>
<td><input type="text" id="inputNumber"></td>
<td></td>
</tr>
<tr>
<td>이메일</td>
<td><input type="text"></td>
<td></td>
</tr>
<tr>
<td></td>
<td style="padding: 0 0 0 50px;">
<button type="reset">초기화</button>
<button type="submit" id="button">회원가입</button>
</td>
<td>
</td>
</tr>
</table>
</fieldset>
</form>
<script src="/js/07_정규표현식_1.js"></script>
</body>
</html>
//아이디체크
document.getElementById("inputId").addEventListener("input",function(){
const regEx1 = /^[a-z][a-zA-Z0-9_-]{5,13}$/;
if( regEx1.test(this.value)==true){
this.style.backgroundColor="green";
}else{
this.style.backgroundColor="red";
this.style.color="white";
}
})
//비밀번호 일치
document.getElementById("inputPassword2").addEventListener("keyup",function(){
var input=document.getElementById("inputPassword1");
var output=document.getElementById("passwordCheck");
if( input.value.trim().length==0){
this.value="";
alert("비밀번호를 입력해주세요");
input.focus();
}
if(input.value==this.value){
output.innerText="비밀번호 일치";
output.classList.add("true");
output.classList.remove("false");
}else{
output.innerText="비밀번호 불일치";
output.classList.add("false");
output.classList.remove("true");
}
})
// 이름체크
document.getElementById("inputName").addEventListener("change",function(){
var nameCheck=document.getElementById("nameCheck");
const regEx1 = /^[가-힣]{2,5}$/;
if( regEx1.test(this.value)==true){
nameCheck.innerText="정상입력";
nameCheck.classList.add("true");
nameCheck.classList.remove("false");
}else{
nameCheck.innerText="한글만 입력하세요";
nameCheck.classList.add("false");
nameCheck.classList.remove("true");
}
})
//회원가입버튼 클릭시 .
function validate(){
//성별선택해주세요
// submit 기본이벤트 제거해야함.
//체크된 radio 버튼만 얻어오기
const gender = document.querySelector("input[name='gender']:checked")
if( gender==null){
alert("성별을 선택해주세요");
return false;
}
// 전화번호
const inputTel = document.getElementById("inputNumber");
const regEx = /^[0][0-9]{1,2}-[0-9]{3,4}-[0-9]{4}$/;
if( !regEx.test(inputTel.value)){
alert("전화번호 형식이 올바르지 않습니다");
return false;
}
return true;
}
'WebFront_ > Java Script' 카테고리의 다른 글
| Java Script ( window 내장객체 , 팝업창 ) (0) | 2023.02.28 |
|---|---|
| Java Script ( 형변환, 연산자, 배열 ) (0) | 2023.02.28 |
| Java Script ( 이벤트 ) (0) | 2023.02.24 |
| Java Script ( 간이계산기 ) (0) | 2023.02.24 |
| Java Script ( 변수 ) (0) | 2023.02.24 |
