728x90
자주 사용하는 정규 표현식
$&, $`, $’
$& : 제일 처음 일치하는 문자열
$` : 일치한 문자열의 앞 문자열
$' : 일치한 문자열의 뒤 문자열
<button onclick="test2();"> 정규표현식 - $&, $`, $' </button>
<script>
function test2(){
var regExp = /as/; // 정규식 객체 생성 // 비교 기준점
var str = 'javascript jquery ajax sass'; // 정규식 적용 자원(검사할 원본 문자열)
// String의 메소드 : str.replace() 사용
// $& : 제일 처음 일치하는 문자열 // 소괄호 감싼문자로 대체해줌 (as) 소괄호쳐서 출력 // 해당문자열의 제일 앞에 일치하는 문자 소괄호 -> 맨앞의 (as)만 대체됨
console.log('$& : ' + str.replace(regExp, '($&)')); // $& : jav(as)cript jquery ajax sass
// $` : 일치한 문자열의 앞 문자열 // 매칭된 문자열에 앞 문자열을 의미 // 내 앞에 있는 문자열로 대체
console.log('$& : ' + str.replace(regExp, '($`)')); // $& : jav(jav)cript jquery ajax sass
// $' : 일치한 문자열의 뒤 문자열 // 지정한 문자열 이후 문자열로 대체 // // 지정한 문자열의 뒤 문자열로 대체되어 나옴 -> as 뒤의 전체 문자열로 대체
console.log('$& : ' + str.replace(regExp, "($')")); // $& : jav(cript jquery ajax sass)cript jquery ajax sass
// $' 싱글쿼테이션 사용이라 밖을 더블""로 감싸야함
}
</script>
()와 |
데이터 중에 /( )/에 들어간 데이터(기준점)와 일치하는 데이터 반환 : boolean
- 일치는 true 미일치는 false로 반환 : true / fasle로 반환
/( )/ 내부의 데이터 구분은 |으로 함
<button onclick ="test3();"> 정규표현식 : ()와 | : boolean</button>
<script>
function test3() {
var src = ['월요일','화요일','수요일','목요일','금요일','토요일','일요일']; // 정규식 적용할 데이터
// var regExp = /(금요일|토요일|일요일)/; // 정규식 객체 생성 // 비교 기준점
var regExp = /**(금|토|일)**요일/; // 공통부분 축약 방식 : /( | | | )축약할 공통부분/;
// 데이터 중에 /()/에 들어간 데이터(기준점)와 일치하는 데이터는 true
// 아닌 데이터는 false로 반환
for(var i in src) {
console.log(src[i] + " : " + **regExp.test**(src[i])); // 금토일 true // 일치 true, 불일치 false 출력됨
}
플래그 문자 : g i m
g : 전역 비교 수행
i : 대소문자를 가리지 않고 비교 수행
m : 여러줄을 검사하는 플래그 문자
(줄바꿈된 데이터들도 검사한다는 의미)
<button onclick="test4();"> 정규표현식 - 플래그 문자 - g i m </button>
<script>
function test4() {
var str = "JAvaScript JQuery Ajax\\nJAvaScript JQuery Ajax";
// String의 메소드 : str.replace() 사용
// /a/ : 일치하는 문자 중 첫번째만
var regExp0 = /a/;
console.log(regExp0 + " : " + str.replace(regExp0, '($&)')); // /a/ : JAv(a)Script JQuery Ajax
// JAvaScript JQuery Ajax
// g : 일치하는 문자열 모두 비교(전역 비교 수행) ()
// 모든 비교를 다 비교하게끔 하는 것(전역 비교 수행)
// /a/g : 일치하는 문자열 모두 ( g => 전역비교 수행 )
var regExp1 = /a/g;
console.log(regExp1 + " : " + str.replace(regExp1, '($&)')); // /a/g : JAv(a)Script JQuery Aj(a)x
// JAv(a)Script JQuery Aj(a)x
// /a/i : 대소문자 구분없이 일치하는 문자 중 첫번째 문자열
var regExp2 = /a/i;
console.log(regExp2 + " : " + str.replace(regExp2, '($&)')); // /a/i : J(A)vaScript JQuery Ajax
// JAvaScript JQuery Ajax
// /a/gi : 대소문자 구분없이 모든 문자열 -> ig, gi 둘 다 가능
var regExp3 = /a/gi;
console.log(regExp3 + " : " + str.replace(regExp3, '($&)')); // /a/gi : J(A)v(a)Script JQuery (A)j(a)x
// J(A)v(a)Script JQuery (A)j(a)x
}
</script>
앵커문자 : ^, $
문자열의 앞과 뒤를 구분해주는 정규표현식 기호
아래 둘은 위치 고정 앵커문자로 정규표현식 패턴을 특정 위치에 고정시킨다
^ : 앞
$ : 뒤
// 대소문자 구분없이 모든 j
var regExp1 = /j/gi;
console.log(regExp1 + " : " + str.replace(regExp1, '($&)')); // /j/gi : (J)avaScript
// (J)Query
// A(j)ax
//지정한 첫번째 문자
// ^ : 맨 앞만 적용시키는 기호
var regExp1_2 = /^j/gi; // ^ : 맨 앞만 적용시키는 기호
console.log(regExp1_2 + " : " + str.replace(regExp1_2, '($&)')); // /^j/gi : (J)avaScript
// g 넣어도 ^<-때문에 전역비교는 못하고 맨 앞에있는것만 비교하는거 // JQuery
// Ajax
// 두번쨰 j 체크안됨. ^ 문자열의 앞을 의미. Ajax는 체킹이 안됐음
// m : 여러줄 전체를 검사하는 플래그 문자 ======= g와 m의 차이는?
var regExp1_3 = /^j/gim; // ^ : 맨 앞만 적용시키는 기호
console.log(regExp1_3 + " : " + str.replace(regExp1_3, '($&)')); // /^j/gim : (J)avaScript
// (J)Query
// Ajax
var str2 = "JavaScript\\nJQuery\\nShellScript\\nAjax";
var regExp3 = /ipt/gi;
console.log(regExp3 + " : " + str2.replace(regExp3, '($&)')); // /ipt/gi : JavaScr(ipt)
// JQuery
// ShellScr(ipt)
// Ajax
// /ipt$/gi
var regExp3 = /ipt$/gi; // ^가 앞이면 $는 뒤를 보는 것 // 그렇기 때문에 어디에서 채팅(?) 안되는 것
console.log(regExp3 + " : " + str2.replace(regExp3, '($&)')); // /ipt$/gi : JavaScript
// 전체적으로 한번에 다 보는건데, $ = 문자열의 뒤를 이야기함. // JQuery
// ShellScr
// Ajax
// /ipt$/gim : 맨 끝에 ipt가 나오는 걸 체크해라
var regExp3 = /ipt$/gim; // ^가 앞이면 $는 뒤를 보는 것 // 그렇기 때문에 어디에서 채팅(?) 안되는 것
console.log(regExp3 + " : " + str2.replace(regExp3, '($&)')); // /ipt$/gi : JavaScr(ipt)
// JQuery
// ShellScr(ipt)
// Ajax
수량 문자
a*: a가 0개 이상
a+: a가 1개 이상
a?: a가 0개이거나 또는 1개일 때
var src = "aabc abc bc";
var regExp1 = /a*b/g; // 문자열의 모든 영역에서 a는 0개 이상이고 그 뒤에는 b가 들어가 있는 문자열 의미
console.log(regExp1 + " : " + src.replace(regExp1, '($&)')); // (aab) , (ab), (b) <- a가 0개 이상
var regExp2 = /a+b/g; // 문자열의 모든 영역에서 a는 1개 이상이고, 그 뒤에는 b가 들어가 있는 문자열을 의미
console.log(regExp2 + " : " + src.replace(regExp2, '($&)')); // (aab), (ab) <- a가 1개 이상
var regExp3 = /a?b/g; // 문자열의 모든 영역에서 a는 0개이거나 1개이고 그 뒤에는 b가 들어가 있는 문자열을 의미
console.log(regExp3 + " : " + src.replace(regExp3, '($&)')); //(ab)c (ab)c (b)
{ }를 이용한 수량 표현
a{5}: a가 5개다
a{2,5}: a가 2~5개 사이
a{2,}: a가 2개 이상
a{,2}: a가 2개 이하
var src = "AA ABA ABBA ABBBA";
var regExp11 = /AB*A/g;
console.log(regExp11 + " : " + src.replace(regExp11, '($&)'));
// (AA) (ABA) (ABBA) (ABBBA)
var regExp21 = /AB+A/g;
console.log(regExp21 + " : " + src.replace(regExp21, '($&)'));
//AA (ABA) (ABBA) (ABBBA)
var regExp31 = /AB?A/g;
console.log(regExp31 + " : " + src.replace(regExp31, '($&)'));
//(AA) (ABA) ABBA ABBBA
// {}를 이용한 수량 표현
var regExp12 = /AB{0,}A/g;
console.log(regExp12 + " : " + src.replace(regExp12, '($&)'));
// (AA) (ABA) (ABBA) (ABBBA)
var regExp22 = /AB{1,}A/g;
console.log(regExp22 + " : " + src.replace(regExp22, '($&)'));
//AA (ABA) (ABBA) (ABBBA)
var regExp32 = /AB{0,1}A/g;
console.log(regExp32 + " : " + src.replace(regExp32, '($&)'));
//(AA) (ABA) ABBA ABBBA
메타문자와 [ ]
[ ab ] : a 또는 b
[ ^ ] : 해당 문자만 제외한 나머지
[a-z] : '소문자'만
[A-Z] : '대문자'
[0-9] : '숫자'만
범위 설정 가능
var str1 = "JavaScript JQuery Ajax";
// [ aj ] : a 또는 j를 찾아라
var regExp1 = /[aj]/ig; // a나 j를 찾아라 // 찾고 싶을 때 대괄호 많이 사용 // 많이 사용하는 이유 : 범위 설명 가능
console.log(regExp1 + " : " + str1.replace(regExp1, '($&)')); // (J)(a)v(a)Script (J)Query (A)(j)(a)x
// [ ^ ] : 해당 문자만 제외한 나머지
var regExp2 = /[^aj]/ig; // 대괄호 안에서의 ^ : 해당 문자만 제외한다는 의미 // a,j를 제외한 나머지
console.log(regExp2 + " : " + str1.replace(regExp2, '($&)')); // Ja(v)a(S)(c)(r)(i)(p)(t)( )J(Q)(u)(e)(r)(y)( )Aja(x)
var str2 = "123JavaScript";
// [a-z] : '소문자'만 체크
var regExp3 = /[a-z]/g;
console.log(regExp3 + " : " + str2.replace(regExp3, '($&)')); // 123J(a)(v)(a)S(c)(r)(i)(p)(t)
// [A-Z] : '대문자'만 체크
var regExp4 = /[A-Z]/g;
console.log(regExp4 + " : " + str2.replace(regExp4, '($&)')); // 123(J)ava(S)cript
// [0-9] : '숫자'만 체크
var regExp5 = /[0-9]/g;
console.log(regExp5 + " : " + str2.replace(regExp5, '($&)')); // (1)(2)(3)JavaScript
// 복수의 조건 함께 적용 (소문자, 숫자 둘 다) -> 순서바뀌어도 ok ex)0-9a-z / a-z0-9
var regExp6 = /[0-9a-z]/g;
console.log(regExp6 + " : " + str2.replace(regExp6, '($&)')); // (1)(2)(3)J(a)(v)(a)S(c)(r)(i)(p)(t)
추가 메타 문자 : \d, \w, \s, \D, \W, \S
\d : 숫자
\w : 영어, 숫자, _ (언더바)
\s : 공백문자(탭, 띄어쓰기, 줄바꿈)
\D : 숫자를 제외한 나머지
\W : 영어, 숫자, _(언더바)를 제외한 나머지
\S : 공백문자(탭, 띄어쓰기, 줄바꿈)를 제외한 나머지
var src = "A1 B2 c3 d_4 e:5` ffGG77--__-- 가\\n나\\n다";
// /\\d/ : 숫자만
var regExp1 = /\\d/g;
console.log(regExp1 + " : " + src.replace(regExp1, '($&)')); // A(1) B(2) c(3) d_(4) e:(5)` ffGG(7)(7)--__-- 가나다
// /\\w/ : 영어 숫자 _(언더바)만 / 공백, 특수문자, 한글 , 줄바꿈 제외 (나머지 제외(?))
var regExp2 = /\\w/g;
console.log(regExp2 + " : " + src.replace(regExp2, '($&)')); // (A)(1) (B)(2) (c)(3) (d)(_)(4) (e):(5)` (f)(f)(G)(G)(7)(7)--(_)(_)-- 가나다
// /\\s/ : 공백문자(탭,줄바꿈, 띄어쓰기)만
var regExp3 = /\\s/g;
console.log(regExp3 + " : " + src.replace(regExp3, '($&)')); // A1( )B2( )c3( )d_4( )e:5`( )ffGG77--__--( )( )( )( )( )( )( )( )가(
// /\\D/ : 숫자를 제외한 나머지
var regExp4 = /\\D/g;
console.log(regExp4 + " : " + src.replace(regExp4, '($&)'));
// /\\W/ : 영어, 숫자, _(언더바)를 제외한 나머지
var regExp5 = /\\W/g;
console.log(regExp5 + " : " + src.replace(regExp5, '($&)'));
// /\\S/ : 공백문자(탭, 띄어쓰기, 줄바꿈)를 제외한 나머지
var regExp6 = /\\S/g;
console.log(regExp6 + " : " + src.replace(regExp6, '($&)'));
Escaping : \
\ : \를 붙여 해당 문자를 문자자체로 인식하게 하는 기호
var src = "$12$ \\\\-\\\\ $35$"; // \\\\또한 \\를 인식시키기 위해 \\\\를 써서 \\ 하나를 인식시킴
// 목적 : $ 를 찾고 싶다.
// $ : 맨 뒤를 나타내는 앵커문자 -> $달러 자체 문자를 찾으려면?
var regExp1 = /$/ // $문자 자체를 찾고 싶은데 안나온다. 이유:앵커문자로 인식되기 때문에 이스케이핑으로 $를 인식하게해야함
console.log(regExp1 + " : " + src.replace(regExp1, '($&)')); // $12$ \\-\\ $35$()
var regExp1_2 = /\\$/
console.log(regExp1_2 + " : " + src.replace(regExp1_2, '($&)')); // ($)12$ \\-\\ $35$
var regExp1_3 = /\\$$/
console.log(regExp1_3 + " : " + src.replace(regExp1_3, '($&)')); // $12$ \\-\\ $35($)
var regExp3 = /\\\\/
console.log(regExp3 + " : " + src.replace(regExp3, '($&)')); // $12$ (\\)-\\ $35$
포인트 : .
딱 한글자 a와 b사이에 한글자가 들어가면 true 아니면 false
<button onclick="test11();"> 정규표현식 - 포인트. </button>
<script>
function test11(){
var regExp1 = /a.b/;
// a뒤 한글자 그 다음에 b가 나와야함
// 딱 한글자. a와 b사이에 한글자가 들어가면 true 아니면 false
// a와 b사이에 한글자가 들어가기만 하면 조건 성립이라 앞에 다른 문자가 와도 상관x
console.log(regExp1 + " : " + regExp1.test('ab')); // false
console.log(regExp1 + " : " + regExp1.test('a와b' )); // true
console.log(regExp1 + " : " + regExp1.test('a또는b')); // false
// xy다음 무조건 한글자가 나와야함
var regExp2 = /xy./;
console.log(regExp2 + " : " + regExp2.test('xyz')); // true
console.log(regExp2 + " : " + regExp2.test('wxy ')); // true // 공백도 한글지 취급되서 true
console.log(regExp2 + " : " + regExp2.test('xy와xx')); // true // 내 뒤에 알빠없고 '와'때문에 트루
console.log(regExp2 + " : " + regExp2.test('xy')); // false
// 걍 바로 뒤에 아무 글자나 오면 true
// /in.$/ : in뒤에 한 글자가 맨 뒤에 나와야한다
// $ 역할 : 맨 뒤 문자를 가리키는 앵커문자
var regExp3 = /in.$/;
console.log(regExp3 + " : " + regExp3.test('going')); // true
console.log(regExp3 + " : " + regExp3.test('inner')); // false // in 다음 한글자가 맨뒤 글자가 아니기에 false
728x90
반응형
