정요섭

정요섭

Front-end 개발자가 되기 위한 코린이

10.정규표현식

5 minute read

정규표현식 MDN

1. 정규표현식(1)

1.1 정규표현식의 목적

  • 정규표현식은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용한다.

  • 반복문과 조건문을 사용한 복잡한 코드도 정규표현식을 이용하면 매우 간단하게 표현할수 있다. 하지만 주석이나 공백을 혀용하지 않고 여라가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 못하는 문제가 있다.

1.2 정규표현식의 패턴

const a = /pattern/i;

1.3 패턴

  • 패턴을 찾고자 하는 대상을 문자열로 지정한다. 이때 문자열의 따음표는 생략한다. 따음표를 포함하면 따음표까지도 검색한다.

  • 패턴은 특별한 의미를 가지는 메타문자 또는 기호로 표현할수 있다.

1.4 플래그

Flag Meaning Decscription
i ignore Case 대소문자를 구별하지 않고 검색
g gobal 문자열 내의 모든 패턴을 검색
m Multi Line 문자열의 행이 바뀌더라도 검색을 계속한다.
  • 플래그는 옵션이므로 선택적으로 서용한다. 플래그를 사용하지 않은 경우 문자열 내 검색 매칭 대상이 1개 이상이더라도 첫번째 매칭한 대상만을 검색하고 종료한다.
const targetStr = "is this all there is?";
const regexr = /is/;

console.log(targetStr.match(regexr)); // ['is',index:5 ...] => 문자열 내 검색 매칭 대상이 1개 이상이더라도 첫번재 매칭한 대상만을 검색한다.

const targetStr = "is this all there is?";
const regexr = /is/gi; //대소문자 구별없이 검색 , 문자열내 모든 패턴 검색

console.log(targetStr.match(regexr)); //["is","is","is"]

1.5 패턴의 종류

1.5.1 임의의 문자

const targetStr = "is this all there is?";
const regexr = /.../;

console.log(targetStr.match(regexr)); //flag 가 없으므로 가장 맨처음의 패턴 3자리를 출력한다. [is ] (띄어쓰기도 하나의 패턴으로 인식)
  • .은 임의의 문자 한개를 의미한다. 문자의 내용은 무엇이든지 상관없다. 위의 경우 .를 3개 연속하여 패턴을 생성하였으므로 패턴과 일치하는 3자리 문자를 추출한다.
const targetStr = "is this all there is?";
const regexr = /.../g;
// ["is ", "thi", "s a", "ll ", "the", "re ", "is ", "aa ", "bb ", "aa?"]

console.log(targetStr.match(regexr)); //flag를 global로 지정했으므로, 전채에서 임의의 3개의 모든 패턴을 가져온다.
  • 플래그를 지정해줬기 때문에 3개 연속하는 패턴을 모두 가져왔다.
const targetStr = "is this all there is?";
const regexr = /./g;

console.log(targetStr.match(regexr)); //["i", "s", " ", "t", "h", "i", "s", " ", "a", "l", "l", " ", "t", "h", "e", "r", "e", " ", "i", "s", " ", "a", "a", " ", "b", "b", " ", "a", "a", "?"]

1.5.2 특정 문자를 검색

const targetStr = "AA BB Aa Bb";
const regexr = /A/;

console.log(targetStr.match(regexr)); //'A'
// flag 가 없기때문에 하나만 보여짐
  • flag가 없기 때문에 첫번째 결과만 반환한다.
const targetStr = "AA BB Aa Bb";
const regexr = /A/gi;

console.log(targetStr.match(regexr)); //['A','A','A','a']
  • flag가 gi 가 있기 때문에 문자열 전체중 일치하는 패턴을 모두 가져오며 , 대소문자 구별없이 가져온다.

1.5.3 반복되는 패턴

const targetStr = "AA BB Aa Bb";
const regexr = /A+/g;

console.log(targetStr.match(regexr)); //['AA','A'] , //['A','AA', 'A']가 아니라는것에 주의하자
  • 앞선 패턴을 최소 한번 반복하려면 앞선 패턴뒤에 + 를 붙인다. 즉 A+ 패턴은 A로만 이러어진 문자열(A,AA,AAA,AAAA….)을 의미한다.

1.5.4 or 패턴

const targetStr = "AA BB Aa Bb";
const regexr = /A|B/g;

console.log(targetStr.match(regexr)); //['A','A','B','B','A','B']
  • 를 사용하면 or의 의미를 가지게 된다. 
const targetStr = "AA AAA BB Aa Bb";
const regexr = /A+|B+/g;

console.log(targetStr.match(regexr)); //['AA', 'AAA' ,'BB','A','B']
  • 위 예제는 패턴을 or로 한번 이상 반복하는 것인데 간단히 표현하면 아래와 같다. []내의 문자는 or로 동작한다. 그뒤에 +를 사용하여 앞선 패턴을 한번 이상 반복한다.
const targetStr = "AA AAA BB Aa Bb";
const regexr = /[AB]+/g;

console.log(targetStr.match(regexr)); //['AA', 'AAA','BB','A','B']

1.5.5 범위를 지정해서 사용한 패턴

const targetStr = "AA BB ZZ Aa Bb";
const regexr = /[A-Z]+/g;

console.log(targetStr.match(regexr)); //['AA', 'BB', 'ZZ', 'A' , 'B']
  • 범위를 지정하려면 [] 내에 -를 사용한다. 아래의 경우 대문자 알파벳을 추출한다.

1.5.6 범위를 지정해서 사용하는 패턴(2)

