정규표현식, 정규식 활용 EditPlus에서 CSS 주석 제거 및 한 줄 만들기

2015.06.30 06:00
정규표현식.. EditPlus 정규식.. PHP, HTML, Javascript 등 각종 언어.. 주석 제거, 빈 줄 및 빈 공간 제거, 문자열 치환 등에 활용..

 

하악.. 역시 기초 없이 마구잡이 식으로 하는 공부는 힘들다. EditPlus라는 에디터로 소스 분석 및 편집을 하다가 '정규표현식'이라는 것을 알게 되었다. 간단히 정규식이라고도 불린다.

 

CSS 파일에서 용량을 줄이기 위해 주석빈 줄빈 공간을 다 지워주려고 하다 보니 이게 보통 작업이 아니었다.

 

뭐.. 내용이 몇 줄 안 되는 간단한 수준이라면 손으로 직접해도 되겠지만 문제는 수천 줄에 이를 정도로 내용이 길다는 것이 문제였다.

 

처음에는 매크로익스프레스를 이용해 작업을 할까 하다가 혹시나 EditPlus 에디터 자체적으로 이 문제를 해결할 방법이 없을까 싶어 검색 신공을 발휘했다.

 

이렇게 해서 정규표현식의 존재를 알게 된 것이다. 역시 체계 없이 독학을 하다 보니..

 

그런데, 어라? 정규식이라는 것이 어디서 많이 본 것 같았다.

 

그건 바로 .htaccess 파일에서 퍼머링크 및 리디렉션 작업을 해주면서 보았던 알 수 없었던 의미의 문자와 수식들과 많이 닮아 있었다.

 

당시 그것이 뭔지도 몰랐고, 무엇을 뜻하는지도 모르면서 그냥 무턱대고 외웠는데.. 흐미.. 그게 정규식이었다니..

 

이제서야 그동안 외계어처럼 난해해 보였던 정규식을 조금이나마 이해할 수 있게 되었다. ^^

 

정규표현식이란 사전적인 의미로는 특정한 규칙을 가진 문자열의 집합을 표현할 때 사용하는 형식의 언어라고 한다.

 

문자열 검색 혹은 문자열 치환을 위한 용도로 많이 사용된다고 하는데 본인 역시도 이것 때문에 정규표현식의 존재를 알게 된 것이다. ^^

 

정규표현식은 해독하기 난해하지만 일반 프로그래밍 언어로 문자열 검색 혹은 문자열 치환 등과 같은 작업을 할 경우에 비해 매우 간단하게 표현할 수 있다는 장점이 있다.

 

^x : x로 시작되는 문자열을 찾음.
x$ : x로 끝나는 문자열을 찾음.
.x : 임의의 한 문자 바로 다음에 x가 있는 문자열을 찾음.
x+ : x가 1번이상 반복되는 문자열 찾음.
x? : x가 0번 혹은 1번 있는 문자열 찾음.
x* : x가 0번이상 반복되는 문자열 찾음.
x|y : x 혹은 y를 찾음
(x) : ()안의 내용을 그룹화 함.
(x)(y) : 앞에서부터 순서대로 그룹 1번, 2번 부여
x{n} : x를 n번 반복한 문자를 찾음.
x{n,} : x를 n번 이상
x{n,m} : x를 n번이상 m번이하 반복한 문자 찾음.

 

[]는 그 내부에 있는 문자들을 찾으라는 의미로 사용된다. 내부에는 Meta 문자를 사용할 수 없으며, 사용될 경우 그 의미가 달라진다.

 

[xy] : 문자열 중에서 x와 y를 찾는다.
[^xy] : 문자열 중에서 x와 y를 제외한 나머지 문자를 찾는다.
[x-z] : x에서 z까지 그 사이의 문자를 찾는다.
\^ : 특수문자(^)에 '\'를 앞에 붙여서 일반 문자(^)로 만든다.
\b : 문자와 공백 사이 문자를 찾는다.
\B : 문자와 공백 사이가 아닌 값을 찾는다.
\d : 숫자를 찾는다.
\D : 숫자가 아닌 값을 찾는다.
\s : 공백 문자를 찾는다.
\S : 공백이 아닌 문자를 찾는다.
\t : 탭 문자를 찾는다.
\v : vertical tab 문자를 찾는다.
\w : '알파벳'과 '숫자', '_'를 찾는다.
\W : '알파벳'과 '숫자'와 '_'를 제외한 나머지를 찾는다.

 

이외에도 더 많은 정규표현식들이 있지만 그동안 한 번도 본적이 없는 것들은 다 빼버렸다.

 

이 정도만 해도 현재로선 충분할 것 같다. 뭐.. 부족하면 추후 더 추가하면 될 터.. 더 많이 해봐야 평생 한 번이라도 쓸 일이 있을지 없을지도 모르는데... 그리고 머리도 아프니 패스~

 

정규식은 사용하는 프로그래밍 언어나 툴에 따라 약간씩 차이가 있을 수 있다고 한다.

 

본인은 EditPlus 에디터로 정규식을 이용해 CSS 파일에 포함된 주석을 모두 제거하고 빈 줄과 빈 공간도 몽땅 제거한 후, 처음 의도했던 대로 한 줄로 만들어낼 수 있었다.

 

내가 작업한 방식은 다음과 같다.

 

주석은 '/*'으로 시작해서 '*/'으로 끝나는 부분인데 기존 CSS 파일의 주석 부분이 한 줄로 되어 있지 않고 \n으로 줄바꿈 되어 있어서 일단 한 줄로 만들어 줘야 했다.

 

1. \/\*.*\*\/ => 일단 한 줄로 되어 있는 주석을 모두 ''로 치환해서 제거함.
2. '지우기' -> '빈 줄 제거'
3. \n => ''로 치환해서 한 줄로 만듦.
4. \/\*([\s0-9a-zA-Z\*\-\/\.\,\=\'\`\(\)\:\<\[\]\+\!]*)\*\/ => ''로 치환해서 제거함.
5. \s+ => ''로 치환해서 모든 공백 제거함.

 

이렇게 CSS 파일을 최적화시키니 용량이 3분의 1 이하로 확 줄어서 놀랐다. 불필요한 요소가 이렇게 많이 들어가 있을 줄이야...

Posted by googlinfo(원래버핏)
이 댓글을 비밀 댓글로