[jQuery] 정규표현식

버튼 타입은 기본적으로 <input type="submit">이다.

 

form태그 안에서만 내장되어 있는 기능

 - form태그와 submit은 같이 있는 때 기능이 활성화 된다.

 

form 태그 내 입력필드안에 있는 값을 다 긁어 모은 데이터를 서버에 보냄 

 - action = ""

 

    <!--1. 데이터 전송과 함께 페이지를 이동하는 기능-->
    <!--form태그 : 서버에 다른 페이지 또는 서버에 데이터를 전송하기 위한 태그-->
    <form action="test.html">
        <fieldset>
            <legend>서버에 데이터 전송</legend>
            <input type="text" placeholder="작성자"><br>
            <input type="text" placeholder="메시지"><br>

            <input type="submit">
            <!--전송을 기능으로 내장한 버튼 : form 태그 내에서만 전송 기능이 활성화-->
            <input type="button" value="평범한 버튼">
            <!--전송기능 없는 평범한 버튼-->
            <button>전송</button>
            <!--전송 기능을 내장한 버튼 : form 태그 내에서만 전송 기능이 활성화됨-->
            <button type="button">평범한 버튼</button>
            <!--전송 기능 없는 평범한 버튼-->
        </fieldset>
    </form>

 

    <!--2. 데이터 전송없이 페이지만 이동하는 기능-->
    <!--a 태그 : 페이지 전환 태그-->
    <!--location.href : ""; : 페이지 전환-->
    <button id="page">페이지 이동</button>
    <script>
        $("#page").on("click", function () {
            location.href = "https://www.naver.com";
        })
    </script>

 

유효성 검사

 

* 정규표현식( 문자열 패턴 매칭 기술 )

- 범용성 기술 ( 언어에 제한 받지 않음 )

- 문자열에 대한 복잡한 조건의 검색을 수행할 때 사용한다.

> 데이터 유효성 검사

  > 로그 분석  

  > 웹 크롤링 

  > 웹 자동화 Assist 

  > 욕설 필터 

  > Forensic

 

* 자바스크립트에서의 정규 표현식

- / / flag

- / / : 자바스크립트에서 정규표현식 객체 리터럴을 의미.

- flag :  정규 표현식에 적용될 옵션 값

let a = / /; // 정규표현식 객체를 담은 상태

 

 

*Option1 . global 옵션 :  검색에 한번 성공했을 때 멈추지 않고 전체에서 검색

g (global) - 범위는 전체의 영역에서 찾으라는 옵션 

 

 

* 정규표현식에서 사용되는 특수 문자

 

 

1. . : 아무 글자나 한 글자와 매칭되는 기호 ( 특수 문자 가 \n 등의 개행문자는 매칭이 안된다. ) 

 

> t.e : t와 e 사이에 아무글자나 한글자가 포함된 경우를 검색

 

> t.. : t 뒤에 아무 글자나 두 글자가 오는 패턴 검색 (.은 띄어쓰기도 매칭이 된다.)

 

 

>  ... : 3글자가 연속으로 나오는 패턴 검색

 

 

 

2. [] : [] 내에 작성한 글 목록 중 한 글자와 매칭되는 경우를 검색

> t[abc]e : t와 e 사이에 a,b,c중 한 글자가 포함된 경우를 검색

 

> toe는 검색에 실패 

 

---

*Option 0 :  아래 특수문자의 기능으로부터 Escape가 필요할 경우 \ 적용

< t.e 이 자체를 찾고 싶을 때 >

 

방법1>

방법2>

---

 

 

> 안에 들어갈 문자열이 많을 때 사용 

 

 

3. ^ :  자바의 startsWith 와 비슷한 기능으로 문장의 시작에서만 검색

 >   [] 내에서 사용될 경우  not 으로 사용될 수도 있음. 

 

> ^RegExr : 문장의 시작에서  RegExr 만 검색 해줌

 

> t[^hzyx]e : t로 시작, hzyx말고, 아무거나 한글자, e로 끝나는 것 검색

 

 

4. $ : 자바의 endsWith 와 비슷한 기능으로 문장의 끝에서만 검색

> 문장 끝에 있는 English. 검색해줌

 

---

* Option2. case insensitive 옵션 : 대소문자 가리지 않고 검색해준다.

 

검색에 실패하는 이유 > 문장 시작에 the가 없기 때문에 

 

* Option3. multiline 옵션 : 정규표현식에게 문장을 나누는 기준으로 Enter로 지정

---

3+4 . ^full$ : 문장 자체가 full 밖에 없는 상황을 검색

> 문장 자체가 full로만 구성된 것 찾기

 

---

Option4. single line(dotall) : . 특수문자가 \n등의 매칭 불가 문자까지 모조리 매칭하게 하는 설정

 

---

5. ? :  바로 앞의 한 문자가 있건 없건 검색 매칭 

> ? 앞에 한 글자 y가 있는 경우와 없는 경우 모두 검색이 된다.

> 수량자 뒤에 사용될 경우 lazy match 기능을 수행

 

> 띄어쓰기를 주어서 tomy or tom만 검색

 

 

6. + (수량자 )  : 바로 앞 한글자가 1개 이상인 경우를 검색 / 사용빈도 높음

 

> o 이 한글자 이상인 것 검색

 

 

7. * (수량자) : 바로 앞 한글자가 0개 이상인 경우를 검색

> o가 없어도 검색해줌

 

8. {} (수량자) : 바로 앞 한 글자의 글자 개수를 지정하여 검색 

> {1} : 바로 앞 글자가 글자 개수를 특정 지어서 검색

 

> {2,3} : 바로 앞 글자가  2글자 이상 3글자 이하인 것을 검색

> {2,} : 바로 앞 글자가 2번 이상 반복되는 경우 검색

 

 

 

> 아무 글자나 1회 이상 반복되는 것을 검색

 

 

 

 

퀴즈) 정확히 핸드폰 번호만 검색해보세요

1)

2)

 

2+ )0-9과 같은 기능 : \d

 

 

퀴즈)

1. 첫 글자는 알파벳 대문자만 가능, 그 외에는 알파벳 대소문자 및 숫자만 가능

2. 최소 4자리 이상 10자리 이하에 부합하는 요소만 검색

 

---

Option5. 수량자의 기본 매칭은 Greedy Match로 동작한다.

> ?를 써주면 최단 매치가 된다.(lazy match)

---

9.  | : 정규식 안에 표현을 두가지 이상으로 나누어 검색

 

10. () (그룹화) 

 > 1. 정규식이 적용될 대상을 그룹단위로 묶어서 적용

 

 

> 2. 검색하고자 하는 데이터의 그룹 번호를 부여해서 추출하는 기법

 

 

 

 

원래는 global옵션 아닐때는 >Hello<만 출력되는 것이 맞음!

$& : Capture 변수 

> 정규식이 문자열 내에서 검색에 성공하는 순간, 검색된 내용이 이 변수에 자동으로 저장이 된다.

> 소스 문자열에 대하여 정규표현식이 검색을 수행하고, 검색 대상을 찾아내는 순간,

자동으로 값을 가지게 되는 변수

>자바스크립트에만 존재하는 변수

>그룹화된 내용들은 순서대로 $1~$9로 저장이 된다.

> System.out.println($& + "\n");

 

 

 

 

https://regexr.com/80fca

 

 

RegExr: Learn, Build, & Test RegEx