[JavaScript] 날짜 형식에 하이픈(-)기호 자동 삽입[JavaScript] 날짜 형식에 하이픈(-)기호 자동 삽입

Posted at 2020. 9. 10. 18:20 | Posted in JavaScript & jQuery/JavaScript





■ 날짜 입력 형식에 하이픈(-)기호 자동 삽입





# 소스코드

<html>

<head>

<title>:: JavaScript 날짜 하이픈(-) 삽입 ::</title>

<script type="text/javascript">

    function inputYMDNumber(obj) {


        // @see DELETE 키버튼이 눌리지 않은 경우에만 실행

        if(event.keyCode != 8) {


            // @see 숫자와 하이픈(-)기호의 값만 존재하는 경우 실행

            if(obj.value.replace(/[0-9 \-]/g, "").length == 0) {


                // @see 하이픈(-)기호를 제거한다.

                let numberobj.value.replace(/[^0-9]/g,"");

                let ymd = "";


                // @see 문자열의 길이에 따라 Year, Month, Day 앞에 하이픈(-)기호를 삽입한다.

                if(number.length < 4) {

                    return number;

                } else if(number.length < 6){

                    ymd += number.substr(0, 4);

                    ymd += "-";

                    ymd += number.substr(4);

                } else {

                    ymd += number.substr(0, 4);

                    ymd += "-";

                    ymd += number.substr(4, 2);

                    ymd += "-";

                    ymd += number.substr(6);

                }


                // @see 입력 가능 날짜 제한 기능 - 선택

                // if(ymd.length == 10) {

                //

                //     const birthDay = new Date(number.substr(0,4)+"/"+number.substr(4,2)+"/"+number.substr(6)+" 00:00:00");

                //     const limitDay = new Date("2000/10/04 23:59:59");

                //

                //     if(birthDay > limitDay) {

                //         alert("2000년 10월 04일 이후의 날짜는\n선택할 수 없습니다.");

                //         obj.value = "";

                //         obj.focus();

                //         return false;

                //     }

                // }


                obj.value = ymd;


            } else {

                alert("숫자 이외의 값은 입력하실 수 없습니다.");


                //@see 숫자와 하이픈(-)기호 이외의 모든 값은 삭제한다.

                obj.value = obj.value.replace(/[^0-9 ^\-]/g,"");

                return false;

            }

        } else {

            return false;

        }

    }

</script>

</head>

<body>

    <h1>■ 날짜 자동 하이픈(-)기호 삽입</h1>

    <input type="text" onKeyup="inputYMDNumber(this);" value="" placeholder="YYYY-MM-DD" style="text-align:center;"/>

</body>

</html>





# 출력결과







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 입력 텍스트값 Byte 체크[JavaScript] 입력 텍스트값 Byte 체크

Posted at 2020. 9. 10. 15:43 | Posted in JavaScript & jQuery/JavaScript




참고 : https://zzznara2.tistory.com/458







■ 입력 텍스트 값 자동으로 Byte체크하기





다국어 페이지 제작에 따른 입력 텍스트의 글자( Byte단위 )의 체크가 필요했다.


텍스트 박스에 글자를 입력하다가 해당 텍스트가 정해진 Byte의 단위를 넘어서는 경우가 발생하면


자동으로 더 이상의 텍스트 삽입을 막는 예이다.



# 소스코드

<html>

<head>

<title>:: JavaScript Byte 체크하기 ::</title>

<style type="text/css">

    .contents { width : 99%;height : 100px; }

    .viewByte { font-weight : bold;color : red; }

</style>

<script type="text/javascript">


    // @see     설정된 바이트의 크기를 넘어서지 못하게 체크하는 함수

    function inputLimitByteChecked( obj ) {


        var calByte = {

            getByteLength : function( string ) {


                if( string == null || string.length == 0 ) {

                    return 0;

                }


                let size = 0;


                for( let num = 0; num < string.length; num++ ) {

                    size += this.charByteSize( string.charAt( num ) );

                }


                return size;

            }

            , cutByteLength : function( string, length ) {


                if( string == null || string.length == 0 ) {

                    return 0;

                }


                let size = 0;

                let rIndex = string.length;


                for( let num = 0; num < string.length; num++ ) {


                    size += this.charByteSize( string.charAt( num ) );


                    if( size == length ) {

                        rIndex = num + 1;

                        break;

                    } else if( size > length ) {

                        rIndex = num;

                        break;

                    }

                }


                return string.substring( 0, rIndex );

            }

            , charByteSize : function( ch ) {

                if( ch == null || ch.length == 0 ) {

                    return 0;

                }


                let charCode = ch.charCodeAt( 0 );


                if( charCode <= 0x00007F ) {

                    return 1;

                } else if( charCode <= 0x0007FF ) {

                    return 2;

                } else if( charCode <= 0x00FFFF ) {

                    return 3;

                } else {

                    return 4;

                }

            }

        };


        if( calByte.getByteLength( obj.value) > obj.dataset.byte ) {

            alert("작성할 수 있는 텍스트 글자 범위를 초과하였습니다.");

            obj.value = calByte.cutByteLength( obj.value, obj.dataset.byte );

        } else {

            document.getElementsByClassName( "viewByte" )[0].innerText = calByte.getByteLength( obj.value );

        }

    }

</script>

</head>

<body>

    <h1>■ 입력 텍스트의 자동 Byte 체크</h1>

    <textarea class="contents" onKeyup="inputLimitByteChecked( this );" data-byte="255"></textarea>

    <p><span class="viewByte">0</span>&nbsp;Byte 입니다.</p>

</body>

</html>




이제 해당 코드의 출력결과를 살펴보자.


텍스트 박스에 글자를 계속 입력해 나가면 data-byte 에 설정된 255 값이 넘으면 경고창이 나타날 것이다.




# 출력결과




경고창을 닫으면 255 값이 넘어선 텍스트는 자동으로 삭제가 이루어진다.






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript][JavaScript]

Posted at 2020. 9. 9. 18:08 | Posted in JavaScript & jQuery/JavaScript



참고#01 : https://kutar37.tistory.com/232

참고#02 : https://kutar37.tistory.com/233

참고#03 : https://coderwall.com/p/pluhsg/google-spreadsheet-json-api-sql-filtering








 

        /*
        jQuery.ajax({
              url:"https://docs.google.com/spreadsheets/d/1aYCyxPrLVA5gUFpKntNyDYZ0Bj0WOFj3fr6z_m0hq44/gviz/tq?tq=SELECT+A%2cB"
            , type:"GET"
            , dataType: "html"
            , success:function( text ) {


                // alert( text.length );   // 문자열 길이
                // console.log( text.substring(47, (text.length - 2)) );

                // @see 불필요한 데이터를 잘라내고 JSON 형태로 다시 만든다.
                const sheetJson = JSON.parse(text.substring(47, (text.length - 2)));

                console.log( sheetJson.table.rows[0].c[0].v );    // 현재월
                console.log( sheetJson.table.rows[0].c[1].v );    // 현재월의 휴장일

                console.log( sheetJson.table.rows[1].c[0].v );    // 다음월
                console.log( sheetJson.table.rows[1].c[1].v );    // 다음월의 휴장일


                console.log("-----------------------------------");
            }
        });
        */


Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 자바스크립트로 HWP 파일 제어[JavaScript] 자바스크립트로 HWP 파일 제어

Posted at 2020. 9. 7. 16:31 | Posted in JavaScript & jQuery/JavaScript






GitHub : https://github.com/hahnlee/hwp.js

node.js : https://hanlee.io/hwp.js/



관련 내용이 있어서 북마크 해둔다.






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[jQuery] TextBox에서 다중 선택 기능 제작[jQuery] TextBox에서 다중 선택 기능 제작

Posted at 2020. 7. 24. 07:54 | Posted in JavaScript & jQuery/jQuery





■ 텍스트 입력박스 다중 선택 기능 만들기






jQuery UI 중에는 다중 선택을 위한 Autocomplete - Multiple values 기능이 존재한다.


여러개의 항목중 원하는 몇가지를 선택하는것에 적합한데.


