javascript - 정규표현식

Front-End/javascript 2019. 6. 11. 21:46
728x90
반응형

  -정규표현식-

 

  문자열에서 특정한 문자를 찾아내는 도구이다.

 

  이 도구를 이용하면 수십줄이 필요한 작업을 한 줄로 끝낼 수 있다.

 

 

 

  -정규표현식 생성-

 

  정규표현식은 두가지 단계로 이루어진다.

 

  하나는 컴파일 (compile) 다른 하나는 실행 (execution) 이다. 

 

 

 

  -컴파일-

 

  컴파일은 검출하고자 하는 패턴을 만드는 일이다.

 

  우선 정규표현식 객체를 만들어야 한다.

 

  객체를 만드는 방법은 두가지가 있다.

 

  a라는 텍스트를 찾아내는 정규표현식의 2가지 방법이다.

 

 

 



  -패턴을 만드는 방식-


  1. 정규표현식 리터럴


  var pattern = /a/    //  "/"와 "/" 사이의 문자열을 pattern에 넣는다. (이것을 사용해 문자 찾기 가능)


  2. 정규표현식 객체 생성자


  var pattern = new RegExp('a');     // RegExp 객체를 만들어서 찾고자 하는 문자 'a'를 넣어서 pattern에 넣는다.

 

 

 

  -실행-

 

  컴파일로 만든 패턴을 가지고 패턴을 실행해서 문자를 찾는것.

 

 

 

  -정규표현식 메소드 실행-

 

 

  
  RegExp.exec( ) 메소드 (해당 문자열 추출) : 해당하는 문자열이 있으면 그 문자열을 값으로 하는 배열을 리턴하고 없으면 null을 리턴한다.


  RegExp.test( ) 메소드 (해당 문자열 있는지 테스트) : 패턴에 해당되는 문자열이 있으면 true, 없으면 false를 리턴한다.

 

 

 

 -정규표현식 메소드 사용 예제-

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var pattern = /a/ //pattern 변수에 a라는 패턴을 넣음.
undefined
 
console.log(pattern.exec('sdfsdf')); //exec( ) 메소드를 사용해서 'sdfsdf' 안에는 'a'라는 문자열이 없기 때문에 null을 리턴한다.
VM1136:1 null
undefined
 
console.log(pattern.exec('basd')); //exec( ) 메소드를 사용해서 'basd' 안에는 'a'라는 문자열이 있기 때문에 ["a"] 배열을 리턴한다.
VM1211:1 ["a"index: 1input: "basd", groups: undefined]
undefined
 
console.log(pattern.test('bjxs')); //test( ) 메소드를 사용해서 'bjxs' 안에는 'a' 라는 문자열이 없기 때문에 false 를 리턴
VM1286:1 false
undefined
 
console.log(pattern.test('ards')); //test( ) 메소드를 사용해서 'ards' 안에는 'a' 라는 문자열이 있기 때문에 true 를 리턴
VM1340:1 true
 
cs

 

  

 

-정규표현식 (문자열) 메소드 사용 예제-

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var a = /2/ //a라는 변수에 2라는 패턴을 넣는다.
undefined
 
console.log('asdj2'.match(a)); // 변수 a안에 있는 2라는 패턴이 'asdj2' 안에 있기 때문에 ["2"] 를 출력
VM1486:1 ["2", index: 4, input: "asdj2", groups: undefined]
undefined
 
console.log('sndqa'.match(a)); //변수 a안에 있는 2라는 패턴이 'sndga' 안에 없기 때문에 null을 출력
VM1521:1 null
undefined
 
console.log('asdfa22'.replace(a,'11')); //변수 a안에는 2라는 패턴이 1개 들어있기 때문에 'asdfa22'에서 앞에 있는 2만 '11'로 교체해준다.
VM1653:1 asdfa112
undefined
 
console.log('asdfa55'.replace(a,'11')); //변수 a안에 있는 2라는 패턴이 'asdfa55'에는 없기 때문에 'asdfa55' 가 그대로 출력된다.
VM1681:1 asdfa55
undefined
 
cs

 

 

-옵션-

 

정규표현식 패턴을 만들 때 옵션을 설정할 수 있다.

옵션에 따라서 검출되는 데이터가 달라진다.

 

i

 

i를 붙이면 대소문자를 구분하지 않는다.

 

 

 

g

 

g를 붙이면 검색된 모든 결과를 리턴한다.

 

 

또한 i와 g를 같이 사용할 수도 있다.

(대문자, 소문자 구분하지 않고 모든 문자를 리턴한다는 뜻)

 

 

 

-옵션 사용 예제-

 

1
2
3
4
5
6
7
8
9
10
11
12
var a = /a/i // 패턴에 'i'를 붙여서 대소문자 구분하지 않고 출력되게 함.
undefined
 
"Aadnsh".match(a); // 대소문자를 구분하지 않고 'a'가 한개이기때문에 가장 앞에있는 'A'를 배열에 담아 출력함
["A", index: 0, input: "Aadnsh", groups: undefined]
 
var b = /b/g // 패턴에 'g'를 붙여 검색된 모든 결과를 리턴 (즉, 모든 'b'를 검색해서 리턴한다는 뜻.. 개수에 관계없이)
undefined
 
"bBBASb".match(b); // 'b'가 들어간 것이 2개이므로 'b'가 2개 출력된다.
(2) ["b", "b"]
 
var c = /c/ig // 패턴에 'i'와 'g'를 붙여서 대소문자를 구분하지 않고, 'c'에 개수에 상관없이 모든 'c'를 리턴한다는 뜻.
undefined
 
"cCsjJDJcCc".match(c); //대문자 'c'와 소문자 'c' 가 모두 리턴되는것을 확인할 수 있다.
(5) ["c", "C", "c", "C", "c"]
 
cs

 

 

-캡처-

 

괄호안의 패턴은 마치 변수처럼 재사용할 수 있다. 이 때 기호 $를 사용하는데 순서를 역전시킬때도 사용한다.

 

 

-예제-

1
2
3
4
5
6
7
8
 
var a = /(\w+)\s(\w+)/; // \w는 한개의 문자열을 의미, // +는 그 문자열의 개수를 의미, //\s는 공백을 의미한다.
undefined
 
var str = "Java Spring"; //str변수에 문자열을 저장
undefined
 
var result = str.replace(a,'$2-$1'); //replace는 치환할때 사용하는 메소드, a변수에 담긴 패턴을 사용하고 $를 사용해 문자순서를 뒤바꾼다.
undefined //그리고 공백은 '-' 로 치환되서 출력 된다.
 
console.log(result); //result 변수에 담긴 값을 출력함
 
VM547:1 Spring-Java
 
cs

 

 

-치환-

 

URL을 링크 html 태그로 교체한다. (이건 나중에 정규표현식만 설명한 강의 따로봐야될듯. 어려움)

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

728x90
반응형

'Front-End > javascript' 카테고리의 다른 글

javascript - 함수와 콜백  (0) 2019.06.12
javascript - 유효범위 (전역변수, 지역변수)  (0) 2019.06.11
javascript - UI와 API  (0) 2019.06.10
javascript - 라이브러리 (jQuery)  (0) 2019.06.09
javascript - 모듈  (0) 2019.06.09
: