JavaScript 정규식 정규표현식 알짜만 빼먹기

JavaScript 정규식 정규표현식 알짜만 빼먹기

이번 포스팅에서는 Javascript의 정규표현식, 줄여 정규식에 대해

알짜만 쏙쏙 빼먹는 시간을 갖어보겠습니다.

 

우선, 정규식이 뭐냐?

MDN의 설명을 좀 참고하면,

정규 표현식은 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서 정규 표현식 또한 객체 입니다.

라고 정의하고 있네요.

 

쉽게 말해 보다 쉽게 문자열 패턴을 만드는 방법입니다.

문자열 패턴을 만드는 방법이니 문자열 함수에서 주로 사용이 되겠죠?

replace 나 split, match, search 등과 같이 사용하는 것을 보신 적이 있으실 꺼에요.

 

예를 들어보도록 하죠.

Javascript 에는 java 와 같은 replaceAll 함수가 없습니다. 그래서 대신 replace 함수를 사용해야 하는데,

정규표현식을 사용하면 replace를 replaceAll과 같이 사용할 수 있습니다.

 

var a = "abbbccc";
var b = a.replace("b", "");
console.log(b); // abbccc
var c = a.replace(/b/gi, "");
console.log(c); // accc

 

위의 코드에서 슬래쉬('/')를 사용한 /b/gi 이 부분이 바로 정규표현식 입니다.

'슬래쉬 사이에 모든(g) 문자를, 대소문자 구분없이(i) 치환 하겠다' 가 됩니다.

 

여기서 사용된 'g' 나 'i' 를 수정자(Modifier) 라고 합니다.

Modifier	Expression
g	모든 전역 (첫번째 일치하는 문자열을 찾아도 끝까지 찾는다)
i	대소문자 구분 없이
m	멀티라인도 수행
u	패턴을 유니코드 코드 포인트의 나열로 취급
y	"stick" 검색을 수행, 지정된 인덱스로 문자열 검색

정규 표현식이 어떤 것인지 느낌이 오시나요?

그럼 정규표현식을 만드는 또 다른 방법에 대해서 알아보겠습니다.

 

위의 코드는 정규표현식을 리터럴 방식으로 선언한 것입니다.

또 다른 방법으로는 RegExp 객체의 생성자 함수를 호출하는 방법이 있습니다.

 

var a = "abbbccc";
var b = a.replace("b", "");
console.log(b); // abbccc
var c = a.replace(/b/gi, "");
var d = a.replace(new RegExp("b", "gi"), "");
console.log(d); // accc

 

RegExp의 매개변수는 정규표현식, 수정자 입니다.

 

정규식에는 위와 같이 일반 문자열 뿐만 아니라

특수문자를 사용하여 좀더 복잡한 정규식을 만들 수 있습니다.

 

사용법은 아래의 Link를 참고하세욧

Link : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D

정규 표현식

이제 자주 사용되는 정규표현식을 알아보도록 하겠습니다.

 

[문자열 중 숫자만 추출 / 문자열 중 문자만 추출]

 

var a = "abc123";
var b = a.replace(new RegExp("[(0-9)]", "gi"), "");
console.log(b);  // abc
var c = a.replace(new RegExp("[^(0-9)]", "gi"), "");
console.log(c); // 123

 

[천단위 콤마 찍기]

 

var a = "10000000";
var b = a.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
console.log(b); // 10,000,000

 

[URL / 이메일 하이퍼링크 치환]

 

var container = document.getElementById(id);
var doc = container.innerHTML;
var regURL = new RegExp("(http|https|ftp|telnet|news|irc)://([-/.a-zA-Z0-9_~#%$?&=:200-377()]+)","gi");
var regEmail = new RegExp("([xA1-xFEa-z0-9_-]+@[xA1-xFEa-z0-9-]+\.[a-z0-9-]+)","gi");
container.innerHTML = doc.replace(regURL,"<a href='$1://$2' target='_blank'>$1://$2</a>").replace(regEmail,"<a href='mailto:$1'>$1</a>");

 

[모든 공백 제거]

 

var data = "a b    c        d";
data = data.replace(/\n/g, "");        //행바꿈제거
data = data.replace(/(\s*)/g, "");  //모든 공백 제거
data = data.replace(/\r/g, "");        //엔터제거
console.log(data); // abcd