샘플코드( https://jqueryui.com/autocomplete/#multiple ) 를 보면 쉽게 알 수 있을 것이다.


그렇지만 위 샘플코드에서는 선택 입력한 값의 내용이 다시 선택이 가능하다는 단점이 존재하여.


한번 선택한 항목은 선택에서 배제될 수 있게 내용을 조금 수정해 보았다.




# 소스코드

<html lang="ko">

<head>

<meta charset="utf-8">

<title>jQuery UI Autocomplete - 다중 선택</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>

<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script type="text/javascript">

    jQuery(document).ready(function() {


        jQuery( "#tags" ).on( "keydown" , function( event ) {


            // 항목을 선택할때 탭으로 이동하지 못하게 한다.

            if( event.keyCode === jQuery.ui.keyCode.TAB && jQuery(this).autocomplete("instance").menu.active ) {

                event.preventDefault();

            }


        }).autocomplete({

              minLength : 0

            , source : function( request, response ) {


                // Autocomplete 자동완성 문자 리스트 - 초기값 ( 변경되지 않는 절대값 )

                const availableTags = [

                      "파이어폭스", "크롬", "오페라", "웨일", "사파리", "익스플로러", "엣지"

                    , "비발디", "브레이브", "돌핀", "토치", "미도리", "아반트", "맥스톤"

                ];


                // Autocomplete 자동완성 문자 리스트 - 변경값 ( 검색이 이루어지는 실제 배열의 삭제 및 재생산이 이루어짐 )

                let unfoldTags = availableTags;


                // 콤마( , )로 구분되는 문자열을 배열로 만든다.

                let arrTrem = request.term.split(",");


                // 문자 리스트에서 이미 선택된 문자열은 삭제한다.

                arrTrem.forEach(function(trem) {


                    let search = unfoldTags.indexOf( trem.trim() );


                    if(search != -1) {

                        unfoldTags.splice(search, 1);

                    }

                });


                // 자동 완성을 다시 실행하지만, 마지막 용어를 추출한다.

                response(jQuery.ui.autocomplete.filter(unfoldTags, extractLast(request.term)));

                unfoldTags = null;

            }

            , focus : function() {

                return false;

            }

            , select : function(event, ui) {


                let terms = split(this.value);


                // 현재 입력값을 제거한다.

                terms.pop();


                // 선택된 아이템을 추가한다.

                terms.push(ui.item.value);


                // 끝에 콤마와 공백을 추가한다.

                terms.push("");

                this.value = terms.join(", ");


                return false;

            }

        });


        // 공백문자에 대응

        function split(val) {

            return val.split( /,\s*/ );

        }


        // 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환

        function extractLast(term) {

            return split(term).pop();

        }

    });

</script>

</head>

<body>

<div class="ui-widget">

    <label for="tags">프로그래밍 언어 : </label>

    <input id="tags" size="80" value="">

</div>

</body>

</html>






# 출력결과











Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 자바스크립트를 이용한 캘린더 제작[JavaScript] 자바스크립트를 이용한 캘린더 제작

Posted at 2020. 7. 13. 09:28 | Posted in JavaScript & jQuery/JavaScript




참고 : https://jerryjerryjerry.tistory.com/26






■ 순수 자바스크립트만을 이용한 달력 제작





jQuery등을 통한 캘린더 라이브러리가 많이 존재하지만 뭔가 꼭 있어야 하거나, 구현해야하는 효과가 있는경우


원하는 캘린더 라이브러리를 다시 찾아봐야 하거나, 라이브러리를 마개조 해야하는 상황이 발생하여


순수하게 자바스크립트만을 이용한 달력을 제작하게 되었다.








위 세가지 조건을 만족시키는 캘린더를 제작해 보려고 한다.






# 소스코드

<html>
<head>
<title>:: JavaScript 캘린더 ::</title>
<style type="text/css">
    a { color:#000000;text-decoration:none; }
    .scriptCalendar { text-align:center; }
    .scriptCalendar > thead > tr > td { width:50px;height:50px; }
    .scriptCalendar > thead > tr:first-child > td { font-weight:bold; }
    .scriptCalendar > thead > tr:last-child > td { background-color:#90EE90; }
    .scriptCalendar > tbody > tr > td { width:50px;height:50px; }
</style>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        buildCalendar();
    });

    var today = new Date(); // @param 전역 변수, 오늘 날짜 / 내 컴퓨터 로컬을 기준으로 today에 Date 객체를 넣어줌
    var date = new Date();  // @param 전역 변수, today의 Date를 세어주는 역할

    /**
     * @brief   이전달 버튼 클릭
     */
    function prevCalendar() {
        this.today = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
        buildCalendar();    // @param 전월 캘린더 출력 요청
    }

    /**
     * @brief   다음달 버튼 클릭
     */
    function nextCalendar() {
        this.today = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
        buildCalendar();    // @param 명월 캘린더 출력 요청
    }

    /**
     * @brief   캘린더 오픈
     * @details 날짜 값을 받아 캘린더 폼을 생성하고, 날짜값을 채워넣는다.
     */
    function buildCalendar() {

        let doMonth = new Date(today.getFullYear(), today.getMonth(), 1);
        let lastDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);

        let tbCalendar = document.querySelector(".scriptCalendar > tbody");


        document.getElementById("calYear").innerText = today.getFullYear();                                  // @param YYYY월
        document.getElementById("calMonth").innerText = autoLeftPad((today.getMonth() + 1), 2);   // @param MM월

        // @details 이전 캘린더의 출력결과가 남아있다면, 이전 캘린더를 삭제한다.
        while(tbCalendar.rows.length > 0) {
            tbCalendar.deleteRow(tbCalendar.rows.length - 1);
        }


        // @param 첫번째 개행
        let row = tbCalendar.insertRow();


        // @param 날짜가 표기될 열의 증가값
        let dom = 1;

        // @details 시작일의 요일값( doMonth.getDay() ) + 해당월의 전체일( lastDate.getDate())을  더해준 값에서
        //               7로 나눈값을 올림( Math.ceil() )하고 다시 시작일의 요일값( doMonth.getDay() )을 빼준다.
        let daysLength = (Math.ceil((doMonth.getDay() + lastDate.getDate()) / 7) * 7) - doMonth.getDay();

        // @param 달력 출력

        // @details 시작값은 1일을 직접 지정하고 요일값( doMonth.getDay() )를 빼서 마이너스( - )로 for문을 시작한다.
        for(let day = 1 - doMonth.getDay(); daysLength >= day; day++) {

            let column = row.insertCell();

            // @param 평일( 전월일과 익월일의 데이터 제외 )
            if(Math.sign(day) == 1 && lastDate.getDate() >= day) {


                // @param 평일 날짜 데이터 삽입

                column.innerText = autoLeftPad(day, 2);


                // @param 일요일인 경우
                if(dom % 7 == 1) {
                    column.style.color = "#FF4D4D";
                }

                // @param 토요일인 경우
                if(dom % 7 == 0) {
                    column.style.color = "#4D4DFF";
                    row = tbCalendar.insertRow();   // @param 토요일이 지나면 다시 가로 행을 한줄 추가한다.
                }

            }

            // @param 평일 전월일과 익월일의 데이터 날짜변경
            else {
                let exceptDay = new Date(doMonth.getFullYear(), doMonth.getMonth(), day);
                column.innerText = autoLeftPad(exceptDay.getDate(), 2);
                column.style.color = "#A9A9A9";
            }

            // @brief   전월, 명월 음영처리
            // @details 현재년과 선택 년도가 같은경우
            if(today.getFullYear() == date.getFullYear()) {

                // @details 현재월과 선택월이 같은경우
                if(today.getMonth() == date.getMonth()) {

                    // @details 현재일보다 이전인 경우이면서 현재월에 포함되는 일인경우
                    if(date.getDate() > day && Math.sign(day) == 1) {
                        column.style.backgroundColor = "#E5E5E5";
                    }

                    // @details 현재일보다 이후이면서 현재월에 포함되는 일인경우
                    else if(date.getDate() < day && lastDate.getDate() >= day) {
                        column.style.backgroundColor = "#FFFFFF";
                        column.style.cursor = "pointer";
                        column.onclick = function(){ calendarChoiceDay(this); }
                    }

                    // @details 현재일인 경우
                    else if(date.getDate() == day) {
                        column.style.backgroundColor = "#FFFFE6";
                        column.style.cursor = "pointer";
                        column.onclick = function(){ calendarChoiceDay(this); }
                    }

                // @details 현재월보다 이전인경우
                } else if(today.getMonth() < date.getMonth()) {
                    if(Math.sign(day) == 1 && day <= lastDate.getDate()) {
                        column.style.backgroundColor = "#E5E5E5";
                    }
                }

                // @details 현재월보다 이후인경우
                else {
                    if(Math.sign(day) == 1 && day <= lastDate.getDate()) {
                        column.style.backgroundColor = "#FFFFFF";
                        column.style.cursor = "pointer";
                        column.onclick = function(){ calendarChoiceDay(this); }
                    }
                }
            }

            // @details 선택한년도가 현재년도보다 작은경우
            else if(today.getFullYear() < date.getFullYear()) {
                if(Math.sign(day) == 1 && day <= lastDate.getDate()) {
                    column.style.backgroundColor = "#E5E5E5";
                }
            }

            // @details 선택한년도가 현재년도보다 큰경우
            else {
                if(Math.sign(day) == 1 && day <= lastDate.getDate()) {
                    column.style.backgroundColor = "#FFFFFF";
                    column.style.cursor = "pointer";
                    column.onclick = function(){ calendarChoiceDay(this); }
                }
            }


            dom++;

        }
    }

    /**
     * @brief   날짜 선택
     * @details 사용자가 선택한 날짜에 체크표시를 남긴다.
     */
    function calendarChoiceDay(column) {

        // @param 기존 선택일이 존재하는 경우 기존 선택일의 표시형식을 초기화 한다.
        if(document.getElementsByClassName("choiceDay")[0]) {
            document.getElementsByClassName("choiceDay")[0].style.backgroundColor = "#FFFFFF";
            document.getElementsByClassName("choiceDay")[0].classList.remove("choiceDay");
        }

        // @param 선택일 체크 표시
        column.style.backgroundColor = "#FF9999";


        // @param 선택일 클래스명 변경

        column.classList.add("choiceDay");
    }

    /**
     * @brief   숫자 두자릿수( 00 ) 변경
     * @details 자릿수가 한지라인 ( 1, 2, 3등 )의 값을 10, 11, 12등과 같은 두자리수 형식으로 맞추기위해 0을 붙인다.
     * @param   num     앞에 0을 붙일 숫자 값
     * @param   digit   글자의 자릿수를 지정 ( 2자릿수인 경우 00, 3자릿수인 경우 000 … )
     */
    function autoLeftPad(num, digit) {
        if(String(num).length < digit) {
            num = new Array(digit - String(num).length + 1).join("0") + num;
        }
        return num;

    }

</script>
</head>
<body>
<table class="scriptCalendar">
    <thead>
        <tr>
            <td onClick="prevCalendar();" style="cursor:pointer;">&#60;&#60;</td>
            <td colspan="5">
                <span id="calYear">YYYY</span>년
                <span id="calMonth">MM</span>월
            </td>
            <td onClick="nextCalendar();" style="cursor:pointer;">&#62;&#62;</td>
        </tr>
        <tr>
            <td>일</td><td>월</td><td>화</td><td>수</td><td>목</td><td>금</td><td>토</td>
        </tr>
    </thead>
    <tbody></tbody>
</table>
</body>
</html>





위 코드를 실행해 보면 결과가 아래와 같음을 확인 해 볼 수 있다.





# 출력결과
<< YYYY MM

>>


   좌측 캘린더를 클릭, 조작해보면.


   금일 날짜인 YYYYMMDD일 보다


   전일인 경우는 선택을 할 수 없게 처리 되어 있다.


   선택이 가능한 날은  단 하루 로 제한되어 있는 형태로


   위에서 표기한 필 수 구성 요소를 추가해둔 구성이다.







캘린더 라이브러리가 많이 지원되는 상황이지만.


역시 막상 내가 필요로 하는것을 구현하는것은 또 답답한 감이 있기에.


좀 공들여 포스팅을 정리하게 되었다.










  1. 럴커를 좋아하는 덱스~~~
    저 타입스크립트 시작 하는데
    자주 들려서 자바스크립트 도움 받을게요~~ㅎ
    아하하하하하~~
  2. 유선재
    자바스크립트 배우는과정중 한 화면에 달력2개만들기 과제하는데
    1개는 그대로 가져와서 써보고 2개째에 직접 뜯어서 해볼려니 하나도 모르겠네요 ㅠㅠ
    어떤 부분을 고쳐야 달력 2개생성이 가능할까요?

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] SelectBox를 사용하는 날짜 검색창 제작[JavaScript] SelectBox를 사용하는 날짜 검색창 제작

Posted at 2020. 7. 12. 20:31 | Posted in JavaScript & jQuery/JavaScript







■ 셀렉트 박스를 이용한 캘린더 제작







위와 같이 <SELECT> 태그를 통해 날짜값을 지정하여 검색하는 페이지를 제작하게 되었다.


jQuery UI의 DatePicker등을 사용하면 그냥 손쉽게 해결 할 수 있고,


보통은 다 이렇게 하지만, 또 막상 일을 하다보면 위와 같은 검색을 선호하는 클라이언트가 또 있을 수 있다라는 생각이들어


추가적으로 실제 업무에서 많이 쓰이게 되는 GET 방식을 통한 검색조건 전달의 경우를 포함하여


내용을 정리해보았다.





※ 예외 처리해야할 사항들


 ① 매월의 마지막 날의 날짜는 항상 일치하지 않기에, 그달의 마지막 날보다 큰 날짜는 자동적으로 선택할 수 없어야 한다.

 ② 처음 접속시 해당월의 첫째날( 01일 )과 마지막날( 28일, 29,일 30일, 31일 등 )이 자동 세팅되어야 한다.

 ③ GET방식을 통해 검색 시작일과 종료일의 날짜 데이터가 전달되는 경우의 수를 처리해야 한다.

 ④ 사용자가 날짜를 선택하는 과정에서 31일이 선택되어 있는 가운데 31일이 존재하지 않는 년, 월을 선택한 경우

     해당 월의 마지막 날로 자동 변경시켜주어야 한다.




위 경우를 상정하여 아래 코드를 작성하게 되었다.




# 소스코드

<html>

<head>

<title>:: JavaScript 매월 주차 구하기 ::</title>

