'JavaScript &amp; jQuery' 카테고리의 글 목록 (8 Page)

'JavaScript & jQuery'에 해당되는 글 69건

[JavaScript] 정규 표현식을 사용한 데이터 변환[JavaScript] 정규 표현식을 사용한 데이터 변환

Posted at 2019. 4. 16. 15:36 | Posted in JavaScript & jQuery/JavaScript

■ 정규 표현식이란?

정규 표현식(regular expression)이란, 문자열의 패턴을 표현하는 표기 방법으로 문자열의 검색과 치환에 유용하다.

문자열의 패턴을 메타 문자(미리 약속된 특별기호)를 조합하여 표현함으로써 문자를 검색하거나 치환할 수 있다.

대부분의 프로그래밍 언어에서 정규 표현식을 지원하며, 자바스크립트에도 표준 기능으로 탑재되어 있다.

정규 표현식은 씹으면 씹을수로 맛이나는 오징어처럼 쓰면 쓸수록 그 유용함을 깨닫게 된다.

또한, 문자열을 효과적으로 다루기 위해 반드시 터득해야 되는 기술 중 하나이다.

그러면 정규 표현식의 기본 문법과 자바스크립트에서의 사용법을 알아보자.

■ 자바스크립트에서의 정규 표현식 사용법

자바스크립트에서는 소스 코드 중에 '/패턴/'으로 정규표현식 객체를 생성할 수 있다. 이를 정규 표현식 리터럴이라고 한다.

var re = /value=\d+/;

혹은 RegExp 객체를 생성하여 사용할 수도 있다.

var re = new RegExp("value=\d+");

정규 표현식 리터럴을 사용하면 스크립트가 로드되는 시점에서 정규 표현식이 컴파일되므로 성능에 유리하다.

한편 RegExp 객체를 사용하면 문자열 변수로 정규 표현식 패턴을 지정할 수 있어 동적으로 정규 표현식을 다룰 수 있게 된다.

#01. 정규 표현식 메소드

자바스크립트에는 정규 표현식과 관련하여 다음과 같은 메소드가 준비되어 있다.

▼ JavaScript의 정규 표현식 메서드 일람
메서드	설 명
.exec( )	· 문자열 중에서 일치하는 부분을 검색하여 결과를 배열로 반환한다. · 검색에 실패한 경우 null을 반환한다.
.test( )	· 문자열 중에서 일치하는 부분이 있는지를 테스트한다. · true / false 중 하나를 반환한다. · RegExp의 메서드
.match( )	· 문자열 중에서 일치하는 것을 검색하여 결과를 배열로 반환한다. · 일치하는 패턴이 없는경우 null을 반환한다. · String의 메서드
.search( )	· 문자열 중에서 일치하는 것이 있는지를 테스트한다. · 일치하는 패턴이 없는경우 -1을 반환한다. · String의 메서드
.replace( )	· 문자열 중에서 일치하는 것을 찾아서 다른 문자열로 치환한다.
.split( )	· 문자열을 정규 표현식으로 분할하여 부분 문자열의 배열을 반환한다.

기능이 비슷해 보이는 메서드들이 있는데 다음과 같이 용도에 따라 나눠 생각하면 된다.

어떤 문자열 안에 정규 표현식 패턴이 있는지 확인만 하고 싶을 때는 test( ) 또는 search( )를 사용한다.

더 자세한 정보를 알고 싶을 때에는 exec( ) 혹은 match( )를 사용한다.

#02. RegExp.exec( ) 메서드

RegExp.exec( ) 메서드는 정규 표현식에 해당하는 문자열을 검색하여 패턴이 존재하면

문자열의 배열을 반환함과 동시에 RegExp 객체의 속성을 업데이트하고, 일치하는 패턴이 없으면 null을 반환한다.

결과로 반환되는 배열에는 정규 표현식에 일치하는 문자열이 첫 번째 요소에 담겨 있고,

이어서 정규 표현식 중 괄호로 묶인 부분에 해당하는 부분 문자열이 차례로 담겨 있다.

