TIL 0412

먼지·2024년 4월 12일
TILjs국비쌍용교육센터

Today I Learned

목록 보기
39/89
post-thumbnail

정규표현식(Regular Expressions)

문자열에 나타내는 특정 문자 조합과 대응시키기 위해 사용되는 패턴을 의미

정규표현식 /(시작)패턴/(끝)
패턴의 시작에는 ^ , 패턴의 끝에는 $ 입력시킴
/^ 패턴 $/ -> 기본 형태

메타 문자

메타문자의미
.개행 문자를 제외한 문자 1자
\s공백 문자(공백문자는 공백, 탭, 줄바꿈, 리턴키 값 포함)
\S공백 문자 아님
\w아무 단어(숫자 포함)
\W아무 단어 아님
\d숫자
\D숫자 이외의 문자
^행의 시작, 문자열의 시작(패턴의 시작, 이 문자만 패턴의 앞에 올 수 있음)
$행 꼬리, 문자열의 종료(이 문자는패턴의 끝을 알림, 문자열에서 패턴의 마지막 문자는 반드시 이 문자로 끝나야 함)
X?X의 0문자 또는 1문자
X*X의 0문자 이상 반복
X+X의 1문자 이상 반복
X{n}X의 n회 반복
X{n,}X의 n회 이상 반복
X{n,m}X의 n부터 m회 반복
XY
[XYZ]X또는 Y 또는 Z의 1문자(문자의 집합을 나타냄)
[^XYZ]X도 Y도 Z도 아닌 1문자(문자의 집합을 나타냄)

활용의 예시

/./한 자리 문자“A”, “1”, “%”
/\w/한 자리 문자, 숫자“A”,”1”
/^\d/문자열의 시작이 한 자리 숫자"1"
/bi$/문자열 끝에 bi이 있는 경우“nabi”
/^na/문자열 시작에 na가 있는 경우“nabi”
/^\d/문자열 시작에 한 자리 숫자“2ne1”
/[abc]/괄호 안의 글자
/[^abc]/괄호 안의 글자 제외
/[a-z]/알파펫 a부터 z까지
/[A-Z]/알파펫 A부터 Z까지
/[0-9]/숫자 0부터 9까지
/\d{6}-[1234]\d{6}/주민등록번호
숫자 6개
-
숫자1~4중에서 한개
6개의 숫자		900101-1012345
/\w+@\w+.\w+/이메일
숫자포함 문자 하나 이상 반복
@
숫자포함 문자 하나 이상 반복
.
숫자포함 문자 하나 이상 반복		test@test.com

메소드

메소드설명
test()대상의 매치 여부를 boolean값(true / false)로 반환한다.
match()정규식 조건에 부합하는 문자열을 배열 형태로 반환해준다.
만약 조건에 부합하는 문자열이 없으면 null을 반환한다.

정규표현식 1

\d : 숫자
{3} : 3번 반복

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>정규표현식</title>
    <script>
        window.onload = function () {
            const form = document.getElementById('register_form');
            //이벤트 연결
            form.onsubmit = function () {
                const phone = document.getElementById('phone')
                if (!/^\d{3}-\d{4}-\d{4}$/.test(phone.value)) { 
                //불일치하다면 if 블럭으로 진입하기 위해 ! 추가
                    alert('000-0000-0000의 형식으로 입력하세요.');
                    phone.value = '';
                    phone.focus();
                    return false;
                }

            };
        };
    </script>
</head>

<body>
    <h3>정규표현식</h3>
    <form id="register_form" action="a.jsp" method="post">
        <ul>
            <li>
                <label for="phone">휴대폰</label>
                <input type="text" name="phone" id="phone">
                (000-0000-0000 형식으로 입력)
            </li>
        </ul>
        <div>
            <input type="submit" value="전송">
        </div>
    </form>
</body>

</html>

정규표현식 2

[] '['와']' : 사이의 문자들과 대치라는 의미
[]안의 문자 사이에 하이픈(-)을 사용하게 되면 문자 사이의 범위(From - To)를 의미한다
ex) [0-9] -> [0123456789] 와 같은 의미
{11} -> 11번 반복

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>정규표현식</title>
    <script>
        window.onload = function () {
            const form = document.getElementById('register_form');
            form.onsubmit = function () {
                const phone = document.getElementById('phone');
                if (!phone.value.match(/^[0-9]{11}$/)) {
                    // 0부터 9까지의 범위 숫자만 입력하고, 11자리수까지 입력 가능합니다. 
                    //그게 match하지 않는다면 alert를 실행합니다.
                    alert('11자리 숫자만 입력해주세요.')
                    phone.value = '';   //입력된 값을 빈칸으로 처리시킴
                    phone.focus();
                    return false; //submit 이벤트라 데이터가 저장이 안되려면 필요하다.
                }
            };
        };
    </script>
</head>