<script type="text/javascript">


    document.addEventListener("DOMContentLoaded", function() {


        const stdDays = document.querySelector("span:nth-child(1)");     // @param 시작일 영역지정

        const endDays = document.querySelector("span:nth-child(2)");    // @param 종료일 영역지정


        let stdFirstDate = null;    // @param 시작일의 첫날

        let endFirstDate = null;   // @param 종료일의 첫날

        let stdLastDate = null;    // @param 시작일의 전체일수

        let endLastDate = null;   // @param 종료일의 전체일수



        // @param GET방식으로 전달된 시작일, 종료일의 지정값이 존재하지 않는경우 ( ※ 맨처음 시작시에 실행 )

        if(nullPointerException(getParameter("stdDate")) == false && nullPointerException(getParameter("endDate")) == false) {


            const toDate = new Date();


            stdFirstDate = new Date(toDate.getFullYear(), (toDate.getMonth() + 1));

            stdLastDate = new Date(stdFirstDate.getFullYear(), (stdFirstDate.getMonth() + 1), 1);  // @param 다음달의 첫째날을 지정

            stdLastDate.setDate(0);    // @param 다음달에서 하루를 빼서 원하는 월의 마지막 날로 맞춤


            endFirstDate = new Date(toDate.getFullYear(), (toDate.getMonth() + 1));

            endLastDate = new Date(endFirstDate.getFullYear(), (endFirstDate.getMonth() + 1), 1);  // @param 다음달의 첫째날을 지정

            endLastDate.setDate(0);    // @param 다음달에서 하루를 빼서 원하는 월의 마지막 날로 맞춤


        }


        // @param GET방식으로 전달된 시작일, 종료일의 지정값이 존재하는 경우

        else {


            const stdDate = getParameter("stdDate");

            stdFirstDate = new Date(

                  Number(stdDate.substring(0, 4))

                , Number(stdDate.substring(6, 8))

                , Number(stdDate.substring(4, 6))

            );

            stdLastDate = new Date(stdFirstDate.getFullYear(), stdFirstDate.getMonth(), 1);  // @param 다음달의 첫째날을 지정

            stdLastDate.setDate(0);    // @param 다음달에서 하루를 빼서 원하는 월의 마지막 날로 맞춤


            const endDate = getParameter("endDate");

            endFirstDate = new Date(

                  Number(endDate.substring(0, 4))

                , Number(endDate.substring(4, 6))

                , Number(endDate.substring(6, 8))

            );

            endLastDate = new Date(endFirstDate.getFullYear(), endFirstDate.getMonth(), 1);  // @param 다음달의 첫째날을 지정

            endLastDate.setDate(0);    // @param 다음달에서 하루를 빼서 원하는 월의 마지막 날로 맞춤


        }


        // @param 년도( Year ) - 선택

        for(let year = 0; stdDays.querySelector("select:nth-child(1)").length > year; year++) {

            if(stdDays.querySelector("select:nth-child(1)").options[year].value == stdFirstDate.getFullYear()) {

                stdDays.querySelector("select:nth-child(1)").options[year].selected = true;

            }


            if(endDays.querySelector("select:nth-child(1)").options[year].value == stdFirstDate.getFullYear()) {

                endDays.querySelector("select:nth-child(1)").options[year].selected = true;

            }

        }


        // @param 월( Month ) - 선택

        for(let month = 0; stdDays.querySelector("select:nth-child(2)").length > month; month++) {

            if(stdDays.querySelector("select:nth-child(2)").options[month].value == stdFirstDate.getMonth()) {

                stdDays.querySelector("select:nth-child(2)").options[month].selected = true;

            }


            if(endDays.querySelector("select:nth-child(2)").options[month].value == endFirstDate.getMonth()) {

                endDays.querySelector("select:nth-child(2)").options[month].selected = true;

            }

        }


        // @param 일( Day ) - 생성 및 선택

        // @details - 날짜는 매월 마지막일이 다르게 끝나기 때문에 직접 생성하고,

        //                선택한 날( 기본값 시작일 - 01일, 종료일은 - 말일 )을 자동으로 selected 한다.

        for(let date = 1; stdLastDate.getDate() >= date; date++) {

            if(stdFirstDate.getDate() == date) {

                stdDays.querySelector("select:nth-child(3)").innerHTML

                    += "<option value='" + date + "' selected>" + autoLeftPad(date, 2) + "</option>";

            } else {

                stdDays.querySelector("select:nth-child(3)").innerHTML

                    += "<option value='" + date + "'>" + autoLeftPad(date, 2) + "</option>";

            }

        }


        for(let date = 1; endLastDate.getDate() >= date; date++) {

            if((nullPointerException(getParameter("endDate")) == true) ? endFirstDate.getDate() : endLastDate.getDate() == date) {

                endDays.querySelector("select:nth-child(3)").innerHTML

                    += "<option value='" + date + "' selected>" + autoLeftPad(date, 2) + "</option>";

            } else {

                endDays.querySelector("select:nth-child(3)").innerHTML

                    += "<option value='" + date + "'>" + autoLeftPad(date, 2) + "</option>";

            }

        }

    });



    /**

     * @brief   시작일( 년, 월 ), 종료일 ( 년, 월 )의 값이 변경된 경우 실행

     * @details 시작일( 년, 월 ), 종료일 ( 년, 월 )의 값이 변경에 따른 해당 년월의 전체일수를 다시 체크,

     *             변경된 년월의 일보다 선택된 일이 큰경우 마지막 날로 선택일 자동 변경

     */

    function changeConditionPeriod(cal) {


        const searchDays = cal.parentNode;

        const checkDate = searchDays.querySelector("select:nth-child(3)").value;


        // @param 다음달의 첫째날을 지정

        let lastDate = new Date(

              searchDays.querySelector("select:nth-child(1)").value

            , searchDays.querySelector("select:nth-child(2)").value

            , 1

        );

        lastDate.setDate(0);    // @param 하루를 뺌


        // @param 일정보 초기화

        searchDays.querySelector("select:nth-child(3)").innerHTML = "";


        // @param 일정보 재삽입

        for(let date = 1; lastDate.getDate() >= date; date++) {

            if(checkDate == date) {

                searchDays.querySelector("select:nth-child(3)").innerHTML

                    += "<option value='" + date + "' selected>" + autoLeftPad(date, 2) + "</option>";

            } else {

                searchDays.querySelector("select:nth-child(3)").innerHTML

                    += "<option value='" + date + "'>" + autoLeftPad(date, 2) + "</option>";

            }

        }


        // @param 일정보 예외처리 선택되어있는 마지막 날이 바꾼 월의 날보다 큰경우의 예외처리

        if(checkDate > lastDate.getDate()) {

            searchDays.querySelector("select:nth-child(3) > option:last-child").selected = true;

        }

    }


    /**

     * @brief   강제로 앞에 0을 붙여서 두자릿수 숫자로 변경한다.

     * @param   num     앞에 0을 붙일 숫자 값

     * @param   digit   자릿수를 지정

     */

    function autoLeftPad(num, digit) {

        if(String(num).length < digit) { num = new Array(digit - String(num).length + 1).join("0") + num; }

        return num;

    }


    /**

     * @brief   GET으로 넘어오는 값의 존재 여부를 체크

     */

    function nullPointerException(worth) {

        if(

               worth == "" 

            || worth == null 

            || worth == undefined 

            || (worth != null && typeof worth == "object" && !Object.keys(worth).length == "")

        ) {

            return false;

        } else {

            return true;

        }

    }


    /**

     * @brief   GET방식으로 전달된 값을 추출

     * @param   param     추출할 key의 명칭

     */

    var getParameter = function(param) {

        let returnValue;

        let url = location.href;

        let parameters = (url.slice(url.indexOf("?") + 1, url.length)).split("&");

        for(let i = 0; i < parameters.length; i++) {

            let varName = parameters[i].split("=")[0];

            if (varName.toUpperCase() == param.toUpperCase()) {

                returnValue = parameters[i].split("=")[1];

                return decodeURIComponent(returnValue);

            }

        }

    };

</script>

</head>

<body>

    <h1>■ SelectBox를 이용한 캘린더</h1>

    <hr/>

    <!-- 년( Year )은 자동으로 생성시 너무 많이 늘어날 수 있어서 -->

    <!-- 월( Month )은 01 ~ 12라는 고정값을 알고 있기에 직접 값을 지정 -->

    <!-- 일( Day )은 마지막 일이 항상 변하기 때문에 자동 생성 한다. -->

    <div>

        <span>

            시작일&nbsp;:&nbsp;

            <select onChange="changeConditionPeriod(this);">

                <option value="2018">2018</option>

                <option value="2019">2019</option>

                <option value="2020">2020</option>

                <option value="2021">2021</option>

                <option value="2022">2022</option>

                <option value="2023">2023</option>

                <option value="2024">2024</option>

                <option value="2025">2025</option>

            </select>

            &nbsp;년&nbsp;&nbsp;

            <select onChange="changeConditionPeriod(this);">

                <option value="1">01</option>

                <option value="2">02</option>

                <option value="3">03</option>

                <option value="4">04</option>

                <option value="5">05</option>

                <option value="6">06</option>

                <option value="7">07</option>

                <option value="8">08</option>

                <option value="9">09</option>

                <option value="10">10</option>

                <option value="11">11</option>

                <option value="12">12</option>

            </select>

            &nbsp;월&nbsp;&nbsp;

            <select class="choiceDay"></select>

            &nbsp;일

        </span>

        &nbsp;&nbsp;~&nbsp;&nbsp;

        <span>

            종료일&nbsp;:&nbsp;

            <select onChange="changeConditionPeriod(this);">

                <option value="2018">2018</option>

                <option value="2019">2019</option>

                <option value="2020">2020</option>

                <option value="2021">2021</option>

                <option value="2022">2022</option>

                <option value="2023">2023</option>

                <option value="2024">2024</option>

                <option value="2025">2025</option>

            </select>

            &nbsp;년&nbsp;&nbsp;

            <select onChange="changeConditionPeriod(this);">

                <option value="1">01</option>

                <option value="2">02</option>

                <option value="3">03</option>

                <option value="4">04</option>

                <option value="5">05</option>

                <option value="6">06</option>

                <option value="7">07</option>

                <option value="8">08</option>

                <option value="9">09</option>

                <option value="10">10</option>

                <option value="11">11</option>

                <option value="12">12</option>

            </select>

            &nbsp;월&nbsp;&nbsp;

            <select class="choiceDay"></select>

            &nbsp;일

        </span>

    </div>