또한, 이 배열에는 속성으로 정규식에 해당하는 문자열의 인덱스 정보와 입력받은 문자열 값을 포함하고 있다.

<html>

<head>

<title>:: RegExp.exec() 메서드 ::</title>

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

// 정규 표현으로 수치 + 영소문자 패턴

var re = /([0-9]+)([a-z]+)/g; // 정규 표현식 객체를 리터럴로 만들어서 변수 str에 대입

// [ ]괄호가 2번 사용되었는데 각각 부분 패턴을 의미한다.

// 대상 문자열

var str = "111jpy,8usd,xxx"; // 정규 표현식으로 확인하고 싶은 문자열을 변수 str에 대입

// 1회 실행

console.log(re.exec(str));

// 2회 실행

console.log(re.exec(str));

// 3회 실행

console.log(re.exec(str));

});

</script>

</head>

</html>

수행결과는 아래와 같다.

정규 표현식에 g플래그를 지정하면 문자열 안에 일치하는 모든 패턴을 포함하게 된다.

예제에서는 exec( )를 여러 번 호출하며 일치하는 패턴을 차례로 출력하고 있다.

그런데 exec( ) 메서드는 test( )나 search( )에 비해 실행 속도가 느리므로 패턴의 존재 여부만을 확인하고 싶은 경우에는

사용을 권장하지 않는다.

#03. RegExp.test( ) 메서드

RegExp.test( ) 메서드는 인자로 주어진 문자열에 정규 표현식에 해당하는 문자열 패턴이 있는지 여부를 조사한다.

결과로 true나 false의 boolean 값을 반환한다.

<html>

<head>

<title>:: RegExp.exec() 메서드 ::</title>

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

// 우편번호 nnn-nnn 패턴

var re = /^\d{3}-\d{3}$/;

// 정규표현식으로 패턴이 일치하는지 확인

console.log("123-123 : ", re.test("123-123"));

console.log("12-123 : ", re.test("12-123")); // 숫자의 자릿수가 부족해 false

console.log("440-001 : ", re.test("440-001"));

console.log("aaa-bbb : ", re.test("aaa-bbb")); // 숫자가 아닌 알파벳으로 구성되어 있기때문에 false

});

</script>

</head>

</html>

수행결과는 아래와 같다.

#04. String.match( ) 메서드

String 객체에 관련된 match( ) 메서드는 인자로 전달받은 정규 표현식 패턴을 조사한다.

정규표현식에 g 플래그를 포함하지 않은 경우는 RegExp.exec( ) 메서드와 같은 결과를 반환하지만.

g 플래그를 포함한 경우에는 일치하는 부분을 모두 포함한 배열을 반환한다.

일치하는 패턴이 없으면 null을 반환한다.

g 플래그 여부에 따른 결과의 차이를 유념해서 보도록 한다.

<html>

<head>

<title>:: String.match() 메서드 ::</title>

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

// 대상 문자열

var str = "v=20, n=40, c=30";

// 숫자 패턴 검색

console.log("숫자 패턴 검색 : ", str.match(/[0-9]+/));

// 모든 숫자 패턴을 검색

console.log("모든 숫자 패턴 검색 : ", str.match(/[0-9]+/g));

// 변수 = 숫자의 조합을 검색

console.log("변수 = 숫자의 조합을 검색 : ", str.match(/\w+=\d+/g));

});

</script>

</head>

</html>

수행결과는 아래와 같다.

#05. String.search( ) 메서드

대상 문자열에 정규 표현식에 해당하는 패턴이 있는지 확인할때 사용한다.

정규 표현식에 해당하는 패턴이 발견되면 발견된 인덱스를 돌려주고, 없으면 -1을 반환한다.

<html>

<head>

<title>:: String.search() 메서드 ::</title>

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

// 대상 문자열

var str = "zip:999-999, mail:a@example.com";

// 우편번호 검색

console.log("우편번호 검색 : ", str.search(/\d{3}-\d{3}/));

// 이메일 검색

console.log("이메일 검색 : ", str.search(/\w+\@\w+\.\w+/));

