단비의 코딩 공부 blog

[Vanilla JS]study 25일차 - 정규표현식 본문

javascript&jquery

[Vanilla JS]study 25일차 - 정규표현식

황굽달 2023. 5. 3. 08:33

1. 정규표현식 생성

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS - 정규표헌식</title>
</head>
<body>
    <script>
        //정규표현식(Regular Expressions) : 뮨자열 검색 패턴을 형성하는 일련의 문자를 의미
        //간단한 문자 검색 : 이메일 방식, 아이디, 패스워드 검사할 때 사용
        //기능 : 문자 검색, 변경, 추출

        //문법1 - 변수 선언식
        //variable 변수명 = 표현식/플래그;
        let regExp01 = /^abc/gi;

        //문법2 - 생성자함수식
        //variable 변수명 = new RegExp(표현식,플래그);
        let regExp02 = new RegExp("^abc","gi");
    </script>
</body>
</html>

2. 정규표현식속성과 매서드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS - 정규표헌식</title>
</head>
<body>
    <script>
        //속성 : 속성명;
        //1. flags : 플래그를 문자열로 반환 ex) /^abc/gi.flags
        //2. sourse : 표현식을 문자열로 반환
        //3. global : 플래그 g여부를 불표현식으로 반환

        //메서드 : 메서드명()
        //1. exec() : 정규식.exec(문자열) : 일치하는 하나의 정보를 반환
        //2. test() : 정규식.test(문자열) : 일치 여부를 true/false 반환
        //3. match() : 문자열.match(정규식) : 일치하는 문자열을 배열로 반환

        var test = `
            꼭꼭 숨어라
            모두모두 숨어라
            꼭꼭 숨어라
            빨리빨리 숨어라
        `;

        let execTest = /숨어라/.exec(test);

        console.log(execTest);

        let testTest = /숨어라/.test(test);

        console.log(testTest);

        let searchTest = test.search(/숨어라/);

        console.log(searchTest);
    </script>
</body>
</html>

3. 플래그

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS - 정규표헌식</title>
</head>
<body>
    <script>
        //var 변수명 = 표현식/플래그;
        //플래그 : 표현식의 옵션으로 표현식으로 검색하려는 문자패턴에 추가적인 옵션을 넣어 문자 검색 결과를 반환하도록 설정
        //g : 모든 문자와 여러 줄 일치(global)
        //i : 영어대소문자를 구분하지 않고 일치 (ignore case)
        //m : 여러 줄 일치(multi)
        //u : 유니코드
        //y : lastIndex속성으로 지정된 인덱스에서만 1회 일치

        var test = `
            꼭꼭 숨어라
            모두모두 숨어라
            꼭꼭 숨어라
            빨리빨리 숨어라
        `;

        //match() : 일치하는 문자열을 배열로 반환

        let noGlobal = test.match(/숨어라/);
        let yesGlobal = test.match(/숨어라/g);

        console.log(noGlobal);
        console.log(yesGlobal);

        let test2 = 'Korea';

        let noCase = test2.match(/korea/g);
        let yesCase = test2.match(/korea/ig);

        console.log(noCase);
        console.log(yesCase);
    </script>
</body>
</html>

4. 정규식 패턴

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS - 정규표헌식</title>
</head>
<body>
    <label for="joinId">아이디 입력 :</label>
    <input type="text" id="joinId" placeholder="8~9글자 사이로 작성">
    <button id="btn">아이디 확인</button>
    <script>
        //정규식패턴(표현식) :  표현식을 작성하는 패턴
        //^ : 줄의 시작에서 일치
        //$ : 줄의 끝에서 일치
        //. : 임의의 한문자와 일치
       
        //[] : 대괄호는 문자의 범위를 지정
        //[a-z] : 영어 소문자 전부 선택
        //[A-z] : 영어 대문자 전부 선택
        //[0~9] : 숫자 전부 선택
        //[가~하] : 가~하 사이의 문자열 일치(한글과 맞는지 여부)
        //[^abc] : a 또는 b또는 c가 아닌 문자와 일치(부정)

        //{} : 글자수를 제한하는데 사용
        //{8,12} : 8~12글자 사이를 입력

        //영어 대소문자와 숫자를 제외한 값을 입력하거나, 8~12글자 사이가 아닌경우 경고창이 뜨게 설정

        //문서객체선택
        const joinId = document.getElementById('joinId');
        const btn = document.getElementById('joinId');

        //버튼클릭이벤트
        btn.addEventListener('click', function(){
            let v = joinId.value;
            let idReg = /^[a-zA-z0-9]{8,12}$/g;

            if(!idReg.test(v)){
                alert('영어 대소문자와 숫자로만 작성하시오.');
            }
        });
    </script>
</body>
</html>

 

저작자표시

'javascript&jquery' 카테고리의 다른 글

[Vanilla JS]study 27일차 - 함수  (0) 2023.05.12
[Vanilla JS]study 26일차 - 네이버 회원가입창 제작  (0) 2023.05.08
[Vanilla JS]study 24일차 - 배열반복  (0) 2023.04.26
[Vanilla JS]study 23일차 - Templete Literals  (0) 2023.04.25
[Vanilla JS]study 22일차 - 에러  (1) 2023.04.17
'javascript&jquery' Related Articles more