📌
정규 표현식, 또는 정규식은 문자열에서 특정 문자를 찾거나 대체 또는 발췌하는데 사용됩니다.
// 리터럴 방식
const re = /패턴/플래그;
// 생성자 방식
const re = new RegExp('패턴', '플래그');◼ 생성 방식
정규 표현식은 두 가지 방법으로 만들 수 있습니다.
1. 리터럴을 이용한 생성 방식
슬래시로 패턴을 감싸서 작성합니다. 정규 표현식 리터럴은 스크립트를 불러올 때 컴파일되므로, 바뀔 일이 없는 패턴의 경우 리터럴을 사용하면 성능이 향상될 수 있습니다.
const re = /ab+c/;2. RegExp 생성자 함수 방식
생성자 함수를 사용하면 정규 표현식이 런타임에 컴파일됩니다. 바뀔 수 있는 패턴이나, 사용자 입력 등 외부 출처에서 가져오는 패턴의 경우 이렇게 사용합니다.
const re = new RegExp('ab+c');
const re = new RegExp(/ab+c/);◼ 패턴(Pattern)
패턴에는 검색하고 싶은 문자열을 지정합니다. 단순한 문자나 단순한 문자와 특수 문자의 조합으로 구성할 수 있습니다.
1. 단순 패턴 사용
단순 패턴은 문자열을 있는 그대로 탐색할 때 사용합니다.
const re = /abc/;2. 특수 문자 사용
하나 이상의 문자를 찾는다거나 공백 문자를 찾는 등 직접적인 일치 이상의 탐색이 필요할 땐 특수 문자를 사용합니다.
const re = /ab+c/;
const re = /Chapter (\d+)\.\d*/;매칭 패턴(문자, 숫자, 기호 등)
a-zA-Z : 영어알파벳(-으로 범위 지정)
ㄱ-ㅎ가-힣 : 한글 문자(-으로 범위 지정)
0-9 : 숫자(-으로 범위 지정)
. : 모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두. 단, 줄바꿈 X)
\d : 숫자
\D : 숫자가 아닌 것
\w : 영어알파벳, 숫자, 언더바(_). [A-Za-z0-9\_]와 동일
\W : \w가 아닌 것
\s : space 공백
\S : space 공백이 아닌 것
\특수기호 : 특수기호 \* \^ \& \! \? 등
검색 패턴
| : OR. a|b
[] : 괄호안의 문자들 중 하나. /abc/ : "abc"를 포함 /[abc]/ : "a"또는"b"또는"c"를 포함 [다-바] : 다or라or마or바
[^문자] : 괄호안의 문자를 제외한 것 [^lgEn] : "l" "g" "E" "N" 문자 제외
^문자열 : 특정 문자열로 시작 (시작점) /^www/
문자열$ : 특정 문자열로 끝남 (종착점) /com$/
() : 그룹 검색 및 분류 (match 메서드에서 그룹별로 묶어줌)
(?: 패턴) : 그룹 검색 (분류 X)
\b : 단어의 처음/끝
\B : 단어의 처음/끝이 아님
개수, 반복 패턴
x? : "x"를 0 또는 1회 일치 (없음 || 한개)
x* : "x"를 0회 이상 일치 (없음 || 있음)
x+ : "x"를 1회 이상 일치 (한개 || 여러개)
x*?, x+? : ?가 붙으면 일치 항목을 찾고 즉시 중지
{n} : n개
{Min,} : 최소 Min개 이상
{Min, Max} : 최소 Min개 이상, 최대 Max개 이하
그룹 패턴
() : 그룹화 및 캡쳐
(?: 패턴) : 그룹화 (캡쳐 X)
(?=) : 앞쪽 일치(Lookahead) /ab(?=c)/
(?!) : 부정 앞쪽 일치(Negative Lookahead) /ab(?!c)/
(?<=) : 뒤쪽 일치(Lookbehind) /(?<=ab)c/
(?<!) : 부정 뒤쪽 일치(Negative Lookbehind) /(?<!ab)c/
// 'o'만 +이 적용 됨
'hellohellohello'.match(/hello+/); // 'hello'
'hellooooohellooooo'.match(/hello+/); // 'hellooooo'
// 그룹 패턴 적용 시
'hellohellohello'.match(/(hello)+/); // 'hellohellohello', 'hello'
'hellooooohellooooo'.match(/(hello)+/); // 'hello', 'hello'캡처 그룹화()
패턴 그룹화()는 괄호 안에 있는 표현식을 캡처해 사용합니다.
1. 패턴 ()안에 있는 "hello"를 그룹화하여 캡처합니다.
2. 캡처된 표현식은 당장 사용되지 않으며, 그룹화된 "hello"를 패턴 +로 1회 이상 연속으로 반복되는 문자로 검색합니다. ("hello"를 패턴 +로 1회 이상 연속으로 반복하여 검색하여 "hellohellohello"를 반환)
3. 캡처 외 표현식이 모두 작동하고 난 뒤에 캡처된 표현식 "hello"가 검색됩니다. (캡처된 "hello"로 검색하여 "hello"를 추가 반환)
'123abc'.match(/(\d+)(\w)/); // '123a', '123', 'a'
/*
1. 패턴 ()안의 표현식을 순서대로 캡처. \d+, \w
2. 캡처 후 남은 표현식으로 검색.
3. 패턴 \d로 숫자를 검색하되 패턴 +로 1개 이상 연속되는 숫자를 검색 → "123"
4. 다음 패턴 \w는 문자를 검색하니 "a"가 일치
5. 최종적으로 "123a"가 반환.
6. 첫 번째 캡처한 표현식 \d+로 숫자를 재검색하되 패턴 +로 1개 이상 연속되는 숫자를 검색
7. "123"가 일치하여 반환
8. 나머지 캡처한 표현식 \w로 문자를 검색하니 "a"가 일치하여 반환
*/캡처하지 않는 그룹화 (?:)
캡쳐 기능이 필요하지 않다면 (?:)를 사용해 캡쳐 기능을 비활성화 할 수 있습니다.
// 그룹화 + 캡처
'hellohellohello'.match(/(hello)+/); // "hellohellohello", "hello"
// 그룹화만
'hellohellohello'.match(/(?:hello)+/); // "hellohellohello"◼ 플래그(Flag)
고급 검색을 위한 전역 옵션을 설정할 수 있도록 지원하는 기능입니다. 단독으로 사용할 수도 있고, 순서에 상관 없이 한꺼번에 여럿을 지정할 수도 있습니다.
d(hasIndices)
부분 문자열 일치에 대해 인덱스를 생성합니다.
const str = "abcabc";
str.match(/ca/d); // ['ca', index: 2, input: 'abcabc', groups: undefined, indices: Array(1)]g(global)
전역 검색. g 플래그가 없는 경우, 최초 검색만을 반환합니다.
const str = "abcabc";
// 플래그 없으면 최초에 발견된 문자만 반환
str.match(/a/); // ['a', index: 0, input: 'abcabc', groups: undefined]
// 플래그 있으면 모든 결과가 배열로 반환
str.match(/a/g); // (2) ['a', 'a']i(ignoreCase)
대소문자를 구별하지 않고 검색합니다.
const str = "abcABC";
// 대소문자 a 검색
str.match(/a/gi); // (2) ['a', 'A']m(multiline)
문자열의 행이 바뀌더라도 검색을 계속합니다.
const str = 'Hello World and\nPower Hello?\nPower Overwhelming!!';
// Hello 단어로 시작하는지 검사 (^ 문자는 문장 시작점을 의미)
str.match(/^Hello/); // ['Hello'] : 첫번째 줄은 검색 됨
// Power 단어로 시작하는지 검사 (^ 문자는 문장 시작점을 의미)
str.match(/^Power/); // null : 다음 줄은 검색 안됨
// 플래그를 통해 개행되는 다음 줄도 검색되게 설정
str.match(/^Power/m); // ['Power']
// 세번째 줄도 검색되게 하고싶으면 g 플래그와 혼합 사용
str.match(/^Power/gm); // ['Power', 'Power']s(dotAll)
dot(.)가 함께 사용되며, 개행 문자 \n를 포함시킵니다. (원래 포함 X)
const str = 'Hello\nWorld';
/* Hello
World */
// dot(.)은 모든 문자를 뜻하므로 문자 하나씩 'H! '로 변환
str.replace(/./g, 'H! '); // 'H! H! H! H! H! H! H! H! H! H! H! '
// 플래그 없으면 패턴이 일치하지 않아 대체되지 않음
str.replace(/Hello.World/, 'Hello World!!!');
/* Hello
World */
// 플래그 있으면 패턴이 일치(\n 포함)하므로 대체 됨
str.replace(/Hello.World/s, 'Hello World!!!'); // 'Hello World!!!'u(unicode)
유니코드 문자를 검색합니다.
// \p{Sc}는 통화를 나타내는 유니코드 프로퍼티 입니다.
'￦, $, ¥'.replace(/\p{Sc}/gu, '통화'); '통화, 통화, 통화'y(sticky)
문자 내 특정 위치에서 검색을 시작합니다.
const str = "#abcabc#";
const regex = /abc/y;
regex.lastIndex = 1;
regex.test(str); // true
regex.lastIndex = 0;
regex.test(str); // false◼ 메서드(Method)
메서드를 통해 패턴을 검사하고 매칭되는 문자열을 추출, 변환합니다.
1. String의 메서드
match(), matchAll()
match() : 캡처 그룹을 포함해서 모든 일치를 담은 배열을 반환합니다. 일치가 없으면 null을 반환합니다.
matchAll() : 캡처 그룹을 포함해서 모든 일치를 담은 반복기를 반환합니다.
('문자열').match(/정규표현식/플래그);
'Hello World'.match(/World/); // ['World', index: 6, input: 'Hello World', groups: undefined]replace(), replaceAll()
replace() : 문자열에서 일치하는 부분을 탐색하고, 그 부분을 대체 문자열로 바꿉니다.
replaceAll() : 문자열에서 일치하는 부분을 모두 탐색하고, 모두 대체 문자열로 바꿉니다.
('문자열').replace(/정규표현식/, '대체문자열');
'Hello World'.replace('World','World!!!'); // 'Hello World!!!'search()
문자열에서 일치하는 부분을 탐색합니다. 일치하는 부분의 인덱스, 또는 일치가 없는 경우 -1을 반환합니다.
('문자열').search(/정규표현식/플래그);
'Hello World'.search(/World/); // 6split()
조건에 부합하는 값을 기준으로 대상을 자른 후, 배열로 저장합니다. 만약 split할 대상에 아무런 입력도 하지 않을 시(여백 포함), 대상을 하나의 배열로 반환합니다.
('문자열').split(정규표현식);
'Hello World'.split(' '); // ['Hello', 'World']2. RegExp의 메서드
exec()
문자열에서 일치하는 부분을 탐색합니다. 일치 정보를 나타내는 배열, 또는 일치가 없는 경우 null을 반환합니다.
(정규표현식).exec('문자열');
/W/.exec('Hello World'); // ['W', index: 6, input: 'Hello World', groups: undefined]test()
문자열에 일치하는 부분이 있는지 확인합니다. true 또는 false를 반환합니다.
(정규표현식).test('문자열');
/W/.test('Hello World'); // true◼ 예제
특정 단어로 끝나는지 검사
const fileName = 'index.html';
// 'html'로 끝나는지 검사
// $ : 문자열의 끝을 의미한다.
const regexr = /html$/;숫자로만 이루어져 있는지 검사
const targetStr = '12345';
// 모두 숫자인지 검사
// [] 바깥의 ^는 문자열의 처음을 의미한다.
const regexr = /^\d+$/;아이디 사용 검사
알파벳 대소문자 또는 숫자로 시작하고 끝나며 4 ~10자리인지 검사
const id = 'abc123';
// 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4 ~10자리인지 검사
// {4,10}: 4 ~ 10자리
const regexr = /^[A-Za-z0-9]{4,10}$/;핸드폰 번호 형식
const cellphone = '010-1234-5678';
const regexr = /^\d{3}-\d{3,4}-\d{4}$/;전화번호 형식
유선번호라면 02-111-2222 형식이고, 핸드폰번호라면 010-1111-2222 형식을 모두 포함하는 정규식 (숫자의 갯수가 다름)
const text = 'http://abc.com http://google.com 010-1111-2222 02-333-7777 abc@aaa.com';
text.match(/\d{2,3}-\d{3,4}-\d{4}/g); // ['010-1111-2222', '02-333-7777']
/*
1) \d{2,3} => 숫자 2~3개로 시작하고,
2) \- => 다음에 하이픈(-)이 오고
3) \d{3, 4} => 다음에 숫자가 3~4개 오고,
4) \- => 다음에 하이픈(-)이 오고,
5) \d{4} => 다음에 숫자가 4개 온다.
6) g => 매칭되는걸 모두 다 찾는다(플래그)
*/웹사이트 주소 형식
http://나 https://로 시작하고, 알파벳, 언더바(_), 하이픈(-), dot(.)으로 이루어져 있는 정규식
const text = 'http://abc.com http://google.com 010-1111-2222 02-333-7777 abc@aaa.com';
text.match(/https?:\/\/[\w\-\.]+/g); // ['http://abc.com', 'http://google.com']
/*
1) http => 로 시작하고,
2) s? => 다음에 s는 없거나, 있고,
3) \/\/ => 다음에 특수기호 // 가 오고
4) [\w\-\.]+ => \w(영문자, 언더스코어), 하이픈, 쩜 으로 이루어진 문자열이 한개 이상(+) 있다.
5) g => 매칭되는걸 모두 다 찾는다.(플래그)
*/이메일주소 형식
xxx@xxxx.com 등의 형식
const text = 'http://abc.com http://google.com 010-1111-2222 02-333-7777 abc@aaa.com';
text.match(/[\w\-\.]+\@[\w\-\.]+/g); // ['abc@aaa.com']// 좀 더 엄격한 검사가 필요하다면, 상황에 맞게 수정해서 사용하면 된다.
const email = 'abc@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}$/;특수기호 정규표현식
// 모든 특수기호를 나열
const regex = /\[\]\{\}\/\(\)\.\?\<\>!@#$%^&*/g
// 문자와 숫자가 아닌것을 매칭
const regex = /[^a-zA-Z0-9가-힣ㄱ-ㅎ]/g이밖의 정규표현식 모음
/* 전화번호 */
var localPhone = /^(0(2|3[1-3]|4[1-4]|5[1-5]|6[1-4]))(\d{3,4})(\d{4})$/;
var cellPhone = /^(?:(010\d{4})|(01[1|6|7|8|9]-\d{3,4}))(\d{4})$/;
/* 숫자 형식 */
var number = /[0-9]/;
var unsignedInt = /^[1-9][0-9]*$/;
var notNumber = /[^(0-9)]/gi;
/* 문자 형식 */
var korea_cv = /[ㄱ-ㅎ|ㅏ-ㅣ]/;
var korea = /[가-힣]/;
var koreaName = /[가-힣]/;
var english = /[a-z | A-Z]/;
/* 특문 */
var special_char = /[\{\}\[\]\/?.,;:|\)*~`!^\-+<>@\#$%&\\\=\(\'\"]/;
var comma_char = /,/g;
var blank = /[\s]/g;
/* 아이디 / 비밀번호 */
var id_check = /^[a-z | A-Z]{3,6}[0-9]{3,6}$/;
var password =/^.*(?=.{6,20})(?=.*[0-9])(?=.*[a-zA-Z]).*$/;
/* 이메일 형식 */
var email =/([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
/* 도메인 형식 */
var domain_all =/([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)
|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
var domain_include = /^((http(s?))\:\/\/)([0-9a-zA-Z\-]+\.)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/;
var domain_exclude = /^[^((http(s?))\:\/\/)]([0-9a-zA-Z\-]+\.)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/;
/* 영문 한글만 */
var ko_en_num_charactor = /^[가-힣a-zA-Z0-9]*$/;
var ko_en_charactor = /^[가-힣a-zA-Z]*$/;
/* 자동차 번호판 */
var car = /^[0-9]{2}[\s]*[가-힣]{1}[\s]*[0-9]{4}$/;
var old_car = /^[가-힣]{2}[\s]*[0-9]{2}[\s]*[가-힣]{1}[\s]*[0-9]{4}$/;정규식 예제모음 사이트
정규표현식 예제들이 모여있는 사이트입니다.
'Find Expressions' 검색창에 찾으려는 타입을 검색하면 예제들을 얻을 수 있습니다.
🔗 regexlib.com
정규식 테스트 사이트
A-Z로 시작하는 문자 검색하는 정규표현식으로 전체문장에서 하이라이트로 표기해주고, 정규표현식 작성시 도움이 되는 문법도 왼쪽에 표기됩니다.
🔗 regexr.com
※참고 : https://inpa.tistory.com/entry/JS-📚-정규식-RegExp-누구나-이해하기-쉽게-정리