// URL 검색

console.log("URL 검색 : ", str.search(/https?:\/\//));

});

</script>

</head>

</html>

수행결과는 아래와 같다.

#06. String.replace( ) 메서드

정규 표현식으로 치환을 수행하는 replace( ) 메서드는 두 가지 형태의 사용법이 있다.

① 정규 표현식을 이용한 치환

str.replace( 정규 표현식, 치환될 문자열 )

실제 코드를 통해 사용법을 파악하자.

<html>

<head>

<title>:: String.replace() 메서드 ::</title>

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

// 대상 문자열

var str = "Today 10per OFF";

// 숫자를 30으로 치환

console.log("숫자를 30으로 치환 : ", str.replace(/\d+/, "30"));

// 숫자와 이어지는 영문 소문자까지 치환

console.log("숫자와 이어지는 영문 소문자까지 치환 : ", str.replace(/\d+[a-z]+/, "500won"));

// 알파벳을 전부 지우고 숫자만을 남긴다.

console.log("알파벳을 전부 지우고 숫자만을 남김 : ", str.replace(/[a-zA-Z]+/g, ""));

});

</script>

</head>

</html>

치환될 문자열 내에 특수한 치환 패턴을 포함할 수 있다.

▼ 치환될 문자열에 사용되는 특수 기호
패턴	설 명
$$	· 문자 '$'를 삽입한다.
$&	· 매치된 부분 문자열을 삽입한다.
$`	· 매치된 부분 문자열 직전의 문자열을 삽입한다.
$'	· 매치된 부분 문자열 직후의 문자열을 삽입한다.
$1$2$3…	· 괄호로 묶인 부분 문자열을 삽입한다.

<html>

<head>

<title>:: String.replace() 메서드 ::</title>

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

// 대상 문자열

var str = "Today 10per OFF";

// 숫자를 30으로 치환

console.log("숫자를 30으로 치환 : ", str.replace(/\d+/, "30"));

// 숫자와 이어지는 영문 소문자까지 치환

console.log("숫자와 이어지는 영문 소문자까지 치환 : ", str.replace(/\d+[a-z]+/, "500won"));

// 알파벳을 전부 지우고 숫자만을 남긴다.

console.log("알파벳을 전부 지우고 숫자만을 남김 : ", str.replace(/[a-zA-Z]+/g, ""));

});

</script>

</head>

</html>

② 콜백함수를 사용하여 치환

콜백 함수를 사용하는 replace( ) 메서드의 사용법을 알아보자.

str.replace( 정규표현식, 치환 함수 )

문자열 str안의 정규 표현식에 일치하는 문자열에 대해 치환 함수가 수행된다.

그러면 수행된 치환 함수의 반환 값으로 치환된다.

직접 프로그램으로 확인해 보자.

다음은 영어 단어의 소문자를 대문자로 치환하는 예이다.

<html>

<head>

<title>:: String.replace() 메서드 ::</title>

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

// 대상 문자열

var str = "piano GUITAR";

// 대소문자를 소문자로 치환

var txt = str.replace(/[a-z]+/g, function(v) {

return v.toUpperCase();

});

document.getElementById("instrument").innerHTML = txt;

});

</script>

</head>

<body>

</body>

</html>

위 프로그램을 실행하면 "PLANO GUITAR"라고 표시된다.

콜백 함수를 사용하면 단순한 치환이 아닌 복잡한 치환까지도 자유롭게 프로그래밍 할 수 있다.

아래 코드는 텍스트 중에서 숫자를 찾아서 세금에 해당하는 값에 8%를 더한 값으로 치환하는 프록램이다.

<html>

<head>

<title>:: String.replace() 메서드 ::</title>

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

// 대상 문자열

var str = "price : 100 won";

// 금액에 해당하는 문자열을 찾아서, 세금 8%를 더하여 치환

var txt = str.replace(/\d+/, function(v) {

v = parseInt(v);

return Math.ceil(1.08 * v);

});

document.getElementById("price").innerHTML = txt;

});

</script>

</head>

<body>

</body>

</html>

프로그램을 실행하면 "price : 108 won"으로 표시된다.

저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 스크립트로 QR코드 스캔하고 데이터 읽기 (43)	2019.06.13
[JavaScript] 셀렉트 박스의 시간 자동 비교 및 선택기능 (0)	2019.05.23
[JavaSccript] 콤마(,)로 구분된 문자를 배열로 합치기 (0)	2019.02.24
[JavaScript] 배열의 값을 콤마(,)로 분리하기 (0)	2019.02.24
[JavaScript] GMT, 그리니치 표준시 구하기 (2)	2019.01.25

[JavaSccript] 콤마(,)로 구분된 문자를 배열로 합치기[JavaSccript] 콤마(,)로 구분된 문자를 배열로 합치기

Posted at 2019. 2. 24. 15:16 | Posted in JavaScript & jQuery/JavaScript

참고 : https://cloudless.tistory.com/53

■ 문자열을 배열로 바꾸는 예제

# 소스 코드

<html>

<head>

<title>:: JAVASCRIPT EXPLODE ::</title>

.raceQueen {

text-align : center;

margin-bottom : 5px;

}

</style>

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

// 콤마( , )로 구분되는 문자열을 나열한다.

var modelText = "최슬기, 한가은, 송주아, 유다연, 한지은, 김하율, 박소유, 서진아, 최별하, 서한빛";

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

var arrModel = modelText.split(",");

for(var num in arrModel) {

// trim( ) 함수를 사용하여 공백을 제거한다.

var raceQueen = arrModel[num].trim();

document.getElementsByClassName("raceQueen")[num].value = raceQueen;

}

});

</script>

</head>

<body>

<h3>Race Queen ~~!!</h3>

</body>

</html>

# 출력 결과

저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 셀렉트 박스의 시간 자동 비교 및 선택기능 (0)	2019.05.23
[JavaScript] 정규 표현식을 사용한 데이터 변환 (0)	2019.04.16
[JavaScript] 배열의 값을 콤마(,)로 분리하기 (0)	2019.02.24
[JavaScript] GMT, 그리니치 표준시 구하기 (2)	2019.01.25
[JavaScrpt] 파일업로드시 확장자 검사하기 (0)	2019.01.23

[JavaScript] 배열의 값을 콤마(,)로 분리하기[JavaScript] 배열의 값을 콤마(,)로 분리하기

Posted at 2019. 2. 24. 15:15 | Posted in JavaScript & jQuery/JavaScript

참고 : https://cloudless.tistory.com/53

■ 배열을 문자열로 합쳐서 출력하는 예제

# 소스 코드

<html>

<head>

<title>:: JAVASCRIPT IMPLODE ::</title>

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

// 1차원 배열을 선언한다.

var arrModel = new Array("XPS", "MacBook", "Spectre", "ThinkPad", "PenS", "Gram");

// 생성한 1차원 배열을 콤마( , )로 구분하는 문자열로 합친다.

var combineText = arrModel.join(", ");

document.getElementById("noteBook").value = combineText;

});

</script>

</head>

<body>

</body>

</html>

# 출력 결과

저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 정규 표현식을 사용한 데이터 변환 (0)	2019.04.16
[JavaSccript] 콤마(,)로 구분된 문자를 배열로 합치기 (0)	2019.02.24
[JavaScript] GMT, 그리니치 표준시 구하기 (2)	2019.01.25
[JavaScrpt] 파일업로드시 확장자 검사하기 (0)	2019.01.23
[JavaScript] 시간이 AM 혹은 PM인지 확인하기 (0)	2019.01.22

[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기

Posted at 2019. 1. 31. 18:16 | Posted in JavaScript & jQuery/jQuery

참고 : http://2nusa.blogspot.com/2016/10/jquery-mouse-wheel.html

■ 한화면 단위로 끊어서 마우스 휠 이동시키기

해당코드는 jQuery 한화면 단위 Mouse Wheel 이동 포스팅을 가져와서 만든 내용이다.

위포스팅의 코드를 그대로 사용할 수 없는 상황이 되었기에 필요 부분을 수정하여 포스팅한다.

(파이어 폭스 브라우저에서 에러 발생 및 콘솔창 발생 에러 예외처리)

# 소스코드

<html>

<head>

<title>MouseWheel</title>

html,body{ margin:0;padding:0;width:100%;height:100%;}

.box{ width:100%;height:100%;position:relative;color:#FFFFFF;font-size:24pt;}

</style>

    jQuery(document).on("ready", function() {
        jQuery(".box").each(function () {

            // 개별적으로 Wheel 이벤트 적용
            jQuery(this).on("mousewheel DOMMouseScroll", function(event) {

                var delta = 0;
                var moveTop = null;
                var boxMax = jQuery(".box").length - 1;

var winEvent = "";

                if(!winEvent) {
                    winEvent = window.event;
               }

                if(winEvent.wheelDelta) {

                    delta = winEvent.wheelDelta / 120;
                    if(window.opera) {
                        delta = -delta;
                    }
                }


                else if(winEvent.detail) {
                    delta = -winEvent.detail / 3;
               }

                // 마우스휠을 위에서 아래로 이동
                if(delta < 0) {

                   // 마지막 BOX 보다 순서값이 작은 경우에 실행
                   if(jQuery(this).index() < boxMax) {

                       console.log("▼");
                        if(jQuery(this).next() != undefined) {
                            moveTop = jQuery(this).next().offset().top;
                        }
                   }

                   // 마지막 BOX보다 더 아래로 내려가려고 하는경우 알림창 출력
                   else {
                       alert("마지막 페이지 입니다.");
                       return false;
                   }
                }

                // 마우스휠을 아래에서 위로 이동
                else {

                   // 첫번째 BOX 보다 순서값이 큰 경우에 실행
                   if(jQuery(this).index() > 0) {

                       console.log("▲");
                        if(jQuery(this).prev() != undefined) {
                            moveTop = jQuery(this).prev().offset().top;
                        }
                   }

                   // 첫번째 BOX 더 위로 올라가려고 하는 경우 알림창 출력
                   else {
                       alert("첫번째 페이지 입니다.");
                       return false;
                   }
                }

                // 화면 이동 0.8초(800)
                jQuery("html,body").stop().animate({
                    scrollTop : moveTop + "px"
                }
                , {
                    duration: 800, complete : function () { }
                });
            });
        });
    });
</script>
</head>
<body>
   <div class="box" style="background-color:#FF0000;">1</div>
   <div class="box" style="background-color:#FF4500;">2</div>
   <div class="box" style="background-color:#FFFF00;">3</div>
   <div class="box" style="background-color:#008000;">4</div>
   <div class="box" style="background-color:#0000FF;">5</div>
   <div class="box" style="background-color:#4B0082;">6</div>
   <div class="box" style="background-color:#EE82EE;">7</div>
</body>
</html>

# 출력결과

마우스 휠로 스크롤을 하며 상, 하 스크롤을 진행하다보면.

위 이미지와 같이 자동으로 다음 화면으로 이어지는 것을 확인할 수 있다.

저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작 (0)	2019.06.18
[jQuery] 팝업 창 외에 다른 항목 클릭 막기 (0)	2019.06.04
[jQuery] Mobile Web 사용시 KEYBOARD 이벤트 체크 (0)	2018.11.17
[jQuery] 원을 그리며 카운트 세는 타이머 애니메이션 (0)	2018.11.02
[jQuery] YouTube 영상 제어 (0)	2018.10.26

Prev Next

1 ··· 5 6 7 8 9 10 11 ··· 18

'JavaScript & jQuery'에 해당되는 글 69건

[JavaScript] 정규 표현식을 사용한 데이터 변환[JavaScript] 정규 표현식을 사용한 데이터 변환

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaSccript] 콤마(,)로 구분된 문자를 배열로 합치기[JavaSccript] 콤마(,)로 구분된 문자를 배열로 합치기

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 배열의 값을 콤마(,)로 분리하기[JavaScript] 배열의 값을 콤마(,)로 분리하기

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바