</body>

</html> 



이제 위 코드를 브라우저를 통해 실행시켜 보면




# 출력결과




위와 같이 예외처리해야할 사항들이 정상적으로 반영되어 기능하는 모습을 확인 할 수 있다.








Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 매월의 월요일 기준, 주차 구하기[JavaScript] 매월의 월요일 기준, 주차 구하기

Posted at 2020. 6. 29. 18:14 | Posted in JavaScript & jQuery/JavaScript




참고 : https://blog.naver.com/z1004man/220936098651

참고 : https://matthew-jo.tistory.com/8





매월 월요일을 기준으로하는 주차 및 해당주차의 날짜 구하기


( 부제 : 일요일을 마지막으로 하는 주차 구하기 )




선택한 매월의 월요일을 기준으로하는 해당월의 주차수와 각 주차별 월요일, 일요일 날짜를 구하는 함수




통계 프로그램을 만들면서 JSP, PHP, Oracle, MySQL등 여러가지 개발 언어를 사용하여


매월의 주차를 구하는 프로그램을 구현해야 하는 일이 종종 발생 하였다.


그런데 저렇게 다양한 환경에서 매번 그 언어에 맞게 다시 조립 및 분해하는 과정이 생기는게 싫어서.


이번에 아예 한번 자바스크립트로 클라이언트 영역에서 넘겨줄 값을 미리 다 생성해서 넘겨주면


좀더 환경에 자유로울 수 있을 것 같아 순수 자바스크립트로 매월의 ( 월요일을 시작을 기준 )으로 함수를 만들어 정리해 보았다.





# 소스코드

<html>

<head>

<title>:: JavaScript 매월 주차 구하기 ::</title>

<script type="text/javascript">


    // 기준요일에 따른 주차구하는 함수.

    // 해당 주차 / 해당주차 시작날짜 / 해당주차 끝나는날짜를 리턴.

    function searchPeriodCalculation() {


        let cYear = document.getElementById("choiceYear").value;

        let cMonth = document.getElementById("choiceMonth").value.replace(/(^0+)/, "") - 1;


        // 날짜형으로 데이트 포맷

        let date = new Date(cYear, cMonth);


        // 월요일을 중심으로한 주차 구하기( JS기준 : 일요일 0 월요일 1 ~ 토요일 6 )

        let firstDay = new Date(date.getFullYear(), date.getMonth(), 1);

        let lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);


        let weekObj = null;

        let weekObjArray = new Array();

        let weekStand = 8;  // 월요일 고정

        let firstWeekEndDate = true;

        let thisMonthFirstWeek = firstDay.getDay();


        for(var num = 1; num <= 6; num++) {


            // 마지막월과 첫번째월이 다른경우 빠져나온다.

            if(lastDay.getMonth() != firstDay.getMonth()) {

                break;

            }


            weekObj = new Object();


            // 한주의 시작일은 월의 첫번째 월요일로 설정

            if(firstDay.getDay() <= 1) {


                // 한주의 시작일이 일요일이라면 날짜값을 하루 더해준다.

                if(firstDay.getDay() == 0) { firstDay.setDate(firstDay.getDate() + 1); }


                weekObj.weekStartDate =

                      firstDay.getFullYear().toString()

                    + "-"

                    + numberPad((firstDay.getMonth() + 1).toString(), 2)

                    + "-"

                    + numberPad(firstDay.getDate().toString() , 2);

            }


            if(weekStand > thisMonthFirstWeek) {

                if(firstWeekEndDate) {

                    if((weekStand - firstDay.getDay()) == 1) {

                        firstDay.setDate(firstDay.getDate() + (weekStand - firstDay.getDay()) - 1);

                    }

                    if((weekStand - firstDay.getDay()) > 1) {

                        firstDay.setDate(firstDay.getDate() + (weekStand - firstDay.getDay()) - 1)

                    }

                    firstWeekEndDate = false;

                } else {

                    firstDay.setDate(firstDay.getDate() + 6);

                }

            } else {

                firstDay.setDate(firstDay.getDate() + (6 - firstDay.getDay()) + weekStand);

            }


            // 월요일로 지정한 데이터가 존재하는 경우에만 마지막 일의 데이터를 담는다.

            if(typeof weekObj.weekStartDate !== "undefined") {


                weekObj.weekEndDate =

                      firstDay.getFullYear().toString()

                    + "-"

                    + numberPad((firstDay.getMonth() + 1).toString(), 2)

                    + "-"

                    + numberPad(firstDay.getDate().toString(), 2);

                    

                weekObjArray.push(weekObj);

            }


            firstDay.setDate(firstDay.getDate() + 1);

        }


        console.log( weekObjArray );

    }


    // 월, 일 날짜값 두자리( 00 )로 변경

    function numberPad(num, width) {

        num = String(num);

        return num.length >= width ? num : new Array(width - num.length + 1).join("0") + num;

    }

</script>

</head>

<body>

    <div>

        <input type="text" id="choiceYear" style="text-align:center;" value="2020"/>

        &nbsp;년&nbsp;&nbsp;

        <select id="choiceMonth">

            <option value="01">01</option>

            <option value="02">02</option>

            <option value="03">03</option>

            <option value="04">04</option>

            <option value="05">05</option>

            <option value="06">06</option>

            <option value="07">07</option>

            <option value="08">08</option>

            <option value="09">09</option>

            <option value="10">10</option>

            <option value="11">11</option>

            <option value="12">12</option>

        </select>

        &nbsp;월&nbsp;&nbsp;

        <button type="button" onClick="searchPeriodCalculation( );">검색</button>

    </div>

</body>

</html>




위 코드의 결과는 아래와 같다.



# 출력 결과















Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] Table을 Excel 처럼 즉시 수정가능하게 만들기[JavaScript] Table을 Excel 처럼 즉시 수정가능하게 만들기

Posted at 2020. 6. 24. 09:46 | Posted in JavaScript & jQuery/JavaScript




주의 : 해당 포스팅의 샘플 코드에서 사용하는 addEventListener( ) 메서드의 경우 Internet Explorer에서는 정상적으로 작동하지 않습니다.

           호환되지 않는 Internet Explorer에서의 사용의 경우는 addEventListener( ) 메서드를 attachEven( )로 변경하여 작업을 진행하셔야 합니다.






contenteditable 속성을 이용한 텍스트 내용 수정




기본적으로 웹 환경에서 값을 변경하기 위해서는 <input type="text" value="값">이 기본 형태였지만.


HTML5가 나오면서 contenteditable을 이용해 좀더 재미있는 사용자 경험을 제공할 수 있게 되었다.


해당 포스팅에서는 웹 페이지에 출력된 텍스트 문구를 contenteditable 속성을 이용하여 수정해 보려 한다.




# 소스코드

<html>
<head>
<title>:: JavaScript Contenteditable ::</title>
</head>
<body>
<p contenteditable="false">
    이 단락은 편집을 원하는 경우 더블 클릭해 주세요
</p>
</body>
</html>
<script type="text/javascript">

    // @breif contenteditable 속성을 가진경우
    content = document.querySelector( "[contenteditable]" );
   
    document.addEventListener("DOMContentLoaded", function() {

        // @breif 더블클릭시 실행
        content.addEventListener("dblclick", function(event) {

            // @details contenteditable 속성이 수정 불가인 경우 실행( false )
            if(content.isContentEditable == false) {

                // @details 편집 가능 상태로 변경
                content.contentEditable = true;

                // @details 텍스트 문구 변경
                content.textContent = "편집 가능한 상태로 변경되었습니다.";

                // @details CSS 효과 추가
                content.style.border = "1px solid #FE7F9C";

                // @details 포커스 지정
                content.focus();
            }

            // @details contenteditable 속성이 수정 가능인 경우 실행( true )
            else {

                // 편집 불가 상태로 변경
                content.contentEditable = false;
                content.style.border = "0px";
            }
        });
    });
</script>




# 출력결과












■ 테이블을 엑셀처럼 즉시 변경가능하게 만들기





이제 contenteditable 태그를 좀더 심도있게 활용을 해보자.


바로 테이블에 출력되어 있는 내용을 엑셀처럼 즉시 수정을 하고 해당내용을 적용하는 것이다.


즉각적으로 수정된 내용을 데이타 베이스( DataBase )에 적용하는 예제는 아니지만.


해당 내용의 결과물을 본다면 어떻게 사용하는것이 좋을지 바로 감이 올 거라 생각한다.



# 소스코드

<html>

<head>

<title>:: JavaScript Contenteditable ::</title>

<style type="text/css">

    table { border-collapse:collapse;border:1px gray solid; }

    .rowColumn { border-radius:5px;margin:5px; }

</style>

</head>

<body>

<table border="1">

    <thead>

        <tr>

            <th style="width:50px;">번호</th>

            <th style="width:120px;">가수</th>

            <th style="width:350px;">노래</th>

            <th style="width:100px;">발매일</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td style="text-align:center;">1</td>

            <td>

                <p class="rowColumn" contenteditable="false" data-default="윤하">윤하</p>

            </td>

            <td>

                <p class="rowColumn" contenteditable="false" data-default="오렌지 첫사랑">오렌지 첫사랑</p>

            </td>

            <td>

                <p class="rowColumn" contenteditable="false" data-default="2007-10-23">2007-10-23</p>

            </td>

        </tr>

        <tr>

            <td style="text-align:center;">2</td>

            <td>

                <p class="rowColumn" contenteditable="false" data-default="도원경">도원경</p>

            </td>

            <td>

                <p class="rowColumn" contenteditable="false" data-default="다시 사랑한다면">다시 사랑한다면</p>

            </td>

            <td>

                <p class="rowColumn" contenteditable="false" data-default="2001-05-01">2001-05-01</p>

            </td>

        </tr>

        <tr>

            <td style="text-align:center;">3</td>

            <td>

                <p class="rowColumn" contenteditable="false" data-default="더더">더더</p>

            </td>

            <td>

                <p class="rowColumn" contenteditable="false" data-default="it's You">it's You</p>

            </td>

            <td>

                <p class="rowColumn" contenteditable="false" data-default="1998-11-01">1998-11-01</p>

            </td>

        </tr>

        <tr>

            <td style="text-align:center;">4</td>

            <td>

                <p class="rowColumn" contenteditable="false" data-default="박기영">박기영</p>

            </td>

            <td>

                <p class="rowColumn" contenteditable="false" data-default="시작">시작</p>

            </td>

            <td>

                <p class="rowColumn" contenteditable="false" data-default="1999-04-07">1999-04-07</p>

            </td>

        </tr>

        <tr>

            <td style="text-align:center;">5</td>

            <td>

                <p class="rowColumn" contenteditable="false" data-default="이소은">이소은</p>

            </td>

            <td>

                <p class="rowColumn" contenteditable="false" data-default="오래오래">오래오래</p>

            </td>

            <td>

                <p class="rowColumn" contenteditable="false" data-default="2002-12-21">2002-12-21</p>

            </td>

        </tr>

    </tboyd>

</talbe>

</body>

</html>

<script type="text/javascript">


    // @breif contenteditable 속성을 가진경우

    contents = document.getElementsByClassName("rowColumn");


    document.addEventListener("DOMContentLoaded", function() {


        // @breif rowColumn 클래스의 갯수 만큼 반복문을 실행한다.

        Array.from(contents).forEach(function(content) {


            // @breif 마우스로 해당영역을 더블클릭 한경우

            content.addEventListener("dblclick", function(event) {


                // @breif 전체 테이블 컬럼( td > p )에서 현재 사용중인 값의 존재여부를 확인한다.

                Array.from(contents).forEach(function(defaultVal) {


                    /*
                    // @details 빈값( null )이 존재하는지 체크한다.
                    if(
                           defaultVal.textContent == ""
                        || defaultVal.textContent == null
                        || defaultVal.textContent == undefined
                        || (defaultVal.textContent != null
                        && typeof defaultVal.textContent == "object"
                        && !Object.keys(defaultVal.textContent).length == ""))
                    {

                        // @details 내용이 존재하지 않다면 data 태그의 기본값으로 되돌린다.
                        defaultVal.textContent = defaultVal.dataset.default;
                    }
                    */

                    // @details 저장하지 않은 내용이라고 판단하여 data 태그의 기본값으로 되돌린다.
                    defaultVal.textContent = defaultVal.dataset.default;

                    // @breif 수정 불가 상태로 되돌린다.

                    defaultVal.contentEditable = false;

                    defaultVal.style.border = "0px";

                });


                if(content.isContentEditable == false) {


                    // @details 편집 가능 상태로 변경

                    content.contentEditable = true;


                    // @details 텍스트 문구 변경

                    // content.textContent = "";


                    // @details CSS 효과 추가

                    content.style.border = "1px solid #FFB6C1";


                    // @details 포커스 지정

                    content.focus();

                }

            });


            // @breif 키보드 입력이 방생한 경우 실행

            content.addEventListener("keypress", function(event) {


                // @breif Enter키 입력시 실행

                if(event.key === "Enter") {


                    // @details 입력된 값이 빈값( null )인지 체크한다.

                    if(

                           content.textContent == ""

                        || content.textContent == null

                        || content.textContent == undefined

                        || (content.textContent != null

                        && typeof content.textContent == "object"

                        && !Object.keys(content.textContent).length == ""))

                    {


                        // @details 내용이 존재하지 않다면 data 태그의 기본값으로 되돌린다.

                        content.textContent = content.dataset.default;

                    } else {


                        // @details 내용의 수정이 완료되었다면 data 태그의 기본값도 바꿔준다.

                        content.dataset.default = content.textContent;

                    }


                    // @breif 수정 불가 상태로 되돌린다.

                    content.contentEditable = false;

                    content.style.border = "0px";

                }

            });

        });

    });

</script>




위 코드의 결과는 아래와 같이 직접 확인을 진행해 보자.




# 출력결과

번호

가수

노래

발매일

1

윤하

오렌지 첫사랑

2007-10-23

2

도원경

다시 사랑한다면

2001-05-01

3

더더

it's You

1998-11-01

4

박기영

시작

1999-04-07

5

이소은

오래오래

2002-12-21

주의해당 출력결과Internet Explorer에서는 정상적으로 작동하지 않습니다.



위에 가수, 노래, 발매일 항목을 마우스로 더블클릭( dblclick )하면 내용을 수정하고, 키보드 Enter 키를 눌러 변경한 내용을 반영할 수 있다.

( 단 공란( null )은 사용할 수 없게 처리되어 있다. )



또한 하나의 컬럼을 수정하던중 다른 컬럼을 더블클릭( dblclick )한 경우 수정중이던 컬럼영역은


data-default에 저장되어있는 기존값으로 다시 돌아가게 설계되어 있다.


이와같은 예외처리는 용도에 맞게 코드를 조금 손보면 바로 적용할 수 있을 것이다.





자체과제 : 심화코드 만들어보기






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 정규 표현식 사용방법[JavaScript] 정규 표현식 사용방법

Posted at 2020. 5. 7. 02:25 | Posted in JavaScript & jQuery/JavaScript




출처 : 모던 웹을 위한 JavaScript + jQuery 입문

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/정규식



