본문으로 바로가기

정규 표현식

category JavaScript 2020. 10. 18. 16:09

정규 표현식은 문자열 내에서 특정한 조합을 찾기위해서 사용하는 패턴이다

정규 표현식은 정규식이라고도 불리우며 이하 정규식으로 표기하겠다

정규식을 만드는데는 2가지가 방법이있다

const test1 = /abc/;
let test2 = new RegExp('abc');

test1, test2 둘다 같은 값을 가지지만 다음의 점들이 다르다

  • 1과 같은 리터럴 방식은 자바스크립트가 불러와질 때 컴파일된다
    따라서 사용할 정규식이 상수라면 1번과 같이 사용하는게 성능 향상에 도움이된다

  • 2와 같이 생성자를 이용한 정규식 생성은 정규식을 사용할 때 컴파일된다
    정규식이 바뀌거나 사용자의 입력을 받는 등 변할 경우에는 2번과 같이 사용하는게 권장된다

정규식을 사용할 때는 정규식의 메소드를 불러와서 사용하는데

정규식의 패턴과 다른 문자열이 대응되는 부분이 있는지 확인하고 싶을 때는 test나 search메소드를 사용하면 된다

먼저 test메소드

let test2 = new RegExp('abc');

console.log(test2.test('ccabc'));

test2정규식을 사용해서 문자열 'ccabc'에 abc패턴이 있는지 확인하는 코드이다

test메소드는 대응되는 패턴이 있다면 true 없다면 false를 반환한다

search는 엄밀히 말해서 정규식의 메소드는 아니다

String 객체가 가진 메소드인데 코드부터 살펴보자

const test1 = /abc/;

console.log('1111abc'.search('abc'));
console.log('1111abc'.search(test1));

이 두 코드의 결과값은 똑같다

search메소드에 넘겨지는 문자열 인자는 암묵적으로 정규식으로 변환된다

대응되는 문자열의 인덱스가 반환하고 대응되는 패턴이 없다면 -1을 반환한다

이렇게 간단하게 패턴의 일치를 확인할 수 있는데

exec와 mathc를 사용하면 위 두 메소드보단 느지만 조금 더 자세한 정보를 얻을 수 있다

const test1 = /abc/;
let  test2 = new RegExp('(abc)');

console.log(test1.exec('11abc11abc'));
console.log('1abcabc1abc'.match(test2));

배열로 반환되는데

일치하는 패턴이 없을 경우에는 null이 반환되고 그렇지 않은 경우 보는 바와 같이 Array가 반환된다

그전에 test2의 정규식에 위 코드와는 다르게 괄호로 묵여있는데 이를 그룹화라고 한다

결과를 보면 이해가 좀 더 쉽다 괄호로 묶은 패턴을 다 찾는 것


그럼 정규식이 자주 쓰이는 이메일 유효성 검사 코드를 간단하게 보자

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

console.log(regEmail.test('1111@go.aa'));

이 정규식은

^[0-9a-zA-Z] : 첫글자는 [0-9a-zA-Z]로 와야하며
[-_.]? : [-_.]가 한번 또는 등장하지 않아도 되고
([-_.]?[0-9a-zA-Z])* : 괄호안의 내용이 연속해서 등장할 수도 있고 등장하지 않아도 되고
[a-zA-Z]{2,3} : [a-zA-Z]가 2번 또는 3번 연속해서 등장할 수 있고
/'정규식'/i : 정규식 안의 대,소문자를 구분하지 않는다

로 해석된다

이보다 더 많은 표현식들이 모질라에 더 자세히 설명되어 있으니 모두 외워서 사용하기 보다는

필요한 부분이 생겼을 때 사이트에 들어가서 찾아보는게 바람직한 것 같다

'JavaScript' 카테고리의 다른 글

form  (0) 2020.11.07
마우스 좌표값  (0) 2020.10.20
html에 js,css파일 적용이 안되는 문제  (0) 2020.10.17
타이밍 제어  (0) 2020.10.15
공 움직이기  (0) 2020.10.13