써먹는 웹개발
[Js 정규식] 이론 정리 본문
1. 정규표현식(RegExp)이란?
문자열을 특정 규칙으로 검색 및 검사, 수정을 하는데 사용하는 형식언어
복잡한 패턴의 문자열에서 원하는 정보를 얻어낼 수 있는 강력한 도구
장점 : 문자열 처리에 최적(긴 문장을 간단하게)
단점 : 가독성이 떨어짐
패턴(//) : 검색의 기준
매치(Match) : 패턴이 결정되었을 때 대상 문자열에
패턴을 적용시키는 것
치환(Replace) : 매치로 추출한 값을 별도로 지정한
값으로 바꾸는 것
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-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. 그룹화
패턴 | 개요 |
() | 매치 결과 캡쳐 |
\숫자 | 백 레퍼런스 |
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] |
'웹개발 > Js & Jquery' 카테고리의 다른 글
function을 변수화시키는 방법 (0) | 2018.04.03 |
---|---|
[JavaScript]소스를 깔끔하게 정리하는 방법 (0) | 2018.03.15 |
태그문자를 text로 또는 text를 태그문자로 변경하는 함수 (ex. <,>, ,\r\n,\t) (0) | 2018.02.26 |
[Jquery] 텍스트박스에 id 또는 name명 추가(변경)하는 방법 (0) | 2018.02.26 |
[JavaScript]텍스트박스에서 백스페이스 입력시 뒤로가기 안되게 처리하는 방법 (0) | 2018.02.21 |