1. 정규표현식(Regular Expression = regex)
: 특정한 규칙을 가진 문자열 집합을 표현할때 사용하는 형식 언어
: 정규 표현식을 이용하면, 입력된 문자열에 대한 특정 조건 검색, 일치 여부 판단, 치환에 대한 조건문을 간단히 처리할 수 있다.
** 정규표현식 참고 사이트
01. 정규표현식을 그림으로 나타냄
http://regexper.com/
02.**정규표현식 테스트 사이트
http://regexr.com/
03.mdn-정규 표현식
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions2. 정규표현식 객체 생성 및 확인하기
01. 정규 표현식 객체 생성 방법
(1) new 사용 : const regExp = new regExp("정규표현식");
(2) // : const regExp = /정규표현식/;
-> 양쪽 '/' 기호는 정규표현식의 리터럴 표기법
02. 문자열 패턴 확인 메서드(함수)
(1) regExp.test("문자열")
-> 문자열에 정규표현식과 일치하는 패턴이 있을 경우 true, 없으면 false
(2) regExp.exec(문자열)
-> 문자열에 정규표현식과 일치하는 패턴이 있을 경우 처음 매칭되는 문자열 반환, 없으면 null반환
- 문자열 사용 예제
<button id="check1">확인하기(콘솔)</button>document.getElementById("check1").addEventListener("click",function(){
// 정규 표현식 객체 생성
//->"script"와 일치하는 문자열이 있는지 검사하는 정규식 객체
const regEx1 : new reExp("script");
// 'java'와 일치하는 문자열이 있는지 검사하는 정규식 객체
const regEx2 = /java/;
const str1 = "저는 지금 javascript를 공부하고 있습니다."
const str2 = "java, db, html, css, js 모두 사용중입니다."
const str3 = "aaaaaajava, java, java";
//확인하기
//1. str1에 reEx1에 있는 "script"가 있는지 확인하는 객체
// script가 있으면 -> true 반환 / 없으면 false 반환
// -> 객체명.내장함수 test(검사할 문자열)
console.log("regEx1.test(str1) : " + regEx1.test(str1));
//exec: 일치하는 문자열을 consle에 나타내줌
// scrip가 있으면 문자열 그대로 반환 / 없으면 null반환
console.log("regEx1.test(str1) : " + regEx1.exec(str1));
})3. 정규표현식의 메타 문자
: 문자열의 패턴을 나타내는 문자열
: 문자마다 지정된 특별한 뜻이 담겨있다.
a(일반문자열)
: 문자열 내에 a라는 문자열이 존재하는지 검색
[abcd]
: 문자열 내에 a,b,c,d 중 하나라도 일치하는 문자가 있는지 검색
^(캐럿)
: 문자열의 시작을 의미
$(달러)
: 문자열의 끝을 의미
\w(word, 단어)
: 아무 글자(단, 띄어쓰기, 특수문자, 한글은 포함하지 않음)
\d(digit, 숫자)
: 아무숫자(0~9중 하나)
\s(space, 공간)
: 아무 공백 문자(띄어쓰기, 엔터, 탭 등)
주의!
- [^abc] : 대괄호 안에 캐럭이 들어가면 'not'이라는 의미
[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칸(개행문자를 제외한 문자 하나)
- 메타문자 사용 예제 1 👻
<button id="check2">확인하기</button>
<div class="area" id="div1"></div>document.getElementById("check2").addEventListener("click", function(){
//결과 출렬용 div
cons div1 = document.getElementById("div1");
//이전 내용 삭제
div1.innerHTML="";
//[abcd] : 문자열 내에 a,b,c,d,중 하나라도 일치하는 문자가 있는지 검색
const regEx1 = /[abcd]/;
div.innerHTML += "/[abcd]/, apple: " + regEx1.test("apple");
//-> 결과 : true
div.innerHTML += "/[abcd]/, qwert: " + regEx1.test("qwert");
//-> 결과 : false
//^(캐럿): 문자열의 시작을 의미
//정규표현식 객체 생성
const regEx2 = /^group/;
//확인 메서드
div1.innerHTML += "/^group/, group100: " + regEx2.test("group100");
// -> 결과 : true
div1.innerHTML += "/^group/, 100grop : " + regEx2.test("100group");
// -> 결과 : fasle
//^[abcd]: 문자열이 a,b,c,d,중 하나로 시작하는지 검색
const regEx3 = "/^[abcd]/;
div1.innerHTML += "/^[abcd]/, group : " + regEx3.test("group"); //->false
div1.innerHTML += "/^[abcd]/, car : " + regEx3.test("car"); //->true
div1.innerHTML += "/^[abcd]/. dark : " + regEx3.test("dark"); //->true
//$(달러) : 문자열 끝을 의미
const regEx4 = "/team$/";
div1.innerHTML += "/team$/, A-team : " + regEx4.test("A-team"); //->true
div1.innerHTML += "/team$/, team-A : " + regEx4.test("team-A"); //-> false
})
// A-team, B-team, C-team, D-team 모두 갖고 싶으면
// -> /^[ABCD]-team$/
//-> /^[A-Z][0-9]$/ : 시작은 영어 대문자, 끝은 숫자
//-> /^[a-zA-Z0-9]$/ : 특수문자를 제외한 문자 하나 4. 이름 유효성 검사
- 한글 2글자 이상 6글자 이하의 문자열
- 단자음/모음의 경우는 제외
- 유효한 경우 초록색 글씨로 "유효한 이름 형식입니다." 출력
- 유효하지 않은 경우 빨간색 글씨로 "잘못된 형식입니다." 출력
요소.classList : 요소가 가지고 있는 클래스를 배열로 반환
요소.classList.add("클래스명") : 요소에 특정 클래스 추가
요소.classList.remove("클래스명") : 요소에 특정 클래스 삭제
요소.classList.toggle("클래스명") : 클래스가 있으면 제거, 없으면 추가- 메타문자 사용 예제 2 👻
<style>
.confirm{
color: green;
font-weight: bold;
text-decoration: underline;
}
.error{
xolor: red;
font-family: '궁서';
font-weight: bold;
}
</style>
이름 <input type="text" id="inputName">
<span id="result1" class="confirm"></span>document.getElementById("result1").addEventListener("click",function(){
const inputName = document.getElementById("inputName");
const regEx1 = /^[가-힣]{2,6}$/;
if(regEx1.test(this.value)){
result1.innerText="유효한 이름 형식입니다.";
result1.classList.add("confirm");
result1.classList.remove("error:);
}else{
result1.innerText="잘못된 형식입니다.";
result1.classList.add("error");
result1.classList.remove("confirm");
}
})