프로그래밍 언어/Javascript :: Node.js :: ReactJS

번외. Javascript와 정규표현식

gyuho.kim 2018. 12. 7. 01:30


본 게시글은 생활코딩 egoing 강사님의 'Javascript' 강의를 듣고 정리한 내용입니다. 


번외편에서 다룬 정규표현식은 자바스크립트에서 어떻게 동작하는지 정도만 간단한게 학습해봅니다. 

더 자세한 정규표현식에 대한 공부를 위해서 아래 링크를 참고하시길 바랍니다.



정규표현식 Regular Expression

어떤 문자열에서 특정한 패턴에 해당하는 문자를 찾아내는 도구이다.


정규표현식으로 무얼 할 수 있나?

정규표현식으로 문자열의 검색 / 추출 / 치환 을 할 수 있다.


1. 정규표현식 사용하기

정규표현식을 사용하기 위해서 두 가지 단계를 거쳐야 한다.


① Compile

검색하고자 하는 문자열 패턴을 만드는 행위 , 컴파일 방식엔 두 가지 방법이 존재.


ⅰ) 정규표현식 리터럴 

1
var re = /a/;
cs

ⅱ) 정규표현식 객체 생성자

1
var re = new RegExp('a');
cs


② Execution

생성한 패턴을 통해 문자를 찾는 행위


(1) 정규표현식의 메소드 실행

  • RegExp.exec( ) : 정규표현식과 일치하는 문자를 포함하는 배열을 리턴, 값이 없다면 null 리턴
  • RegExp.test( ) : 정규표현식과 일치하는 문자가 있으면 true, 없으면 false 리턴
1
2
3
4
5
6
var re_gen = new RegExp('a');
var re_lit = /b/;
var str = 'AabcDeAa';
 
re_gen.exec(str); // str에서 'a'를 찾아서 배열을 리턴한다.
re_gen.test(str); // str에 'a'가 있으면 true , 없으면 false 반환 (Boolean)
cs


(2) 문자열 메소드를 이용한 실행

  • str.match( ) : 정규표현식과 일치하는 문자를 찾음. 정규표현식 메소드의 .exec( ) 와 비슷함
  • str.replace( ) : 정규표현식과 일치하는 문자를 찾아 다른 값으면 변경한 후 변경된 값을 리턴
1
2
3
4
5
6
var re_gen = new RegExp('a');
var re_lit = /b/;
var str = 'AabcDeAa';
 
str.match(re_lit); // str에서 'b'를 찾아 반환한다.
str.replace(re_lit, 'B'); // str에서 'b'를 찾아 'B'로 치환한다.
cs




2. 정규표현식 옵션

정규표현식 패턴에 검색 옵션을 부여할 수 있다.


(1) i 옵션 : insensitive 약자, 대소문자 구분 X 

1
2
3
4
5
var re = /a/i;
var str = 'Aabcde';
 
str.match(re);
 
cs


(2) g 옵션 : global 의 약자, 문자열 전체에서 일치하는 값을 모두 찾는다.

1
2
3
4
5
var re = /a/g;
var str = 'Aabcde';
 
str.match(re);
 
cs


3. 정규표현식 사례

(1) 캡처

1
2
3
4
var pattern = /(\w+)\s(\w+)/;
var str = "coding everybody";
var result = str.replace(pattern, "$2, $1");
console.log(result);
cs


(2) 치환

1
2
3
4
5
6
var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. ';
var result = content.replace(urlPattern, function(url){
    return '<a href="'+url+'">'+url+'</a>';
});
console.log(result);
cs