[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/정규식


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








반응형
저작자표시

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

[JavaScript] 매월의 월요일 기준, 주차 구하기  (4) 2020.06.29
[JavaScript] Table을 Excel 처럼 즉시 수정가능하게 만들기  (1) 2020.06.24
[JavaScript] 휴대폰 사진 업로드시 회전 방지  (0) 2020.03.30
[JavaScript] 이미지 파일 업로드하고 썸네일 생성하기  (2) 2020.03.25
[JavaScript] Canvas로 이미지 서버에 전송하기 - Sample  (0) 2020.03.06
//

티스토리툴바