10.JS 정규 표현식
Updated:
정규표현식
1. 정규식 생성
-
정규표현식이란 문자열을 검색하고 대체하는 데 사용 가능한 일종의 형식 언어(패턴)입니다.
-
간단한 문자 검색부터 이메일, 패스워드 검사 등의 복잡한 문자 일치 기능 등을 정규식 패턴으로 빠르게 수행할 수 있습니다.
-
크게 다음과 같은 역활을 수행합니다.
-
문자 검색(search)
-
문자 대체(replace)
-
문자 추출(extract)
정규표현식 테스트 사이트
- 아래의 사이트들을 이용하여 정규식을 테스트해 봅시다.
테스트 환경이 프로그래밍 언어마다 다를 수 있으니, 테스트 해보고 꼭 실제 환경에 대입해서 사용해야 한다.
JS 정규식 생성
- 주로 literal(리터럴) 방식을 사용해서 만듭니다 / / 로 감싸서 만듭니다.
/표현/옵션
const regexp1 = /^abc/;
// /표현식/
const regexp2 = /^abc/gi;
// /표현식/플래그
- 생성자 방식
new RegExp("표현", "옵션");
new RegExp("[a-z]", "gi");
- 정규식 생성
const str = `
010-1234-5678
thefirst@gmail.com
https://www.omdbapi.com/?apikey=3642c31f&s=frozen
The Lorem Ipsum is simply dummy text of the printing and typesetting industry.
abbcccddd
`;
// 생성자 방식으로 정규식 생성
const regexp = new RegExp("the", "gi"); // flag -> g 를 사용하면 global 영역으로 모든 단어중에 the 를 찾는것임
console.log(str.match(regexp)); // flag -> i 를 사용하면 대소문자 상관없이 the 를 검색합니다. 없으면 대소문자 구별함.
// 리터럴 방식으로 정규식 생성
const regexpli = /the/gi;
console.log(str.match(regexpli));
2. 메소드
| 메소드 | 문법 | 설명 |
|---|---|---|
| exec | 정규식.exec(문자열) | 일치하는 하나의 정보(array) return |
| test | 정규식.test(문자열) | 일치여부(bolean) return |
| match | 문자열.match(정규식) | 일치하는 문자열의 배열(array) return |
| search | 문자열.search(정규식) | 일치하는 문자열의 인덱스(number) return |
| replace | 문자열.replace(정규식, 대체문자) | 일치하는 문자열을 대체하고 대체된 문자열 (string) return |
| split | 문자열.split(정규식) | 일치하는 문자열을 분할하여 배열(array) return |
| toString | 생성자_정규식.toString() | 생성자 함수 방식의 정규식을 리터럴 방식의 문자열 (string) return |
test method
const str = `
010-1234-5678
thefirst@gmail.com
https://www.omdbapi.com/?apikey=3642c31f&s=frozen
The Lorem Ipsum is simply dummy fox text of the printing and typesetting industry.
abbcccddd
`;
// test method
const regexp1 = /fox/gi;
console.log(regexp1.test(str)); // true, 로 return
const regexp2 = /jacob/gi;
console.log(regexp2.test(str)); // false 로 return
replace method
let str = `
010-1234-5678
thefirst@gmail.com
https://www.omdbapi.com/?apikey=3642c31f&s=frozen
The Lorem Ipsum is simply dummy fox text of the printing and typesetting industry.
abbcccddd
`;
// replace method
const regexp = /fox/gi;
console.log(str.replace(regexp, "AAA")); // fox 를 AAA 로 변환
console.log(str); // 다시 출력 해봐도 바뀌지는 않음. 재할당을 해줘야함. 근데, str 이 const 로 되어있으면, 재할당이 안되기 때문에 let 으로 바꿈
str = str.replace(regexp, "AAA"); // 재할당
console.log(str);
3. 플래그 (옵션)
| 플래그(옵션) | 설명 |
|---|---|
| g | 모든 문자와 여러 줄 일치 (global) |
| i | 알파벳 대소문자를 구분하지 않고 일치 (ignore case) |
| y | 여러 줄 일치 (multi line) |
let str = `
010-1234-5678.
thefirst@gmail.com
https://www.omdbapi.com/?apikey=3642c31f&s=frozen
The Lorem Ipsum is simply dummy fox text of the printing and typesetting industry.
abbcccddd
`;
// 플래그 (옵션) g, i, y
console.log(str.match(/the/gi)); // global, ignore case
// \ (백슬래시) 기호를 통해 본래 기능에서 벗어나 상태가 바뀌는 문자 -> Escape Character (이스케이프 문자)
console.log(str.match(/\.$/gim)); // \ 일반적으로 str 인식하게 하는것임 , $ 는 문자 제일 끝을 가리킴, 옵션에 m 을 넣으면 multi line으로 각각의 줄에 마침표가 있는 부분을 search 함
// 즉, 전체를 탐색하는 것 -> g
// 실제로 시작과 끝을 줄바꿈으로 보겠다 라는것 -> m
🔑 4. 패턴 (표현)
| 정규식 패턴 | 설명 |
|---|---|
| ^ | 줄(Line)의 시작에서 일치, /^abc/ |
| $ | 줄(Line)의 끝에서 일치, /xyz$/ |
| . | 임의의 한 문자와 일치 |
| a|b | a 또는 b와 일치, 인덱스가 작은 것을 우선 반환 |
| * | 0회 이상 연속으로 반복되는 문자와 가능한 많이 일치, {0,}와 동일 |
| *? | 0회 이상 연속으로 반복되는 문자와 가능한 적게 일치(lazy), {0}와 동일 |
| + | 1회 이상 연속으로 반복되는 문자에 가능한 많이 일치, {1,}와 동일 |
| +? | 1회 이상 연속으로 반복되는 문자에 가능한 적게 일치(lazy), {1}와 동일 |
| ? | 없거나 1회 가능한 많이 일치 |
| ?? | 없거나 1회 가능한 적게 일치(lazy) |
| {3} | 3(숫자)개 연속 일치 |
| {3,} | 3개 이상 연속 일치 |
| {3,5} | 3개 이상 5개 이하(3~5개) 연속 일치 |
| {3,5}? | 3개 이상 5개 이하(3~5개) 연속 중 가능한 적은 3개 연속 일치(lazy), {3}와 동일 |
| () | 캡처(Capture)할 그룹 |
| (?<>) | 캡처 그룹 이름 지정, /(? |
| \1~9 | 정규식 내 캡처된 값 참조, /(abc)\1/ |
| (?:) | 캡처(Capture)하지 않는 그룹 |
| (?=) | 앞쪽 일치(Lookahead), /ab(?=c)/ |
| (?!) | 부정 앞쪽 일치(Negative Lookahead), /ab(?!c)/ |
| (?<=) | 뒤쪽 일치(Lookbehind), /(?<=ab)c/ ES2018 |
| (?<!) | 부정 뒤쪽 일치(Negative Lookbehind), /(?<!ab)c/ ES2018 |
| [abc] | a 또는 b 또는 c와 일치, 점(.)이나 별표(*) 같은 특수 문자는 []안에서 특수 문자가 아님, /.[.]/ |
| [a-z] | a부터 z 사이의 문자 구간에 일치(영어 소문자) |
| [A-Z] | A부터 Z 사이의 문자 구간에 일치(영어 대문자) |
| [0-9] | 0부터 9 사이의 문자 구간에 일치(숫자) |
| [가-힣] | 가부터 힣 사이의 문자 구간에 일치(한글) |
| [2-7] | 2부터 7 사이의 문자 구간에 일치(2,3,4,5,6,7) |
| [b-f] | b부터 f 사이의 문자 구간에 일치(b,c,d,e,f) |
| [다-바] | 다부터 바 사이의 문자 구간에 일치(다,라,마,바) |
| [^abc] | a 또는 b 또는 c가 아닌 나머지 문자에 일치(부정) |
| \ | 이스케이프 문자, /.\?\/$\^/ |
| \b | 63개 문자(영문 대소문자 52개 + 숫자 10개 + _(underscore))가 아닌 나머지 문자에 일치하는 경계(boundary) |
| \B | 63개 문자에 일치하는 경계 |
| \d | 숫자(Digit)에 일치 |
| \D | 숫자가 아닌 문자에 일치 |
| \p{} | 유니코드 속성(Property) 집합에 맞는 문자에 일치, /\p{Emoji}/u ES2018 |
| \P{} | 유니코드 속성 집합에 맞지 않는 문자에 일치, /\p{Uppercase}/u ES2018 |
| \s | 공백(Space, Tab 등)에 일치 |
| \S | 공백이 아닌 문자에 일치 |
| \w | 63개 문자(Word, 영문 대소문자 52개 + 숫자 10개 + _)에 일치 |
| \W | 63개 문자가 아닌 나머지 문자에 일치 |
| \x | 16진수 문자에 일치, /\x61/는 a에 일치 |
| ₩0 | 8진수 문자에 일치, /\141/은 a에 일치 |
| \u | 유니코드(Unicode) 문자에 일치, /\u0061/는 a에 일치 |
| \c | 제어(Control) 문자에 일치 |
| \f | 폼 피드(FF, U+000C) 문자에 일치 |
| \n | 줄 바꿈(LF, U+000A) 문자에 일치 |
| \r | 캐리지 리턴(CR, U+000D) 문자에 일치 |
| \t | 탭 (U+0009) 문자에 일치 |
| $` | 문자 대체(replace) 시 일치한 문자 이전 값 참조 |
| $’ | 문자 대체(replace) 시 일치한 문자 이후 값 참조 |
| $+ | 문자 대체(replace) 시 마지막으로 캡처된 값 참조 |
| $& | 문자 대체(replace) 시 일치한 문자 결과 전체 참조 |
| $_ | 문자 대체(replace) 시 입력(input)된 문자 전체 참조 |
| $1~9 | 문자 대체(replace) 시 캡처(Capture)된 값 참조 |
4-1 패턴 (표현) ^ , $
let str = `
010-1234-5678
thefirst@gmail.com
https://www.omdbapi.com/?apikey=3642c31f&s=frozen
The Lorem Ipsum is simply dummy fox text of the printing and typesetting industry.
abbcccddd
d`;
// 패턴 (표현) ^ , $
console.log(
str.match(/d$/gm) // d 로 끝나는 각줄 에 있는지 찾는것
);
console.log(
str.match(/^t/gim) // t 로 시작하는 각줄 에 있는지 대소문자 상관없이 찾는것
);
4-2 패턴 (표현) . |
let str = `
010-1234-5678
thefirst@gmail.com
https://www.omdbapi.com/?apikey=3642c31f&s=frozen
The Lorem Ipsum is simply dummy fox text of printing and typesetting industry.
abbcccddd
d
hxyp
`;
// 패턴 (표현) . |
console.log(
str.match(/./g) // . 특정한 글자를 모두 출력
);
console.log(
str.match(/h..p/g) // h 로 시작하고 중간에 2개가 임의의 글자 이면서 p 로 끝나는 거 출력
);
console.log(
str.match(/fox|industry/g) // fox 또는 industry 와 일치 되는 거 출력
);
4-3 패턴 (표현) ?
let str = `
010-1234-5678
thefirst@gmail.com
https://www.omdbapi.com/?apikey=3642c31f&s=frozen
The Lorem Ipsum is simply dummy fox text of printing and typesetting industry.
http://localhost:1234/
`;
// 패턴 (표현) ?
console.log(
str.match(/https?/g) // s 뒤에 ? 를 쓰게 되면 s가 있거나 없거나를 다 return (있을 수도 있고, 없을 수도 있고)
);
4-4 패턴 (표현) {}
let str = `
010-1234-5678
thefirst@gmail.com
https://www.omdbapi.com/?apikey=3642c31f&s=frozen
The Lorem Ipsum is simply dummy fox text of printing and typesetting industry.
abbcccdddd
http://localhost:1234/
`;
// 패턴 (표현) {}
console.log(
str.match(/d{2}/g) // d 가 2번 반복되는것을 모든 곳에서 찾아서 return
);
console.log(
str.match(/d{2,}/g) // d 가 2번 이상되는 것만 반복되는것을 모든 곳에서 찾아서 return
);
console.log(
str.match(/d{2,3}/g) // d 가 2번 이상, 3번 이하 되는 것만 반복되는것을 모든 곳에서 찾아서 return
);
console.log(
str.match(/\w{2,3}/g) // \w 는 숫자를 포함한 영어 알파벳을 중 2번 이상, 3번 이하 되는 것만 반복해서 모든 곳에서 return
);
console.log(
str.match(/\b\w{2,3}\b/g) // \b 는 숫자, 알파벳이 아닌, 빈칸, 기호 등 경계를 말함, 즉 경계 되는 부분만 return
);
4-5 패턴 (표현) []
let str = `
010-1234-5678
thefirst@gmail.com
https://www.omdbapi.com/?apikey=3642c31f&s=frozen
The Lorem Ipsum is simply dummy fox text of printing and typesetting industry.
abbcccdddd
http://localhost:1234/
동해물과 백두산이 마르고 닳도록
`;
// 패턴 (표현) []
console.log(
str.match(/[fox]/g) // f 또는 o 또는 x 가 모두 return 됨 fox 단어와 상관없이 다 찾아짐
);
console.log(
str.match(/[0-9]/g) // 모든 숫자만 return
);
console.log(
str.match(/[0-9]{1,}/g) // 모든 숫자중, 1개 이상으로 된것들만 return
);
console.log(
str.match(/[가-힣]{1,}/g) // 모든 한글 중, 1개 이상으로 된것들만 return
);
4-6 패턴 (표현) \
let str = `
010-1234-5678
thefirst@gmail.com
https://www.omdbapi.com/?apikey=3642c31f&s=frozen
The Lorem Ipsum is simply dummy fox text of printing and typesetting industry.
abbcccdddd
http://localhost:1234/
동해물과_백두산이 마르고 닳도록
`;
// 패턴 (표현) \
console.log(
str.match(/\w/g) // 알파벳 대소문자, 숫자, _ (underbar) 까지 포함한 모든것을 return
);
console.log(
str.match(/\bf\w{1,}\b/g) // 63개 문자 (\w 가 아닌것들) 아닌거에서 시작해서,(경계를 말함), f 로 시작하는 단어중에 \w 64개 문자중에 1개 이상의 단어를 return
); // 즉 f 로 시작하는 모든 영단어를 찾는것임 (1개 이상이니 단어가 됨)
console.log(
str.match(/\d{1,}/g) // 1개 이상 덩어리로 된 숫자만 return
);
const h = ` the hello world !
`;
console.log(
h.replace(/\s/g, "") // 모든 공백 문자열 (빈칸, tab 키, enter 키)등을 모두 ''으로 바꿔서 return 함
);
4-7 패턴 (표현) (?=) , (?<=)
-
(?=) : 앞쪽 일치(Lookahed)
-
(?<=) : 뒤쪽 일치(Lookbehind)
let str = `
010-1234-5678
thefirst@gmail.com
https://www.omdbapi.com/?apikey=3642c31f&s=frozen
The Lorem Ipsum is simply dummy fox text of printing and typesetting industry.
abbcccdddd
http://localhost:1234/
동해물과_백두산이 마르고 닳도록
`;
// 패턴 (표현) (?=) , (?<=)
console.log(
str.match(/.{1,}(?=\@)/g) // @ 기준으로 앞쪽에 1개 이상의 단어를 return
);
console.log(
str.match(/(?<=\@).{1,}/g) // @ 기준으로 뒷쪽에 1개 이상의 단어를 return
);
Reference
-
poiemaweb - https://poiemaweb.com/js-regexp
-
MDN Web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
Leave a comment