자바스크립트로 코드를 작성하다보면 대문자가 포함되어있는지, 대문자만으로 이루어진 문자열인지 등 조건을 검사하는 경우가 생깁니다.
또, 문제를 풀다보면 특정 단어 혹은 특정 문자열, 특수문자들 등을 찾거나 삭제하는 식의 풀이도 하게 됩니다.
이러한 유효성 검사를 하기 위해서는 정규표현식이 필요합니다 !
언뜻보면 복잡해보이지만 알고보면 규칙적인 정규표현식에 대해 공부했습니다😊
Regular Expression인 정규표현식은 RegExp
혹은 Regex
라고 불립니다.
일정한 패턴의 문자열을 찾는 역할을 하고, 적절한 메서드와 함께 사용하면 다양하게 활용할 수 있습니다.
예를 들어 .match(), .replace(), .test(), ... 등이 있습니다.
정규표현식에 익숙해지고 싶다면 RegExr와 같은 사이트에서 연습해볼 수 있습니다.
정규표현식은 리터럴 방식
, 생성자 함수 방식
2가지로 표현할 수 있습니다. 보통 리터럴 방식을 더 많이 사용합니다.
정규표현식을 슬래시(/)
기호로 둘러싸서 직접 작성하는 방법
➡️ 하드코딩이기 때문에 정규표현식이 고정되어 있고, 코드 실행 시점에 이미 패턴이 결정된 경우에 주로 사용함
=> 스크립트 로딩될 때 한번만 컴파일 되니까 효율적임
const regex = /ab+c/i; // /패턴/플래그
RegExp 객체의 생성자를 사용하여 정규표현식을 동적으로 생성하는 방법
➡️ 실행 시점에 정규표현식이 결정되거나, 변경 가능한 문자열 기반의 정규표현식일 때 경우 주로 사용
=> 유연하지만, 런타임 시점에 실행 되기 때문에 매번 객체를 생성해서 컴파일 해야하므로 여러 번 사용되면 성능이 떨어짐
const pattern = "ab+c";
const flags = "i";
const regex = new RegExp(pattern, flags);
리터럴 문자: 목표하는 정확한 특정 단어 / 문자열 그 자체
ex) "a", "word", "Hello World!", "?", ...
메타 문자: 패턴을 만들 때 사용하는 특별한 의미를 지닌 문자
메타 문자 | 의미 | 메타 문자 | 의미 |
---|---|---|---|
. | 줄바꿈 문자를 제외한 어떤 한 문자와 일치 | ^ | 입력의 시작과 일치 |
* | 앞의 표현식이 0회 이상 반복되는 경우와 일치 | $ | 입력의 끝과 일치 |
+ | 앞의 표현식이 1회 이상 반복되는 경우와 일치 | ? | 앞의 표현식이 0회 / 1회 등장하는 경우와 일치 |
\ | 다음에 오는 문자를 리터럴 문자로 읽히게 해줌 | | | 논리 연산자 OR과 의미 동일 |
문자 클래스 | 의미 | 문자 클래스 | 의미 |
---|---|---|---|
[abc] | 괄호 안에 있는 문자면 어떤 거든 일치 ex)a, b, c 중 하나 | [^abc] | 괄호 안 문자들 제외하고는 다 일치 |
[a-z] | a-z까지의 어떤 소문자든 일치 | [A-Z] | A-Z까지의 어떤 대문자든 일치 |
[0-9] | 0-9까지의 어떤 숫자든 일치 |
문자 클래스 | 의미 | 문자 클래스 | 의미 |
---|---|---|---|
\d | 0-9까지의 모든 숫자와 일치 | \D | 숫자를 제외한 모든 문자와 일치 |
\w | 모든 알파벳 및 숫자와 일치 | \W | 알파벳 및 숫자 제외 모든 문자와 일치 |
\s | 모든 공백 문자와 일치 (스페이스, 탭, ...) | \S | 공백 문자를 제외한 모든 문자와 일치 |
수량자 | 의미 | 수량자 | 의미 |
---|---|---|---|
{n} | n번 반복 | ||
{n,} | 최소 n번 반복 | {n,m} | 최소 n번 최대 m번 반복 |
수량자 | 의미 | 수량자 | 의미 |
---|---|---|---|
g | 전역 검색 (일치하는 모든 항목 반환) | i | 대소문자 구분 없이 검색 |
m | 다중 줄 모드 (입력의 각 줄이 시작과 끝으로 처리됨) |
리터럴 방식으로 예시들었습니다.
const email = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/;
const email1 = "wonpil@velog.com";
const email2 = "wonpil+day6@velog.com";
const email3 = "wonpil@sub.velog.co.uk";
const email4 = "wonpil-velog@com";
email.test(email1); // true
email.test(email2); // true
email.test(email3); // true
email.test(email4); // false
const password = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
const pass1 = "Password123!";
const pass2 = "password";
const pass3 = "PASSWORD123!";
const pass4 = "Pass1234";
password.test(pass1); // true
password.test(pass2); // false (소문자만 있음)
password.test(pass3); // false (대문자와 숫자만 있음)
password.test(pass4); // false (특수문자 없음)
const phone = /^010-(\d{4})-(\d{4})$/;
const numStr = "010-1994-0428";
const result = phone.exec(numStr);
console.log(result);
// ['010-1994-0428', '1994', '0428', index: 0, input: '010-1994-0428', groups: undefined]
const URL = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
const url1 = "https://www.example.com";
const url2 = "http://example.com";
const url3 = "www.example.com";
const url4 = "example";
URL.test(url1); // true
URL.test(url2); // true
URL.test(url3); // true
URL.test(url4); // false (도메인 형식 아님)
const trim = /^\s+|\s+$/g;
const str = " Kim Won Pil ";
const result = str.replace(trim, "");
console.log(result); // "KimWonPil"
const html = /<[^>]+>/g;
const str = "<p>This is a paragraph.</p>";
if (str.match(html)) console.log(hasHTMLTags); // true
const capital = /[A-Z]/;
const str1 = "AGHE";
const str2 = "SEgwq";
const str3 = "Sh1235";
const str4 = "hje1235";
capital.test(str1); // true
capital.test(str2); // true
capital.test(str3); // true
capital.test(str4); // false
const onlyCapital = /^[A-Z]+$/;
// ^ 으로 문자열의 시작을 찾고, [A-Z]+ 으로 문자열을 돌면서 각 문자열이 대문자인지 확인, $ 으로 문자열의 끝까지 확인
const str1 = "AGHE";
const str2 = "SEgwq";
const str3 = "Sh1235";
const str4 = "hje1235";
onlyCapital.test(str1); // true
onlyCapital.test(str2); // false
onlyCapital.test(str3); // false
onlyCapital.test(str4); // false
참고한 자료: 📝 [JS 공부기록] 정규표현식(Regular Expression)
[JavaScript] 정규표현식(RegExp)이란?
[자바스크립트] 정규표현식(Regular Expression) 기초/기본 쉽고 상세한 사용 방법 정리(샘플 예제 코드)