정규표현식(Regular Expression)

정규표현식(regular expression)은 문자열에서 특정한 문자나 정보, 패턴를 찾아내는 도구다. 추출, 확인(test), 치환 등의 역할을 한다. 이 도구를 이용하면 수십줄이 필요한 작업을 한줄로 끝낼 수 있다.

정규표현식 생성

  1. 컴파일(compile)

  2. 실행(execution)

  1. 컴파일은 검출하고자하는 패턴을 만드는 일이다. 우선 정규표현식 객체를 만들어야 한다. 객체를 만드는 방법은 두가지가 있다. a라는 텍스트를 찾아내는 정규표현식을 만들어보자.

정규표현식 리터럴

var pattern = /a/

문자열 a뒤에 .은 특수하다. 1개의 문자를 의미하는데, 어떤 문자이든 상관은 없다. 그리고 .앞에 'a'라는 문자가 와야한다. 쉽게 표현해서 'a☐'라고 생각하면 된다.

var pattern = /a./

정규표현식 객체 생성자

var pattern = new RegExp('a');//찾고자 하는 문자

정규표현식 메소드 실행

ex) url 또는 이메일에 해당하는 부분만 추출하고 싶다.

RegExp.exec() : 정보추출 목적. RegExp는 정규표현식 객체이고, 정규표현식이 찾고자하는 대상(객체)을 정규표현식 실행 대상을 첫 번째 인자로 전달하여 찾아서 배열로 리턴한다.

ex1)

console.log(pattern.exec('abcde'));//정규표현식 실행 대상은 'abcdef'이고, 결과는 ["a"]가 나온다.
console.log(pattern.exec('bcdef'));//정규표현식 실행 대상은 'bcdef'이고, 결과는 null이 나온다.

ex2)

var pattern = /a./
console.log(pattern.exec('abcde'));//정규표현식 실행 대상은 'abcdef'이고, 결과는 ["ab"]가 나온다.

RegExp.test() : 정보 유무 test 목적. 찾고자 하는 대상이 있는지 없는지에 따라 true 또는 false로 리턴한다.

문자열 메소드 실행

String.match() : RegExp.exec()와 비슷하다.

var pattern = /a/;
var str = 'abcdef';

str.match(pattern);//실행 결과는 ["a"]

String.replace() : 문자열에서 패턴을 검색해서 이를 변경한 후에 변경된 값을 리턴한다.

var pattern = /a/;
var str = 'abcdef';

str.replace(pattern,'A');//search pattern which is 'a' and replace it with 'A'

정규표현식의 옵션

정규표현식 패턴을 만들 때 옵션을 설정할 수 있다. 옵션에 따라서 검출되는 데이터가 달라진다.

i

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

//option i is not applied
var xi = /a/;
"Abcde".match(xi);//result is null
console.log("Abcde".match(xi);//null
//apply option i
var oi = /a/i;
"Abcde".match(oi);//result is ["A"}
console.log("Abcde".match(ok);//["A"];

g

g를 붙이면 검색된 모든 결과를 리턴한다. 'global' 의 약자이다.

var xg = /a/;
console.log("abcdea".match(xg);//["a"]
var og = /a/g;
console.log("abcdea".match(og));//["a","a"]

아래 코드는 대소문자를 구분하지 않고 모든 문자를 찾는 코드이다.

var ig = /a/ig;
"AabcdAa".match(ig);
//result is ["a","a","A","a"]

사례

캡처

괄호안의 패턴은 마치 변수처럼 재사용할 수 있다. 이 때 기호 $를 사용하는데 아래 코드는 coding과 everybody의 순서를 역전시킨다.

var pattern = (\w+)\s(\w+)/;
var str = "coding everybody";
var result = str.replace(pattern,"$2,$1");//object.replace(searchValue, replaceValue)이다.
console.log(result);//결과는 everybody, coding

$2는 pattern에서 2번째 그룹(2번째로 나오는 괄호)을 의미한다.

var result = str.replace(pattern,"$2,$1");

(\w+)\s(\w+) 정규식표현을 시각화해보자.

정규표현식을 시각화한 것

괄호는 그룹을 의미한다. \w는 AZ, a~z, 0~9 등의 문자를 의미한다.+는 앞의 문자가 하나 이상일 때 패턴이 유효해진다. 즉, 여기서는 'A'와 'AA' 모두 해당된다. \s는 공백을 의미한다. 결과적으로 (문자) (공백) (문자) 이다.

치환

아래 코드는 본문 중의 URL을 링크 html 태그로 교체한다.

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

여기서 function은 값으로의 함수로서 쓰였고, url을 찾을 때마다 2번째 매개변수인 함수가 내부적으로 replace 메소드를 호출한다. 첫번째 url이 검색됐을 때 그 url은 2번째 매개변수인 함수의 인자로 전달된다.그리고 그 인자를 받아서 어떠한 텍스트 형식으로 변환시킨다.그리고 최종적으로 변환된 문자열을 리턴한다.

Reference

PreviousUI, API 그리고 문서보는 법Next함수 지향

Last updated

Was this helpful?