const targetStr = "AA BB ZZ Aa Bb";
const regexr = /[A-Za-z]+/g; //사실상 targetStr의 모든 문자열을 가져온다고 보면된다.

console.log(targetStr.match(regexr)); //['AA' , 'BB' , 'Aa' , 'Bb']

const targetStr = "AA BB ZZ Aa Bb";
const regexr = /[A-Z]+/gi;

console.log(targetStr.match(regexr)); //['AA' , 'BB' , 'Aa' , 'Bb']
  • 대소문자를 구별하지 않고 알파벳을 추출하려면 아래와 같이 한다.
const targetStr = "AA BB ZZ Aa Bb 24,000";
const regexr = /[0-9]+/g;

console.log(targetStr.match(regexr)); //['24','000']
  • 숫자를 추출하는 방법
const targetStr = "AA BB ZZ Aa Bb 24,000";
const regexr = /[0-9,]+/g;

console.log(targetStr.match(regexr)); //['24,000']

  • 컴마 때문에 결과가 분리되므로 패턴에 포함시킨다.

  • 이것을 간단하게 표현하는 방법은 아래와 같다. \d 는 숫자를 의미한다. \D 는 \d 와 반대로 동작한다.

const targetStr = "AA BB ZZ Aa Bb 24,000";
const regexr = /[\d,]+/g;

console.log(targetStr.match(regexr)); //['24,000']
  • ‘0’~’9’가 아닌 문자 또는 ‘,’가 한번이상 반복되는 문자열을 반복 검색
const targetStr = "AA BB ZZ Aa Bb 24,000";
const regexr = /[\D,]+/g;

console.log(targetStr.match(regexr)); //['AA BB Aa Bb ', ',']
  • \w는 알파벳과 숫자를 의미한다. \W는 \w와 반대로 동작한다.
const targetStr = "AA BB ZZ Aa Bb 24,000";
const regexr = /[\w,]+/g;

console.log(targetStr.match(regexr)); //[ 'AA', 'BB', 'Aa', 'Bb', '24,000' ]
  • 알파벳과 숫자가 아닌 문자 또는 ‘,’가 한번이상 반복되는 문자열을 반복검색
const targetStr = "AA BB ZZ Aa Bb 24,000";
const regexr = /[\W,]+/g;

console.log(targetStr.match(regexr)); //[ '','','','',',']

1.5.7 자주 사용하는 정규화 표현식

  • 특정 단어로 시작하는지 검색한다.
const url = "http://example.com";

const regexr = /^http/;

console.log(targetStr.test(regexr)); //true
  • 특정 단어로 끝나는지 검사한다.
const fileName = "index.html";

const regexr = /html$/; //http로 끝나는지 검사

console.log(targetStr.test(regexr)); //true
  • 숫자인지 검사한다
const fileName = "12345";

const regexr = /^\d+$/; //http로 끝나는지 검사

console.log(targetStr.test(regexr)); //true
  • 하나 이상의 공백으로 시작하는지 검사한다.
const fileName = " Hi!";

const regexr = /^[\s]+/; //1개 이상의 공백으로 시작하는지 검사

console.log(targetStr.test(regexr)); //true
  • 아이디로 사용가능한지 검사한다.(영문자, 숫자만 허용 , 4~10자리)
const id = "abc123";
const regexr = /^[A-Za-z0-9]{4,10}$/; //1개 이상의 공백으로 시작하는지 검사
  • 메일 주소 형식에 맞는지 검사한다.
const email = "ungmo2@gmail.com";

const regexr = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;

console.log(regexr.text(email)); //true

-핸드폰 형식에 맞는지 검사한다

const cellphone = "010-8483-2920";

const regexr = /^\d{3}-^\d{3,4}-\d{4}$/;
  • 특수문자 포함 여부를 검사한다.
const targetStr = "abc#123";

const regexr = /[^A-Za-z0-9]/gi;

console.log(regexr.test(targetStr)); //true
  • 특수문자 제거
console.log(targetStr.replace(regxr,''))); //abc123

2. 정규표현식(2)

  • 자바스크립트는 정규표현식을 위해 RegExp 객체를 지원한다. RegExp 객체를 생성하기 위해서는 리터럴방식과 RegExp 생성자 함수 방식이 있는데 일반적으로 리터럴방식을 사용한다.

2.1 리터럴 방식

//정규식 리터럴
- const myRegExp = /ab+c/i

//생성자 리터럴
- const myRegExp = new RegExp('ab+c','i');
- const myRegExp = new RegExp(/ab+c/,'i');
- const myRegExp = new RegExp(/ab+c/i); //ECMAScript 6

3. 정규식 리터럴 vs 생성자 리터럴

  • 정규식 리터럴은 스크립트가 불러와질 때 컴파일됩니다. 만약 정규식이 상수라면, 이렇게 사용하는 것이 성능을 향상시킬 수 있습니다.
var re = /ab+c/;
  • 다른 방법으로는, RegExp 객체의 생성자 함수를 호출하는 방법도 있습니다.
var re = new RegExp("ab+c");
var re = new RegExp(/ab+c/, "i");
var re = new RegExp(/ab+c/i);
  • 생성자 함수를 사용하면 정규식이 실행 시점에 컴파일됩니다. 정규식의 패턴이 변경될 수 있는 경우, 혹은 사용자 입력과 같이 다른 출처로부터 패턴을 가져와야 하는 경우 에는 생성자 함수를 사용하세요.

Leave a comment

You may also enjoy