프로그래밍 언어/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 |