정규 표현식은 자바스크립트의 내장 객체이다.


정규 표현식은 문자열의 패턴을 검사할때 사용된다.


원래는 펄( Perl ) 프로그래밍 언어에서 사용한 객체인데, 너무 유용해서 현재는 많은 프로그래밍 언어에서 사용되고 있다.




■ 정규 표현식의 객체




#01. 정규 표현식 객체의 생성


# 소스코드

<html>

<head>

<title>:: JavaScript 정규표현식 ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // @details 정규표현식의 사용법 ①

        const regExp1 = new RegExp( "text" );

        console.log( regExp1 );


        // @details 정규표현식의 사용법 ② - 일반적으로 간단한 ②번 방법이 많이 사용됨

        const regExp2 = /text/;

        console.log( regExp2 );

    });

</script>

</head>

</html>



# 출력결과





#02. 정규 표현식의 메서드



정규 표현식은 문자열 처럼 만들어 사용가능하다.


메서드 이름

설   명

 test( )

 · 정규 표현식과 일치하는 문자열이 있으면 true를 dkslaus, false를 리턴한다.

 exec( )

 · 정규 표현식과 일치한느 문자열을 리턴한다.




# 소스코드

<html>

<head>

<title>:: JavaScript 정규표현식 ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // @breif 변수를 선언한다.

        const regExp = new RegExp( /Fox/ );

        const string = "FireFox Chrome Opera Edge Safari";


        // @breif 메서드를 사용한다.

        let output = regExp.test( string );


        // @breif 출력한다.

        alert( output );

    });

</script>

</head>

</html> 




# 출력결과



변수 string 내부에 정규 표현식과 일치하는 문자열 "Fox"가 있으므로 true를 출력한다.


정규 표현식은 이렇게 정규 표현식의 메서드를 곧바로 사용하는 것보다는 문자열 객체의 메서드와 함께 사용하는것이 일반적이다.





#03. 정규 표현식을 사용하는 String 객체의 메서드


메서드 이름

설   명

 match( 정규_표현식 )

 · 정규 표현식과 일치하는 부분을 리턴한다.

 replace( 정규_표현식, 문자열 )

 · 정규 표현식과 일치하는 부분을 새로운 문자열로 바꾼다.

 search( 정규_표현식 )

 · 정규 표현식과 일치하는 부분의 위치를 리턴한다.

 split( 정규_표현식 )

 · 정규 표현식을 기준으로 문자열을 잘라 배열을 리턴한다.



아래는 split( ) 메서드를 사용한 예제이다.


split( ) 메서드의 매개 변수에 정규 표현식을 넣기만 하면된다.



# 소스코드

<html>

<head>

<title>:: JavaScript 정규표현식 ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // @breif 변수를 선언한다.

        const regExp = new RegExp( /Explorer/ );

        const string = "FireFox Chrome Explorer Opera Edge Safari";


        // @breif 메서드를 사용한다.

        let output = string.split( regExp );


        // @breif 출력한다.

        alert( output );

    });

</script>

</head>

</html>




split( ) 메서드는 정규 표현식을 기준으로 문자열을 잘라 배열로 만들어 리턴한다.




# 출력결과









■ 정규 표현식 - 대체 문자




정규 표현식을 사용하면 문자열의 객체의 replace( ) 메서드를 사용하여 대체문자를 삽입할 수 있다.




#01. 기호를 이용하여 문자 대체하기



정규 표현식 기호

설   명

 $&

 · 일치하는 문자열

 $`

 · 일치하는 부분의 앞부분 문자열 ( 참고 : ( ` ) 는 숫자 1키 좌측의 기호이다. )

 $'

 · 일치하는 부분의 뒷부분 문자열

 $1, $2, $3 ~

 · 그룹, $1 부터 시작하여 계속 +1씩 숫자가 증가되는 식으로 사용한다.



아래 코드는 문자열 객체의 replace( ) 메서드를 사용해서 정규 표현식에 일치하는 문자열을 "+$&+"로 변경한다.



# 소스코드

<html>

<head>

<title>:: JavaScript 정규표현식 ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // @breif 변수를 선언한다.

        const regExp = new RegExp( /a/ );

        const string = "FireFox Chrome Explorer Opera Edge Safari";


        // @breif 메서드를 사용한다.

        let output = string.replace( regExp, "+$&+" );


        // @breif 출력한다.

        alert( output );

    });

</script>

</head>

</html>



# 출력결과





대체 문자는 이렇게 정규 표현식의 특정 내용과 매치되어 문자를 대체해 출력해주는 문자이다.


이 방식을 좀 더 쉽게 이해하기 위해서 아래와 같은 코드를 작성해 보자.


문자열 객체의 replace( ) 메서드의 매개 변수에 함수를 추가할 수 있다.


매개 변수로 넣은 함수의 매개 변수에는 정규 표현식에 대응하는 문자열이 입력되며 리턴하는 문자열로 대체된다.



# 소스코드

<html>

<head>

<title>:: JavaScript 정규표현식 ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // @breif 변수를 선언한다.

        const regExp = new RegExp( /a/ );

        const string = "FireFox Chrome Explorer Opera Edge Safari";


        // @breif 메서드를 사용한다.

        let output = string.replace( regExp, function( value ) {

            return "+" + value + "+";

        });


        // @breif 출력한다.

        alert( output );

    });

</script>

</head>

</html>




# 출력결과




따라서 예제코드를 실행해 보면 동일한 결과 출력되는 것을 확인 할 수 있다.



# 소스코드

<html>

<head>

<title>:: JavaScript 정규표현식 ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // @breif 변수를 선언한다.

        const regExp = new RegExp( /(r)(o)(m)(e)/ );

        const string = "FireFox Chrome Explorer Opera Edge Safari";


        // @breif 메서드를 사용한다.

        const output = string.replace( regExp, "+$1=$2=$3+" );


        // @breif 출력한다.

        alert( output );

    });

</script>

</head>

<body>

</body>

</html> 




각각의 문자가 대체되므로 $1, $2, $3을 직접 출력하는 것이 아니라


아래와 같이 r, o, m을 출력한다.




# 출력결과









■ 정규 표현식 - 플래그 문자




플래그 문자는 다음과 같은 방법으로 사용된다.


정규 표현식 기호

설   명

 g

 · 전역 비교를 수행한다.

 i

 · 대소문자를 가리지 않고 비교한다.

 m

 · 여러 줄의 검사를 수행한다.



플래그 문자를 생성할 때에는 뒤에 붙여 사용하며, 생성자를 사용할 때에는 두 번째 매개 변수에 입력한다.


플래그 문자 위치에 들어가는 플래그 문자의 순서는 어떻게 되어도 상관 없다.




# 소스코드

<html>

<head>

<title>:: JavaScript 정규표현식 ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // @breif 변수를 선언한다.

        const regExp = new RegExp( /e/ig );  // @details i와 g의 순서는 변경돼도 상관없다.

        const string = "FireFox Chrome Explorer Opera Edge Safari";


        // @breif 메서드를 사용한다.

        const output = string.replace( regExp, "+$&+" );


        // @breif 출력한다.

        alert( output );

    });

</script>

</head>

<body>

</body>

</html> 



# 출력결과










■ 정규 표현식 - 앵커 문자




앵커 문자는 문자열의 앞과 뒤를 구분해주는 정규 표현식 기호이다.


정규 표현식 기호

설   명

 ^ABC

 · 맨 앞 문자가 ABC

 ABC$

 · 맨 뒤 문자가 ABC



앵커 문자를 사용하면 원하는 부분을 찾을 수 있다.




#01. 앵커 문자



# 소스코드

<html>

<head>

<title>:: JavaScript 정규표현식 ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // @breif 변수를 선언한다.

        const regExp = new RegExp( /^f/ig );

        const string = "FireFox\nChrome\nExplorer\nOpera\nEdge\nSafari";


        // @breif 메서드를 사용한다.

        const output = string.replace( regExp, "+$&+" );


        // @breif 출력한다.

        alert( output );

    });

</script>

</head>

</html>




# 출력결과






#02. 앵커 문자와 플래그 문자( m ) 의 동시 사용




