써먹는 웹개발

[Js 정규식] 이론 정리 본문

웹개발/Js & Jquery

[Js 정규식] 이론 정리

kmhan 2018. 3. 6. 01:14


728x90
반응형

1. 정규표현식(RegExp)이란?


문자열을 특정 규칙으로 검색 및 검사, 수정을 하는데 사용하는 형식언어

복잡한 패턴의 문자열에서 원하는 정보를 얻어낼 수 있는 강력한 도구


장점 : 문자열 처리에 최적(긴 문장을 간단하게)

단점 : 가독성이 떨어짐



1-2. 패턴과 매치

패턴(//) : 검색의 기준

매치(Match) : 패턴이 결정되었을 때 대상 문자열에

      패턴을 적용시키는 것

치환(Replace) : 매치로 추출한 값을 별도로 지정한

값으로 바꾸는 것


1-3. 작성방법

1) 메소드 파라미터에 패턴 작성

      1-1) 직접 작성 : ‘sports’.match(/sp/); 

      1-2) 변수 : var param = /sp/I;

                     ‘sports’.match(param);

2) 메소드 앞에 패턴 작성

    - /sp/.exec(‘sports’);

3) RegExp 클래스 사용

    - var regexp = new RegExp(‘sp’, ‘I’); // 인스턴스 반환

    - show(regexp); // ‘/sp/I’ 반환

    - 반드시 사용하는 경우 : 문자열과 값을 가진 변수를    

       조합하여 일반적인 형태로 패턴을 사용하면서 원하는 값이     

         나오지 않는 경우에 사용합니다. (9장 참조)



2. 문자열 매치 - 조건


정규 표현식을 배우는 것은 조건을 배우는 것

 - 정규식을 배우는데 있어, 가장 많은 부분을 차지


플래그(flag)

 ※ 플래그를 쓰는 이유? 자바스크립트는 대소문자를 구분하는데

   정규 표현식은 한글자로 대소문자 구분 없이 검색할 수 있습니다.


 플래그

명칭 

기능 개요 

i

ignoreCase 

 대소문자를 구분하지 않으며,

매치된 첫 문자열을 반환

g

global 

 패턴에 매치되는 모든 문자열을 

배열로 반환

m

multiline 

  매치 대상에 줄 바꿈이 있더라도 

전체를 검색



2-2. 문자열 매치 - 한 문자, 대체


임의의 한 문자(.)

  - 행 바꿈 문자를 제외한 어떤 문자에도 대응이 가능

예) A.ple = Apple(O), Alple(O), Aplle(X)


대체 : 둘 중 하나 선택(|)

 - ‘ | ’ 기호를 기준으로 앞뒤의 값들 중의 하나 선택

예) gr(a|e)y  = gray 또는 grey 로 둘 중 하나에 매치

 - 괄호가 없을 경우 gra|ey 는 gra 또는 ey 로 인식

예) (First|1st) => (Fir|1)st  => [First, 1st]



3. 메소드


정규표현식에서 사용하는 메소드는 오브젝트를 지정하지 않습니다. 

왜냐하면 자바스크립트가 메소드 앞에 작성한 데이터 타입을 분석하여 String 클래스 또는 RegExp 클래스에 속한 메소드를 호출하기 때문입니다.


String 클래스의 메소드 

 - match, search, replace, split

RegExp 클래스의 메소드

 - exec, test


※ 3/6에 3과까지 작성

3-2. 정규 표현식 메소드 일람표


 클래스

메소드 

목적 

기능 개요 

 string

match 

검색 

매치된 문자열을 배열로 반환, 매치가 안되면 null을 반환 

 

replace

치환

매치된 문자열을 지정한 문자열로 치환 

 

search 

검색 

매치된 문자열의 인덱스 반환, 매치가 안되면 -1을 반환 


split

분할 

매치된 문자로 문자열을 분할하여 반환 

RegExp

exec

검색 

매치된 문자열 하나를 배열로 반환, 매치가 안되면 null을 반환 

 

 test

검사 

매치되면 true, 안되면 false 반환 


4. 매치할 위치 지정 (앵커 문자)

패턴 

개요

매치 대상 처음부터 매치 

매치 대상 끝에 매치 

\B

63개 문자에 매치 [0-9a-zA-Z_] 

\b 

63개 이외 문자에 매치 

(?=p) 

이후에 나올 문자들이 패턴 p에 매치되어야 함 

(?!p) 

이후에 나올 문자들이 패턴 p에 매치되지 않음 

 - \B의 경우 문자가 63개 일치할 때 \B까지의 값을 반환하지 않고, 앞뒤에 매치된 값이 반환됩니다.

 ex) 'ba'.match(/\Ba/); // 반환값 [a]

      'ba'.match(/\Bab/); // 반환값 [null]



5. 수량자 (매치 수를 지정)

패턴

 개요

앞의 문자를 하나 이상 매치 (>=1) 

없거나 하나 이상 매치 (>=0) 

없거나 하나만 매치 (0,1) 

{숫자} 

문자 개수에 매치 (=숫자) 

{숫자,} 

문자 수 이상에 매치 (>=숫자) 

{숫자,숫자} 

숫자 매치 구간 설정 

+? 

한 번만 매치 

*?

최소 매치

{숫자,숫자}? 

숫자 범위 무시


1) 욕심 많은 매치

 ex) +. *, ?