<body>
    <h3>정규표현식</h3>
    <form action="a.jsp" method="post" id="register_form">
        <ul>
            <li>
                <label for="phone">휴대폰</label>
                <input type="text" name="phone" id="phone">
                (- 없이 입력)
            </li>
        </ul>
        <div>
            <input type="submit" value="전송">
        </div>
    </form>
</body>

</html>

정규표현식 3

[] '[' 와 ']' 사이의 문자들과 매치라는 의미.
[A-Za-z0-9] -> A~Z , a~z, 0~9 사용을 의미한다
{4,12} - > 반복 횟수가 4부터 시작하여 12까지 반복할 수 있다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>정규표현식</title>
    <script>
        window.onload = function () {
            const form = document.getElementById('register_form');
            form.onsubmit = function () {
                const id = document.getElementById('id');
                if(!/^[A-Za-z0-9]{4,12}$/.test(id.value)){
                    alert('영문 또는 숫자 사용, 최소 4자 ~ 최대 12자를 사용하세요.');
                    id.value = '';
                    id.focus();
                    return false;
                }
            };
        };
    </script>
</head>

<body>
    <h3>정규표현식</h3>
    <form action="a.jsp" id="register_form" method="post">
        <ul>
            <li>
                <label for="id">아이디</label>
                <input type="text" name="id" id="id">
                (영문 또는 숫자 사용, 최소 4자 ~ 최대 12자)
            </li>
        </ul>
        <div>
            <input type="submit" value="전송">
        </div>
    </form>
</body>

</html>

Local Storage 1

로컬 스토리지 : 브라우저를 통해 사용자의 컴퓨터에 데이터를 지속적으로 저장할 수 있는 공간
다시 사이트를 방문했을 때 로컬 스토리지에 저장된 모든 데이터를 사용 가능

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로컬 스토리지</title>
    <script>

   window.onload = function() {
    const save = document.getElementById('save');
    const load = document.getElementById('load');

    //데이터 저장을 위한 이벤트 연결
    save.onclick= function() {
        const text = document.getElementById('text');
        //로컬 스토리지에 데이터 저장
        //localStorage.setItem('name', text.value);
        localStorage.name = text.value;

        //입력창 초기화
        text.value = '';
    };

    //저장된 데이터를 읽어오기 위한 이벤트 연결
    load.onclick = function() {

        //로컬 스토리지에 저장된 데이터 읽기
        // let loadedName = localStorage.getItem('name');
        let loadedName = localStorage.name;

        alert('localStorage 객체에 저장된 이름 : ' + loadedName);
    };
   }
    </script>
</head>
<body>
   <input type="text" id="text"> 
   <button id="save">저장</button>
   <button id="load">불러오기</button>
</body>
</html>


Local Storage 2

JSON(JavaScript Object Notation - 자바스크립트를 객체 형식으로 만드는 것을 의미한다)
형식의 문자열로 만든다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로컬 스토리지</title>
    <script>
        window.onload = function() {
            const save = document.getElementById('save');

            //이벤트 연결
            save.onclick = function() {
            //사용자가 입력한 번호, 이름, 주소를 읽어옴
            const num = document.getElementById('num');
            const name = document.getElementById('name');
            const addr = document.getElementById('addr');

            // 로컬 스토리지에 개별적으로 저장
            // localStorage.num = num.value;
            // localStorage.name = name.value;
            // localStorage.addr = addr.value;

            let memberStr = '{"num": "' + num.value + '", "name": "' + name.value + '", "addr": "' + addr.value + '"}';
            
            //저장하기
            localStorage.member = memberStr;

            //입력창 초기화
            num.value='';
            name.value='';
            addr.value='';

            };

            const load = document.getElementById('load');
            load.onclick = function() {
                let loadedMemberStr = localStorage.member;

                //문자열을 객체로 변환
                const memberObj = JSON.parse(loadedMemberStr);

                //객체의 속성 호출
                alert(memberObj.num + ',' + memberObj.name + ',' + memberObj.addr);
                //alert('local Storage에 저장된 member\n' + loadedMember)
            };
        };
    </script>
</head>
<body>
    번호<input type="text" id="num"><br>
    이름<input type="text" id="name"><br>
    주소<input type="text" id="addr"><br>
    <button id="save">저장</button>
    <button id="load">불러오기</button>
</body>
</html>


Local Storage 3

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로컬 스토리지</title>
    <script>
        window.onload = function () { 

            const bg_color = document.getElementById('bg_color');
            const text_color = document.getElementById('text_color');
            const text_size = document.getElementById('text_size');

            //초기값 설정
            load_setting();

            const myForm = document.getElementById('frm');
            myForm.onsubmit = function() {
                //기본 이벤트 제거
                event.preventDefault();

                //데이터 저장
                save_setting();
            };

            //로컬스토리지에 저장된 데이터 반환
            function load_setting() {
                bg_color.value = localStorage.getItem('bg_color');
                text_color.value = localStorage.getItem('text_color');
                text_size.value = localStorage.getItem('text_size');

                //스타일 반영
                apply_data();
            };

            //로컬 스토리지에 설정값 저장
            function save_setting() {
                localStorage.setItem('bg_color',bg_color.value);
                localStorage.setItem('text_color',text_color.value);
                localStorage.setItem('text_size',text_size.value);

                //스타일 반영
                apply_data();
            };

            //스타일을 태그에 반영
            function apply_data() {
                document.body.style.backgroundColor = bg_color.value;
                document.body.style.color = text_color.value;
                document.body.style.fontSize = text_size.value;

                
            };
            
        };
    </script>
</head>

<body>
    <h2>환경 설정 값 기억</h2>
    <form id="frm">
        <fieldset>
            <legend>색상/글자 크기 선택</legend>
            <ul>
                <li>
                    <label for="bg_color">배경색</label>
                    <input type="text" name="bg_color" id="bg_color">
                </li>
                <li>
                    <label for="text_color">글자색</label>
                    <input type="text" name="text_color" id="text_color">
                </li>
                <li>
                    <label for="text_size">글자 크기</label>
                    <select name="text_size" id="text_size">
                        <option value="16px">16px</option>
                        <option value="20px">20px</option>
                        <option value="24px">24px</option>
                    </select>
                </li>
                <input type="submit" value="저장">
            </ul>
        </fieldset>
    </form>
</body>

</html>


Session Storage

세션 스토리지는 브라우저가 열려있는 동안 모든 데이터를 기억하고 있다가 탭(또는 창)을 닫으면 모두 지워지는 저장 공간

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>세션 스토리지</title>
    <script>

        window.onload = function () {
            //저장된 데이터 읽기
            load();

            const save = document.getElementById('save');

            //이벤트 연결
            save.onclick = function () {
                const first = document.getElementById('first');

                //세션 스토리지에 저장
                // sessionStorage.setItem('name', first.value);
                sessionStorage.name = first.value;

                //저장된 데이터 읽기
                load();
            };

            //저장된 데이터 읽기
            function load() {
                const display = document.getElementById('display');
                // let name = sessionStorage.getItem('name'); 
                let name = sessionStorage.name;

                //저장된 값이 없으면 undefined 반환
                if(name){
                    display.innerHTML = '저장된 값 : ' + name;
                }
            }
        }
    </script>
</head>

<body>
    <h2>세션 스토리지(Session Storage)</h2>
    <input type="text" name="first" id="first">
    <button id="save">저장</button>
    <div id="display"></div>
</body>

</html>

File

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>file</title>
<script type="text/javascript">
window.onload=function(){
	//파일을 선택할 때 
  document.getElementById('file').onchange=function(){
		//선택한 파일의 file 객체 반환
		//input type="file" 태그에서 multiple="multiple" 속성을
		//명시하면 복수의 파일을 선택할 수 있고 그 정보는 배열에 저장됨.
		//따라서 하나의 파일을 선택해도 배열에 저장됨.
		const file = this.files[0];
		//선택한 파일의 이름 출력
		alert(file.name + '을 선택했습니다.');
	};
	
	//읽기 버튼을 클릭할 때
	document.getElementById('btnStart').onclick=function(){
		readProcess();
	};
	
};

function readProcess(){
	//선택한 파일에 대한 정보 읽기, file 객체 반환
	const file = document.getElementById('file').files[0];
	
	if(!file){//if(file == undefined)
		alert('파일을 선택하세요!');
		return;
	}
	
	document.getElementById('filename').textContent = file.name;
	document.getElementById('filesize').textContent = '(' + file.size + 'bytes)';
	document.getElementById('filetype').textContent = file.type;
	document.getElementById('filedate').textContent = file.lastModifiedDate.toLocaleString();
	
	//select 태그 객체 반환
	const encodeList = document.getElementById('encoding');
	//선택한 인코딩 정보 반환
	let encoding = encodeList.value;
	
	const reader = new FileReader();//파일 읽기 기능 제공
	reader.readAsText(file,encoding);//선택한 파일을 읽어서 문자열로 저장
	//파일의 내용을 모두 읽어들이면 onload 속성에서 대입된 함수가 호출됨
	reader.onload=function(){
		const contents = document.getElementById('contents');
		contents.value = reader.result;//읽어들인 내용 반환
	};
	reader.onerror=function(){
		alert('파일 읽기 중 오류 발생');
	};
	
	
}

</script>
</head>
<body>
<h2>현재 시스템의 파일 읽기</h2>
<input type="file" id="file" accept="text/*">
<select id="encoding">
	<option>EUC-KR</option>
	<option>UTF-8</option>
</select>
<button id="btnStart">읽기</button>
<div>
	<span id="filename">파일명</span>
	<span id="filesize">파일크기</span>
	<span id="filetype">파일타입</span>
	<span id="filedate">파일의 마지막 갱신 일시</span>
</div>
<textarea id="contents" rows="10" cols="50" readonly="readonly"></textarea>
</body>
</html>



profile
먼지
Lucky Things🍀
이전 포스트

TIL 0411

다음 포스트

TIL 0415

0개의 댓글