JS 정규표현식

정규 표현식은 문자열에서 특정 내용을 찾거나 대체, 발췌하기 위해서 사용한다. (ex. 입력받는 전화번호 유효 체크) 반복문이나 조건문을 사용한 복잡한 코드도 정규표현식을 이용하면 간단하게 표현할 수 있지만 여러가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다.

플래그

플래그는 옵션이므로 선택적으로 사용할 수 있다. 사용하지 않을 경우 검색 매칭 대상이 하나 이상일 경우에 첫번째 대상만 검색후 종료한다.

Flag	Meaning	Description
i	Ignore Case	대소문자를 구별하지 않고 검색
g	Global	문자열 내의 모든 패턴을 검색
m	Multi Line	문자열의 행이 바뀌더라도 검색을 계속 진행

패턴

• 패턴을 검색하고 싶은 문자열을 지정한다.
• 문자열의 따옴표는 생략한다. (포함시 따옴표도 함께 검색)
• 특별한 의미를 가지는 메타문자나 기호로 표현할 수 있다.

패턴 표현 방법	의미
.	임의의 문자 하나. 문자 내용 하나는 무엇이든 상관 없다. 추출을 반복하지 않으며 반복하기 위해서는 플래그 g를 사용.
. + g	모든 문자 선택
패턴에 문자 또는 문자열 지정	일치하는 문자 또는 문자열 추출. 대소문자를 구분하며, 패턴과일치한 첫번째 결과만 반환된다. 구분하지 않으려면 플래그 i 사용.
+	앞선 패턴을 최소 한번 반복
│	or의 의미
│ + +	분해되지 않은 단어 레벨로 추출
[ + - + ]	범위 지정. 대소문자를 구별하지 않고 추출하고 싶을시 /[A-Za-z]+/g;
\w	알파벳과 숫자

자주 사용하는 정규표현식

특정 단어로 시작하는지 검사

const url = 'http://example.com';

// ^ : 문자열의 처음을 의미한다.
const regexr = /^http/;

console.log(regexr.test(url)); // true

특정 단어로 끝나는지 검사

const fileName = 'index.html';

// $ : 문자열의 끝을 의미한다.
const regexr = /html$/;

console.log(regexr.test(fileName)); // true

숫자인지 검사

const targetStr = '12345';

// 모두 숫자인지 검사
// [^]: 부정(not)을 의미한다.
// [] 바깥의 ^는 문자열의 처음을 의미한다.
const regexr = /^\d+$/;

console.log(regexr.test(targetStr)); // true

하나 이상의 공백으로 시작하는지 검사

const targetStr = ' Hi!';

// 1개 이상의 공백으로 시작하는지 검사
// \s : 여러 가지 공백 문자 (스페이스, 탭 등) => [\t\r\n\v\f]
const regexr = /^[\s]+/;

console.log(regexr.test(targetStr)); // true

아이디로 사용 가능한지 검사

const id = 'abc123';

// 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4 ~10자리인지 검사
// {4,10}: 4 ~ 10자리
const regexr = /^[A-Za-z0-9]{4,10}$/;

console.log(regexr.test(id)); // true

메일 주소 형식에 맞는지 검사

const email = 'ungmo2@gmail.com';

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

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

핸드폰 번호 형식에 맞는지 검사

const cellphone = '010-1234-5678';

const regexr = /^\d{3}-\d{3,4}-\d{4}$/;

console.log(regexr.test(cellphone)); // true

특수 문자 포함 여부를 검사

const targetStr = 'abc#123';

// A-Za-z0-9 이외의 문자가 있는지 검사
let regexr = /[^A-Za-z0-9]/gi;

console.log(regexr.test(targetStr)); // true

// 아래 방식도 동작한다.
// 이 방식의 장점은 특수 문자를 선택적으로 검사할 수 있다.
regexr = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi;

console.log(regexr.test(targetStr)); // true

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

Javascript Regular Expression

RegExp Constructor

자바스크립트는 RegExp 객체를 지원한다. 리터럴 방식(일반적) 과 RegExp 생성자 함수 를 사용하여 생성할 수 있다.

new RegExp(pattern[, flags])

RegExp Method

RegExp.prototype.exec(target: string): RegExpExecArray | null ^ES3

• 문자열을 검색하여 매칭 결과를 반환
• 반환값은 배열 또는 null
• exec 메소드는 g 플래그를 지정하여도 첫번째 매칭 결과만을 반환

const target = 'Is this all there is?';
const regExp = /is/;

const res = regExp.exec(target);
console.log(res); // [ 'is', index: 5, input: 'Is this all there is?' ]

RegExp.prototype.test(target: string): boolean ^ES3

• 문자열을 검색하여 매칭 결과를 반환
• 반환값은 true 또는 false

const target = 'Is this all there is?';
const regExp = /is/;

const res = regExp.test(target);
console.log(res); // true

---

REFERENCE
https://poiemaweb.com