[Js] 정규 표현식 | 컴파일? | 정규표현식 리터럴

해당 포스팅은 "생활코딩"의 이고잉 님의 강의를 기반으로 올린 게시글 입니다.

상업적인 용도가 아닌, 개인 공부 정리 목적으로 올리는 글임을 미리 알립니다.

 

 

 

---

정규표현식 

정규표현식(regular expression)은 문자열에서 특정한 문자를 찾아내는 도구다.

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

 

정규표현식은 하나의 언어라고 할 수 있다.

그러므로 본 수업에서 정규표현식의 모든 것을 다루는 것은 불가능하다.

 

본 수업은 아래와 같은 전략을 취하고 있다.

 

1. 입문자에게 정규표현식이 무엇인가에 대한 개념을 알려준다. 초심자에게는 사용법까지 공부하는 것은 무리다. 나중에 문자를 처리해야하는 상황이 생겼을 때 이곳을 찾아오거나 본 수업을 완주했을 때 마지막 단계로 본 수업을 공부한다.
2. 정규표현식을 이미 알고 있는 개발자에게는 정규표현식을 자바스크립트에서는 어떻게 사용하는가를 알려준다. 
3. 정규표현식 자체에 대한 학습이 필요하다면 정규표현식 수업을 공부하자.

 

 

정규표현식 생성

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

하나는 컴파일(compile) 다른 하나는 실행(execution)이다. 우선 컴파일부터 알아보자.

 

 

컴파일

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

우선 정규표현식 객체를 만들어야 한다. 객체를 만드는 방법은 두가지가 있다.

a라는 텍스트를 찾아내는 정규표현식을 만들어보자.

 

 

정규표현식 리터럴

<script>
	var pattern = /a/
</script>

슬래시와 슬래시 사이 a가 우리가 찾고자 하는 대상이라는 것을 알려주는 것이다.

이것을 pattern이라는 변수에 담음으로써, 우리가 찾고 싶은 내용을 찾을 수 있는 것이다.

 

정규표현식 객체 생성자

<script>
	var pattern = new RegExp('a');
</script>

new로 정규표현식 객체를 만들어 주는 것이고 'a'라는 문자를 찾는다는 것을 알려주는 것이다.

두가지 모두 같은 결과를 만들지만 각자가 장단점이 있다. 

 

 

위의 내용은 정규표현식의 아주 작은 조작(사용)법이기 때문에 

실제 안에 들어가는 내용을 정규표현식에 문법에 맞게 자신이 필요한 것을 찾아내는 실습을 해보자.

 

정규표현식을 사용하는 이유는 추출, test, 치환 등의 있을 것이다.

먼저 첫번째 방법을 살펴보자.

 

 

정규표현식 메소드 실행

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

 

RegExp.exec() (exec : 실행의 약자)

<script>
	console.log(pattern.exec('abcdef')); // ["a"]
</script>

실행결과는 문자열 a를 값으로 하는 배열을 리턴한다.

 

 

 

exec는 실행을 의미한다.

오른쪽의 경우 . 이 의미하는 것은 어떠한 문자던, 1개의 문자를 의미하기 때문에 2개가 출력된다.

 

 

아래와 같이 패턴이 존재하지 않는경우!

<script>
	console.log(pattern.exec('bcdefg')); // null
</script>

인자 'bcdef'에는 a가 없기 때문에 null을 리턴한다.

 

RegExp.test()

test는 인자 안에 패턴에 해당되는 문자열이 있으면 true, 없으면 false를 리턴한다.

<script>
    console.log(pattern.test('abcdef')); // true
    console.log(pattern.test('bcdefg')); // false
</script>

 

 

즉 exec()를 사용하는 것은 보통 추출의 경우이고, test를 사용하는 경우는 우리가 찾는 정보가

있는지 없는지 존재 유무를 test하는 용도로 사용을 하는 것이다.

 

각 용도에 맞게 함수를 잘 이용하는 것 또한 중요하다. 

 

 

문자열 메소드 실행

 

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

 

String.match()

RegExp.exec()와 비슷하다. 즉 패턴을 찾아주고 있다면 추출 해주는 것이다.

<script>
    console.log('abcdef'.match(pattern)); // ["a"]
    console.log('bcdefg'.match(pattern)); // null
</script>

 

String.replace()

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

<script>
    console.log('abcdef'.replace(pattern, 'A'));  // Abcdef
</script>

 

옵션

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

 

i 옵션

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

<script>
    var xi = /a/;
    console.log("Abcde".match(xi)); // null
    var oi = /a/i;
    console.log("Abcde".match(oi)); // ["A"];
</script>

 

g 옵션

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

<script>
    var xg = /a/;
    console.log("abcdea".match(xg)); //한번만 a가 찾아진다.
    var og = /a/g;
    console.log("abcdea".match(og)); // a의 갯수만큼 출력된다.
</script>

 

같이 사용한다면, 무언가를 찾을 때 대소문자를 구별하지 않고 문자열내에 모든 값을 찾아낸다는 뜻이다.

 

캡처

괄호안의 패턴은 마치 변수처럼 재사용할 수 있다.

이 때 기호 $를 사용하는데 아래 코드는 coding과 everybody의 순서를 역전시킨다.

 

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

 

w는 문자를 의미하며, a-zA-Z0-9를 의미한다.

+ 는 수량자 : 앞에 있는 패턴이 1개 이상인 경우 해당한다.(ex: # = x(패턴에 없는 경우), a  = ok)

s 는 스페이스 : 공백이 있다면 앞에 부분조건을 만족시킨다.

 

즉, 위의 코드의 실행결과는 everybody, coding으로 나온다.

이유는 result라는 변수에 str변수 내용을 저장하였는데, 이를 패턴으로 나누어 저장하였고

$는 특수한 의미를 가지는데, $2를 하면 문장패턴중 두번째 괄호(위 코드에선 '\w+'를 의미) 를 뜻하고,

replace는 치환을 해주는 함수를 의미한다.

 

분석해보면 pattern, " " 즉 큰따옴표 안에 들어가는 내용이 str이라는 문자를 어떻게 치환할 것인지를 기재하는 것인데,

이 부분에 $2, $1과 같은 형태로 치환을 한다고 하였으니 $2 즉 everybody가 출력되고 ,(콤마)를 찍게 된 후

마지막으로 $1 즉 coding이라는 문자를 출력하게 해주는 것이다.

결과적으로 everybody, coding이 출력된다.

 

 

위와 같이 정규식을 시각화하여 확인해볼 수도 있다.

 

 

아래 주소를 참고해서 정규표현식을 실습해보자!

lucete1230-cyberpolice.tistory.com/44

[포렌식] 정규표현식

 

이렇게 위와 같이 그룹을 지정하고, 지정된 그룹을 가져와서 사용하는 기능(개념)을 "캡처"라고 한다.

 

 

치환

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

<script>
    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);
</script>

결과는 아래와 같다.

 

 

 

참고

• 생활코딩 정규표현식 수업
• 정규표현식을 시각화
• 정규표현식 빌더