2) 욕심 없는 매치

 ex) +?, *?, {숫자,숫자}?

3) { } 구간 지정

정규 표현식 

실행결과

'aaaaa'.match(/a{1,5}/); 

 [aaaaa]

'aaaaa'.match(/a{1,6}/); 

 [aaaaa]

'aaaaa'.match(/a{1,5}?/); 

 [a]



5-2. 수량자 예시

 1) 앞의 문자를 0회 또는 1회 반복 (?)

  - ?문자는 앞의 문자가 있거나 없는 경우를 찾을 때 사용

  - 복수와 단수를 구분하는 경우 많이 사용

   예) apples? apple(O), apples(O)


 2) 앞의 문자를 0회 이상 반복 (*)

  - *문자가 입력된 이전의 문자가 출력이 되지 않거나, 여러번 출력이 되는 것을 지정한다.

   예) apple* = appl(O), apple(O), appleeeeeee(O)


 3) 앞의 문자를 1회 이상 반복 (+)

  - +문자가 입력된 이전의 문자가 1번 이상 입력이 되는 것을 지정

  예) apple+ = appl(X), apple(O), appleeeeeeee(O)


 

6. 범위 또는 집합을 지정

패턴

개요 

[ ] 

문자 집합, 지정한 문자 단위로 매치 

[패턴 문자] 

패턴 문자를 일반 문자로 매치 

[\b] 

백스페이스 

[-] 

구간에 속한 값을 매치 

[^] 

지정한 문자가 아닌 문자에 매치 



7. 이스케이프 문자 클래스

 패턴

개요

\d

숫자 매치 [0-9] 

\D

숫자 이외 매치 [^0-9] 

\s 

공백문자 매치 [\t\n\r\f] 

\S 

공백 이외 문자 매치 [^\t\n\r\f]

\w

63개 문자만 매치 [0-9a-zA-Z_] 

\W 

63개 이외 문자 매치 [^0-9a-zA-Z_] 

\uhhhh 

유니코드 값으로 매치 

\xhh 

16진수 값으로 매치 

\c

제어 문자 


8. 그룹화


 패턴

개요

 ()

매치 결과 캡쳐
(괄호없이 매치 후 괄호안에 문자열 따로 매치 = 총 2번 매치) 

\숫자

백 레퍼런스
(패턴의 매치 결과 값을 참조)

RegExp.$숫자

캡쳐 값 참조

(?:)

매치 결과 캡쳐('( )')를 하지 않는 그룹

(?=)

전방 매치

(?!)

전방 부정 매치

()는 정규식 내에서 패턴을 그룹화하는데 사용

 - 예) (apple)* = apple(O), appleapple(O), appleappleapple(O)


9. RegExp 클래스를 통한 정규식

 1) 반드시 RegExp 클래스를 써야 하는 경우

  - 문자열과 값을 가진 변수를 조합해서 변수에 대입한 경우

 2) 예시) 네 자리 수마다 ','를 찍는 함수


10. 정규식 활용 사례

 1) E-mail : /^[\w][\w-_\.]+@[\w]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,3})$/i;

  - Email 체크 패턴

 패턴 문자

기능

 ^

첫 문자에 매치

[\w]

63개 문자 하나 매치

[\w-\.]+

63개 문자, 하이픈(-), 점(.)에 하나 이상 매치

@

@ 문자에 매치 

[\w]+

63개 문자 하나 이상 매치

 ()*

없어도 매치하고 하나 이상에 매치

\.

문자 점(.), 패턴 문자 점(. / 한 글자)을 일반 문자화

(기능을 없애고 고유의 문자 점으로 나타냄)

[A-Za-z0-9]+

영문 대소문자, 숫자에 하나 이상 매치 

()

먼저 실행, 캡처

[A-Za-z]{2,3}

영문 대소문자 2개 또는 3개 매치 

끝 문자에 매치 

Flag(플래그)

i (대소문자 구분 안함) 



10-2. 역동적으로 RegExp 인스턴스 생성

 

 예시) 숫자, 소숫점, 음수(-) 인지 확인하는 함수


1) 문자열에 숫자 1이 들어가서 true 반환


2) 문자열에 문자 '.'이 들어가서 true 반환


3) 문자열에 문자 a가 들어가서 false 반환



주의사항

 1) ^가 [ ] 밖에 있으면 처음을 지정,

   [ ] 안에 있으면 해당문자가 아닌 것을 찾는 것

  예) ^[a-z] = 첫 문자가 소문자 a-z로 시작.

       [^a-z] = a에서 z까지의 문자를 제외한 문자


 2) [0-9]과 [A-z]는 되지만 [9-0]과 [a-Z]는 안됩니다. (에러발생)

  - why? 아스키코드 순서상 0-9, A-Z, a-z 순으로 오기 때문입니다.


 3) | (대체 문자)는 자바스크립트의 OR 연산자와 다릅니다.

  - 대체( | )는 정규 표현식 내부에서 바( | )의 왼쪽과 오른쪽 모두를 매치하여 자신이 관리하는 영역에 매치 결과를 보관합니다. 그리고 왼쪽 인덱스 값이 오른쪽 인덱스 값과 같거나 작으면 왼쪽 매치 결과를 반환하고 아니면 오른쪽 매치 결과를 반환합니다.


정규 표현식

 실행 결과

/bc|c/.match("abc");

[bc]

/c|bc/.match("abc");

[bc]


728x90
반응형


Comments