Javascript 정규표현식(regular expression)에 대한 기본

 

 

정규표현식이란?

 

정규표현식(regular expression)은 문자열에서 특정한 문자를 찾아내는 도구다. 이 도구를 이용하면 수십줄이 필요한 작업을 한줄로 끝낼 수 있다.

 

 

 

 

 

정규표현식의 생성

 

 

정규표현식은 두가지 단계로 이루어진다. 하나는 컴파일(compile) 다른 하나는 실행(execution)이다.

 

 

 

 

 

 

 

컴파일(compile)

 

컴파일은 검출하고자 하는 패턴을 만드는 일이다. 우선 정규표현식 객체를 만들어야 한다.

 

 

var pattern = /a/

var pattern = new RegExp('a');

 

위 두 가지 방법과 같이 'a'라는 문자를 컴파일하며 객체를 만들며 패턴을 생성해낸다.

 

 

 

 

 

 

 

 

정규표현식 실행(execution)

 

정규표현식을 컴파일해서 객체를 만들었다면 이제 문자열에서 원하는 문자를 찾아내야 한다.

 

 

 

 

RegExp.exec() 추출

console.log(pattern.exec('abcdef'));

 

 

• 위의 실행결과를 보면 인자 'abcdef'안의 문자열 a를 값으로 하는 배열을 리턴한다.
• 하지만 인자 'bcdef'에는 a가 없기 때문에 null을 리턴한다.

 

 

 

 

 

 

RegExp.test() 테스트 참 거짓

console.log(pattern.test('abcdef'));

 

 

• test는 인자 안에 패턴에 해당되는 문자열이 있으면 true, 없으면 false를 리턴한다.
• 위의 결과를 보면 a가 있는 인자는 true가 나왔지만 없는 인자는 fasle로 리턴하는 것을 확인 할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

문자열 실행(execution)

문자열 객체의 몇몇 메소드는 정규표현식을 사용할 수 있다. 

 

 

 

 

String.match() 매치

console.log('abcdef'.match(pattern));

 

• 'a'가 포함된 인자에 .match(a를 컴파일 해준 변수)을 해주면 결과에 'a'가 나오는 것을 확인 할 수 있다.
• 하지만 반대로 'a'가 들어있지 않은 인자를 .match(a를 컴파일 해준 변수)을 해준다면 결과가 null로 나오는 것 또한 확인 할 수 있다.

 

 

 

 

 

 

 

String.replace() 대체

console.log('abcdef'.replace(pattern, 'A'));

 

• .replace(a를 컴파일 해준 변수, 대체 문자) 을 해주면 'a'의 값이 설정해준 대체 문자로 바뀌는 것을 확인 할 수있다.
• 'A'로 대체 문자로 설정해주었더니 'a'가 'A'로 바뀌는 것을 결과로 확인 할 수있다.

 

 

 

 

 

 

 

 

 

 

 

옵션

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

 

 

 

 

 

i

var oi = /a/i;
console.log("Abcde".match(oi));

 

• 원래대로라면 대소문자를 구분하여 결과가 명확하게 나온 반면 컴파일을 위해 적은 'a'옆에 i를 붙이면 대소문자를 구분하지 않는 결과를 확인 할 수있다.

 

 

 

 

 

 

g

var og = /a/g;
console.log("abcdea".match(og));

 

 

• 아무리 지정한 객체의 수가 'abcdefa'처럼 'a'가 인자안에서 중복되더라도 컴파일을 통해 객체로 지정한 'a' 딱 하나만을 결과로 리턴 되도록 하는 것을 확인 할 수 있다.
• 하지만 파일을 위해 적은 'a'옆에 g 를 붙이면 중복된 'a'값의 검색된 모든 결과를 리턴하는 것을 확인 할 수있다.

 

 

 

 

 

 

 

 

실제 정규표현식 예시

 

 

 

캡쳐

var pattern = /(\w+)\s(\w+)/;
var str = "jin seok";
var result = str.replace(pattern, "$2, $1");
console.log(result);

 

• (\w+)\s(\w+)의 의미는 \w는 숫자 및 문자이며 \s는 띄어쓰기로 볼 수 있다. \w 뒤에 붙은 +는 그 뒤에 따라오는 하나 이상의 문자를 설정하는 것을 의미할 수 있다.
• .replace(pattern, 대체 값)을 이용하여 대체 값으로 "$2, $1"을 넣어주었는 이 .replace의 괄호안의 패턴은 마치 변수처럼 재사용할 수 있다. 이 때 기호 $를 사용하였는데 이 코드는 jin과 seok의 순서를 역전시킨 것을 볼 수있다.

 

 

 

 

 

치환

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '블로그 : https://k0502s.tistory.com/57?category=936879 입니다. 네이버 : http://naver.com 입니다. ';
var result = content.replace(urlPattern, function(url){
    return '<a href="'+url+'">'+url+'</a>';
});
console.log(result);

 

• 위의 코드는 정규표현식을 사용하여 본문 중의 URL을 링크 html 태그로 교체하는 결과값을 확인 할 수있다.
• 코드를 분석해보자면 content의 변수안에 있는 url들과 미리 설정해둔 컴파일 객체 변수 urlPattern을 객체 실행을 위한 .replace에 활용하였다. 
• content 변수안의 url들이 링크 html 태그로 교체하도록 하는 함수식 function()을 .replace 괄호 안의 대체 값으로 설정해주었다는 것을 확인 할 수있다.