step08. regular expression (정규 표현식)
<body>
<h1>정규 표현식 (Regular Expression)</h1>
<input type="text" id="inputID" placeholder="아이디 입력...">
<p>첫글자는 영문 소문자로 시작, 특수문자는 허용하지 않음... 최소 5글자 최대 10글자</p>
<button id="signupBtn">가입</button>
<script>
document.querySelector("#signupBtn").addEventListener("click", function(){
// 1. 입력한 아이디 값을 읽어온다.
let inputID = document.querySelector("#inputID").value;
// 2. 아이디 유효성 검증
let reg1 = /^[a-z][\w]{4,9}$/;
// 3. 결과를 알리기(유효한지 여부에 따라 다른 동작하기)
let isValid = reg1.test(inputId);
if(isValid){
} else{
}
})
</script>
</body>정규 표현식. regular expression이라고 한다. 어떤 언어를 사용하든 정규 표현식은 거의 유사하다고 말했다. 언어마다 조금씩 다르지만 javascript에서 정규 표현식은 '/' 로 감싸서 작성한다. 다른 text와 마찬가지로 정규 표현식으로 작성한 값을 변수에 담는 것은, 그 text 자체를 담는 것이 아니라 text의 참조값을 담게 된다. 또한 test(str) 함수를 통해 input 값과의 일치 여부를 확인할 수 있다.
- 영어 대소문자를 구분한다.
(ex - Hello와 hello는 다르다.) - space나 tab, 개행기호 같은 눈에 보이지 않는 내용까지도 일치해야 한다.
(ex - 공백이 space bar를 통해 만들어진 것과 tab을 통해 만들어진 것은 다르다.) - 특별한 의미를 가지고 있는 문자들이 있다.
^ : 매칭할 문자열의 시작을 의미한다.
$ : 매칭할 문자열의 끝을 의미한다. - 만약 특별한 의미를 가지는 문자열을 문자 그대로(literally) 사용하고 싶다면 앞에 '\'(역슬래쉬)를 붙여준다.
(ex - $를 찾고 싶다면 '\$'라고 작성해야 한다.) - '.'(point 점)은 모든 문자를 의미한다. (한 글자)
이또한 literally한 .를 찾고 싶다면 \를 붙여준다. - 대괄호 [ ]는 '문자 클래스'라고 한다. 안에는 매칭할 수 있는 문자의 목록을 넣는다. 순서는 중요하지 않다.
(ex - [you] 는 y나 o나 u를 매칭한다.) - 문자의 범위는 '-'(dash) 로 나타낼 수 있다. 범위를 표기하는 것이 아닌 -는 그냥 단순한 문자로 인식한다.
(ex - [a-d], [A-K}, [2-7], 대문자를 찾는다면 [A-Z], 소문자는 [a-z], 숫자는[0-9], 한글은 [가-힁] 힁은 사전상 마지막) - 문자 클래스 안에 첫 문자로 들어가는 ^는 시작을 의미하는 것이 아니라 not을 의미한다.
(ex- [^abc] : abc가 아닌 한 글자) - 문자열을 교차 매칭시키기 위해서는 소괄호 ( ) 안에 '|' 로 구분해서 나열한다.
(ex - (Mon|Tues|Fri)day - quantifiers(수량자) 라는 개념이 있다. 수량자는 문자가 몇 번 올 수 있는지를 정의한다.
* : 0번 이상 (없어도 되고, 많아도 된다.)
+ : 1번 이상 (반드시 있어야하며, 많아도 된다.)
? : 0번 or 1번 (없어도 되고, 있다면 단 하나여야 한다.) - 중괄호 { } 는 정확한 문자의 반복 횟수를 정의한다.
{m} : m번 반복.
{m, n} : 최소 m번, 최대 n번 반복.
{m, } : 최소 m번 반복. (그냥 최대 n번 반복인 { , n}은 없을까? -> 따로 없는 것 같다.)
(ex - {0}은 *과 같다. {1, }는 +와 같다. {0, 1}은 ?와 같다. - [0-9] 는 [\d] 와 같다. 이때 d는 decimal이라고 한다.
이것과 반대되는 것은 [^\d] 이고, 이것은 [\D] 와 같다. (소문자와 대문자는 반대의 개념이라고 했다.) - [a-zA-Z0-9] : 특수문자가 아닌 한 글자를 의미한다. 이것은 [\w]와 같다.
이것과 반대되는 것은 [^a-zA-Z0-9]도 가능하고 [\W] 도 가능하다.
'뒷북 정리 (국비 교육) > javascript' 카테고리의 다른 글
| [javascript] step07. innerHTML (0) | 2021.12.13 |
|---|---|
| [javascript] Dragon Flight 만들기 (21.04.14 ~ 21.04.16) (0) | 2021.12.11 |
| [javascript] step06. createElement (0) | 2021.12.11 |
| [javascript] step05. operator (연산자) : 증감 연산자 / example.3~4 (0) | 2021.12.09 |
| [javascript] step05. operator (연산자) : 비교 연산자 (0) | 2021.12.09 |
댓글