이번에는 앵커 문자와 플래그 문자( m )을 사용하여 문자열이 여러 줄일경우,


각각의 줄을 개별적인 문자열로 인지하고 검사할 수 있게 해주는 플래그 문자이다.



# 소스코드

<html>

<head>

<title>:: JavaScript 정규표현식 ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // @breif 변수를 선언한다.

        const regExp = new RegExp( /^m/igm );

        const string = "Mask The Red\nMask The Pink\nMask The Blue\nMask The Green\nMask The Yellow\nMask The Black";


        // @breif 메서드를 사용한다.

        const output = string.replace( regExp, "+$&+" );


        // @breif 출력한다.

        alert( output );

    });

</script>

</head>

<body>

</body>

</html> 




# 출력결과




코드를 실행하면 위와같이 여러줄에 걸친 대소 문자를 무시한 전역 검사를 수행한다.


플래그 문자( m )을 사용하였기에 모든 줄의 문자가 범위에 지정된다.









■ 정규 표현식 - 메타 문자




#01. 메타 문자의 범위 지정



메타 문자는 자바 스크립트의 정규 표현식 객체가 갖는 가장 유용한 기능이다.


기호

설 명

.

 · 아무 글자

[ abc ]

 · 괄호 안의 글자

[ ^abc ]

 · 괄호 안의 글자 제외

[ a - z ]

 · 알파벳 a부터 z까지

[ A - Z ]

 · 알파벳 A부터 Z까지

[ 0 - 9 ]

 · 숫자 0부터 9까지

[ ㄱ -ㅎ ]

 · 한글 자음 ㄱ부터 ㅎ까지

[ ㅏ - ㅑ ]

 · 한글 모음 ㅏ - I 까지

[ 가 - 힣 ]

 · 한글 단어 가 - 힣 까지( 전체 )




위 표의 예는 알파벳과 한글의 최대 범위를 예로 설명하지만.


[ h - k ] 의 형태로 범위를 한정하여 지정할 수 도 있다.


아래 예제를 살펴보면 [ a j ]  메타 문자와 플래그를 함께 사용하여 a 또는 j, A 또는 J를 검사한다.



<html>

<head>

<title>:: JavaScript 정규표현식 ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // @breif 변수를 선언한다.

        const regExp = new RegExp( /[oi]/ig );

        const string = "FireFox Chrome Explorer Opera Edge Safari";


        // @breif 메서드를 사용한다.

        const output = string.replace( regExp, "+$%+" );


        // @breif 출력한다.

        alert( output );

    });

</script>

</head>

</html> 



코드를 실행하면 o, i, O, J 문자가 대체된다.







#02. 패턴 매칭 시키기



주민등록 번호를 검사하는 정규 표현식을 만들어 보자.


앞에 여섯 개의 글자가 오고 중간에 ` - `가 들어가고 그 뒤에 일곱개의 글자가 나오면 된다.


<html>

<head>

<title>:: JavaScript 정규표현식 ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // @breif 변수를 선언한다.

        const regExp = new RegExp( /......-......./ );

        const string = "001234-1234567";


        // @breif 메서드를 사용한다.

        const output = string.replace( regExp, "+$&+" );


        // @breif 출력한다.

        alert( output );

    });

</script>

</head>

</html>



주민등록 번호 형식을 넣으면 양 끝에 +를 추가해서 출력한다.


패턴 매칭을 수행한 결과이다.







#03. 자바스크립트에서 추가된 정규 표현식의 메타문자



자바스크립트의 정규표현식은 메타 문자를 추가로 지원한다.


기호 

설 명

\d

 · 숫자

\w

 · 아무 단어( 숫자 포함 )

\s

 · 공백 문자 ( 탭, 띄어쓰기, 줄 바꿈)

\D

 · 숫자 아님

\W

 · 아무 단어 아님

\S

 · 공백 문자 아님



이를 혼합하면 주민등록번호 검사를 좀더 구체적으로 할 수 있는데


주민등록번호 뒤에 위치히나느 7개의 숫자 중 첫번째 숫자는 1, 2, 3, 4중 하나이므로


입력한 7번째의 값이 1, 2, 3, 4중 하나가 맞는지 확인해 보자.



# 소스코드

<html>

<head>

<title>:: JavaScript 정규표현식 ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // @breif 변수를 선언한다.

        const regExp = new RegExp( /\d\d\d\d\d\d-[1234]\d\d\d\d\d\d/ );

        const string = "001234-3723584";


        // @breif 메서드를 사용한다.

        const output = regExp.test( string );


        if( output == true ) {

            alert( "주민등록번호 형식에 규합합니다." );

        } else {

            alert( "주민등록번호 형식에 일치하지 않습니다." );

        }

    });

</script>

</head>

</html>




# 출력결과










■ 정규 표현식 - 수량문자




자바스크립트의 정규 표현식은 수량 문자를 지원한다.


기호 

설  명 

a+

 · a가 적어도 1개 이상

a*

 · a가 0개 또는 여러개

a?

 · a가 0개 또는 1개

a { 5 }

 · a가 5개

a {2, 5}

 · a가 2개 ~ 5개

a { 2 . }

 · a가 2개 이상

a { . 2 }

 · ar가 2개 이하




#01. 수량 문자를 사용한 범위 지정



위에서 우리는 주민등록번호의 패턴을 검사하는 예제를 진행 하였는데.


\d 기호를 몇 번씩이나 사용하였기에 실수하는 경우가 발생할 수 있다.


수량 문자를 사용하여 위 제를 조금 수정해 보자.



# 소스코드

<html>

<head>

<title>:: JavaScript 정규표현식 ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // @breif 변수를 선언한다.

        // const regExp = new RegExp( /\d\d\d\d\d\d-[1234]\d\d\d\d\d\d/ );

        const regExp = new RegExp( /\d{6}-[1234]\d{6}/ );

        const string = "001234-1234567";


        // @breif 메서드를 사용한다.

        const output = regExp.test( string );


        if( output == true ) {

            alert( "주민등록번호 형식에 규합합니다." );

        } else {

            alert( "주민등록번호 형식에 일치하지 않습니다." );

        }

    });

</script>

</head>

</html>



이제 예제를 실행해보면


동일한 결과를 출력하는 것을 확인 할 수 있다.



# 출력결과






#02. 문자 열의 반복 체크



정규 표현식은 괄호 수량 문자와 함께 사용하면 특정 문자열의 반복을 체크 할 수 있다.



# 소스코드

<html>

<head>

<title>:: JavaScript 정규표현식 ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // @breif 변수를 선언한다.

        const regExp = new RegExp( /(na)+/ );

        const string = "banana";


        // @breif 메서드를 사용한다.

        const output = string.replace( regExp, "+$&+" );


        // @breif 출력한다.

        alert( output );

    });

</script>

</head>

</html>



# 출력결과











■ 정규 표현식 - 선택 문자




선택 문자는 ` 또는(or) `의 역할을 수행하는 정규 표현식 기호이다.


정규 표현식 기호 

설   명

( abc | def )

 · abc 또는 def를 선택한다.



선택 문자는 지금까지 학습한 모든 정규 표현식 기호와 함께 사용할 수 있다.



# 소스코드

<html>

<head>

<title>:: JavaScript 정규표현식 ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // @breif 변수를 선언한다.

        const string = prompt( "소문자 또는 숫자로만 구성된 단어를 입력하세요.", "단어" );

        const regExp = new RegExp( /([0-9]|[a-z])/g );


        // @breif 출력한다.

        if( string.replace(regExp, "").length == 0 ) {

            alert( "SUCCESS" );

        } else {

            alert( "FAIL" );

        }

    });

</script>

</head>

</html> 




# 출력결과









해당 포스팅은 [한빛미디어] 모던 웹을 위한 JavaScript + jQuery 입문서의 내용을 정리한 것이다.


아무래도 책이라는 분량 때문이라도 한계가 있기에.


좀더 자세한 정규 표현식 및 대응되는 함수에 대한 설명은


https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/정규식


해당 링크의 내용을 좀더 참고하면 좀더 심화단계로 넘어갈 수 있을것이다.








Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기