정규표현식 ( 정규식 )
정규 표현식(regular expression)이란?
정규 표현식(Regular Expression)은 문자열을 검색하거나 편집하는 데 사용되는 특수한 문자열 패턴입니다. 이것은 주어진 텍스트에서 원하는 패턴을 찾는 데 도움이 됩니다.
정규 표현식은 다양한 프로그래밍 언어와 텍스트 편집기에서 지원되며, 각 언어 및 편집기에서 약간의 차이가 있을 수 있지만 기본적인 패턴 매칭 및 문자열 검색에 대한 기능은 비슷합니다.
정규 표현식은 일반 문자와 특수 문자를 조합하여 표현되는데, 이들은 다음과 같은 역할을 합니다
일반 문자: 일반적인 문자열을 나타냅니다.
메타 문자: 패턴 매칭을 위해 특별히 사용되는 문자입니다. 예를 들어, "."은 어떤 문자와도 일치하고, "*"는 앞선 문자가 0번 이상 나타날 수 있다는 것을 의미합니다.
문자 클래스: 특정 유형의 문자와 일치시키기 위해 사용됩니다. "[0-9]"는 0부터 9까지의 숫자 중 하나와 일치합니다.
수량자: 이전 문자 또는 그룹이 얼마나 자주 나타나는지를 지정합니다. "*"는 0회 이상, "+"는 1회 이상, "?"는 0회 또는 1회 등을 나타냅니다.
그룹화: 패턴 일부를 그룹화하여 일치시키거나 추출할 수 있습니다. "("와 ")"로 그룹을 지정할 수 있습니다.
앵커: 문자열의 시작이나 끝과 일치하는 위치를 지정합니다. "^"는 문자열의 시작, "$"는 문자열의 끝을 나타냅니다.
- 문자 검색 (Search)
- 문자 대체 (Replace)
- 문자 추출 (Extract)
정규식을 만드는 방법
1. 슬래시(/)로 감싸는 정규식 리터널방식
2. RegExp 객체의 생성자 함수를 사용하는 방법
방식1)
let regexp = /Ezen/
방식2)
let regexp = new RegExp('Ezen')
정규식 함수
정규식에서 제공하는 내장함수
함수 | 설명 |
exec | 정규식을 통해 찾고자 하는 문자열 패턴을 찾고 배열을 반환 대응되는 문자열을 찾지 못하면 null을 반환 |
test | 대응되는 문자열이 있는지 검사하고 있으면 true , 없으면 false를 반환 |
match | 대응되는 문자열을 찾고 배열로 반환하는 String객체 내장함수 대응되는 문자열이 없으면 null을 반환, exex()함수와 동일한 기능을 함 |
search | 대응되는 문자열이 있는지 검사하고, 대응되는 첫 번째 문자열의 인덱스를 반환 대응되는 문자열이 없으면 -1을 반환 |
replace | 대응되는 문자열을 찾고 다은 문자열로 치환하는 String 객체 내장함수 |
split | 대응되는 문자열을 찾고, 문자열을 기준으로 나누어서 배열로 반환하는 String내장함수 |
let test = 'Hello World! world!';
const re = /World/;
console.log( re.test(str))
console.log( str.search(re))
//World에 대응되는 문자열을 찾는 패턴 정의
const re = /World/;
//test()함수를 통해 대응되는 문자열이 있으면 true 반환
console.log( re.test(str))
//String 객체의 내장 함수인 search() 함수에 정규식을 적용해서
대응되는 문자열이 발견되면 인덱스 번호를 반환
console.log( str.search(re))
정규식 특수문자
특수문자 | 설명 | 예 |
\ | 정규식 특수 문자중 어떠한 경우에는 특수문자로서 동작하는것이 아니라 문자 그대로 일반문자로 인식되어야하는 경우 이를 구분하기 위해서 특수문자로 사용될수있는문자앞에 \가 있으면 특수문자가 아닌 일반문자로 이식하게 됩니다. | /A/ 패턴을 만들고 'hi A'에서 해당 정규식 패턴을 찾으면 A가 있기 때문에 대응되는 문자열 찾습니다. |
^ | 입력의 시작 부분에 대응 ^다음의 내용으로 시작 |
'hi A'에서 /^A/면 정규식 패턴의 대응되는 문자열을 잦지 못함 ^는 문자열의 시작을 의미하기 때문 'A Good' : /^A/면 정규식 패턴의 대응 |
$ | 입력의 끝부분에 대응 | /t$/는 문자열이 t로 끝난다는 뜻 eat는 t로 끝나기 때문에 대응됩니다 |
{n} | 앞 표현식이 n번 나타나는 부분에 대응 n은 반드시 양의 정수 |
/e{2}/는 green의 ee에 대응되고 red는 e에 대응하지 않습니다. greeeeen은 e가 5개 이지만 처음 ee에 대응됩니다. |
{n, m} | n과 m은 양의 정수이고 n <= m을 만족해야 합니다. 앞 표현식이 최소 n개, 최대 m개가 나타나는 부분에 대응 됩니다. |
/e{1,3}/ 은 e가 최소 1개 이상 최대 3개를 의미 red의 e에 대응되고 green의 ee에 대응되고 greeeeen은 e가 5개 이지만 처음 eee에 대응 됩니다. |
* | * 앞의 표현식이 0회 이상 반복되는 부분과 대응 {0, }와 같은 의미 |
/ez*/은 문자열에 e를 포함하고 e다음문자로 z가 0회 이상 즉 z가 없을수도 있고 있을수도 있다는 의미 문자열 boom의 b는 대응되고 A bird 의 b에는 대응되지 않습니다. |
+ | + 앞의 표현식이 1회 이상 반복되는 부분과 대응 {1, } 와 같은 의미 |
/ez+/은 문자열에 e를 포함하고 e다음문자로 z가 반드시 1회 이상 있어야 함 /bo+/ 문자열 boom의 boo는 대응되고 A bird 의 b에는 대응되지 않습니다. |
? | ? 앞의 표현식이 0 또는 1회 등장하는 부분과 대응 { 0, 1 }과 같은 의미 |
/e?le/는 e가 없어도 되고 있다면 1회를 의미하기 때문에 결국 문자열에 I, el, ele, le를 포함하고 있는지 대응 angel 은 le가 대응되고 oslo 의 l이 대응 |
. | 단일문자에 대응 | /.n/ 은 an apple 에서 an에 대응 |
(x) | 괄호안에 패턴 전체에 적용 | /foo{1,2}/는 마지막 o에만 {1,2}가 적용되어서 o가 최소 한번 최대 2번 나타나는것을 대응 |
(?:x) | 위 와 동일, 차이점은 대응되는 결과를 기억하지 않음 | |
x(?=y) | x 뒤에 y가 뒤따라오는 경우에만 대응 이것을 lookahead라고 부릅니다. |
/\ㅇ+(?=g)/ 는 숫자뒤에 g가 따라오는 경우에만 대응 an apple is 200g 의 200에 대응 |
x(?!y) | x 뒤에 y가 없는 경우에만 대응 이것을 negative lookahead라고 부릅니다. |
|
x|y | x 또는 y에 대응 | /green|red/ 는 문자열 green 또는 red가 포함되어 있는지 대응 green apple 의 green에 대응되고 red apple의 red에 대응됩니다. |
[xyz] | 문자셋입니다. - 하이픈을 사용해서 문자의 범위지정 | [a-d] 는 [ abcd ]와 똑같이 동작하면 문자열 a,b,c,d 중에 하나라도 있으면 대응 red의 r에 대응 |
[^xyz] | 부정 문자셋, 패턴에 포함된 문자가 없는지와 대응 하이픈을 사용해서 문자의 범위를 지정할수 있음 |
[^a-d] 는 a,b,c,d 모두 없는지 대응 |
[\b] | 백스ㅍ에이스에 대응 | |
\b | 문자열에 있는 단어의 경계, 즉 시작 문자와 종료문자에 대응 | /\bm/은 문자열의 단어 중에 m으로 시작하는 단어에 대응 moon의 m에 대응 /oon\b/는 문자열의 단어 중에 oon으로 종료하는 단어에 대응 moon의 oon과 대응 |
\B | 단어 경계가 아닌 부분에 대응 | |
\d | 숫자 문자에 대응 [ 0 - 9 ]와 동일 | /\d/ 는 ezen5에서 5에 대응 |
\D | 숫자 아닌 문자에 대응 [ ^0 - 9 ]와 동일 | /\D/ 는 ezen5에서 e에 대응 |
플래그
정규 표현식은 전역 탐색이나 대소문자 무시와 같은 특성을 지정하는 플래그를 가질 수 있습니다. 플래그는 단독으로 사용할 수도 있고, 순서에 상관 없이 한꺼번에 여럿을 지정할 수도 있습니다.
플래그설명대응하는 속성
d | 부분 문자열 일치에 대해 인덱스 생성. | RegExp.prototype.hasIndices (en-US) |
g | 전역 탐색. | RegExp.prototype.global |
i | 대소문자를 구분하지 않음. | RegExp.prototype.ignoreCase |
m | 여러 줄에 걸쳐 탐색. | RegExp.prototype.multiline |
s | 개행 문자가 .과 일치함. | RegExp.prototype.dotAll |
u | "unicode", 패턴을 유니코드 코드 포인트의 시퀀스로 간주함. | RegExp.prototype.unicode (en-US) |
y | "접착" 탐색, 대상 문자열의 현재 위치에서 탐색을 시작함. sticky (en-US)를 참고하세요. | RegExp.prototype.sticky (en-US) |
패턴설명
^ab | 줄(Line) 시작에 있는 ab와 일치 |
ab$ | 줄(Line) 끝에 있는 ab와 일치 |
. | 임의의 한 문자와 일치 |
a|b | a 또는 b와 일치 |
ab? | b가 없거나 b와 일치 |
{5} | 5개 연속 일치 |
{5,} | 5개 이상 연속 일치 |
{3,5} | 3개 이상 5개 이하(3~5개) 연속 일치 |
[abc] | a 또는 b 또는 c와 일치 |
[a-z] | a부터 z 사이의 문자 구간에 일치 (영어 소문자) |
[A-Z] | A부터 Z 사이의 문자 구간에 일치 (영어 대문자) |
[0-9] | 0부터 9 사이의 문자 구간에 일치 (숫자) |
[가-힣] | 가부터 힣 사이의 문자 구간에 일치 (한글) |
\w | 63개 문자(Word, 대소영문52개 + 숫자10개 + _)에 일치 |
\b | 63개 문자에 일치하지 않는 문자 경계(Boundary) |
\d | 숫자(Digit)에 일치 |
\s | 공백(Space, Tab 등)에 일치 |
(?=) | 앞쪽 일치 (Lookahead) |
(?<=) | 뒤쪽 일치 (Lookbehind) |
- **줄 시작(^)**과 **줄 끝($)**은 각각 문자열의 시작과 끝에서 특정 패턴을 찾는 데 사용됩니다.
- **임의의 문자(.)**는 한 개의 임의의 문자와 일치합니다.
- **선택(a|b)**은 a 또는 b 중 하나와 일치합니다.
- **옵션(ab?)**은 b가 없거나 있을 때 모두 일치합니다.
- **반복({n}, {n,}, {n,m})**은 반복되는 문자 패턴을 찾는 데 사용됩니다. {n}은 정확히 n번, {n,}은 n번 이상, {n,m}은 n번 이상 m번 이하의 반복을 의미합니다.
- **문자 클래스([])**는 특정 문자 집합에 일치하는 패턴을 지정합니다. 예를 들어 [a-z]는 소문자 알파벳, [0-9]는 숫자와 일치합니다.
- **특수 문자(\w, \b, \d, \s)**는 자주 사용하는 문자 유형을 나타냅니다. \w는 단어 문자(알파벳, 숫자, 언더스코어), \d는 숫자, \s는 공백을 의미합니다.
- **전방 탐색과 후방 탐색((?=), (?<=))**은 특정 조건을 만족하는 위치를 찾는 데 사용됩니다. 전방 탐색은 조건에 맞는 부분이 뒤에 있는지 확인하고, 후방 탐색은 조건에 맞는 부분이 앞에 있는지 확인합니다.
const re = new RegExp("pattern", "flags");
const regex = /foo/g;
console.log(regex.global); // true
const str = "fooexamplefoo";
const str1 = str.replace(regex, "");
console.log(str1); // example
const regex1 = /foo/;
const str2 = str.replace(regex1, "");
console.log(str2); // examplefoo
const re = /\w+\s/g;
const str = "fee fi fo fum";
const myArray = str.match(re);
console.log(myArray);
// ["fee ", "fi ", "fo "]
const re = /\w+\s/g;
const regex1 = new RegExp('foo', 'g');
console.log(regex1.global);
// Expected output: true
const regex2 = new RegExp('bar', 'i');
console.log(regex2.global);
// Expected output: false
전화번호 정규식
// 사용자로부터 입력받은 휴대폰 전화번호
const tel1 = '010-1122-345구';
const tel2 = '010-1122-3456';
// 정규 표현식 리터럴로 휴대폰 전화번호 패턴을 정의
const regExp = /^\d{3}-\d{4}-\d{4}$/;
// 휴대폰 전화번호 패턴에 매칭하는지 테스트(확인)
let x = regExp.test(tel1); // -> false
let y = regExp.test(tel2); // -> true
console.log(x); // false
console.log(y); // true
전화번호 정규식
핸드폰번호 정규식
let regExp = /^\d{3}-\d{3,4}-\d{4}$/;
일반 전화번호 정규식
let regExp = /^\d{2,3}-\d{3,4}-\d{4}$/;
이메일 정규식
regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
/ 안에 있는 내용은 정규표현식 검증에 사용되는 패턴 /
대소문자를 구분하지 않도록 i를 사용
^ 처음시작하는 부분부터 일치
[0-9a-zA-Z] 하나의 문자가 []안에 위치한 규칙을 따른다는 것으로 숫자와 알파벳 소문지 대문자인 경우를 뜻 함
* 이 기호는 0또는 그 이상의 문자가 연속될수 있음
'javascript+es6' 카테고리의 다른 글
[ javascript ] 27. BOM ( window, navigator, screen, location, history ) (2) | 2024.04.05 |
---|---|
[ javascript ] 26. form 요소 (0) | 2024.03.27 |
[ javascript ] 24. window.localStorage (0) | 2023.11.28 |
[ javascript ] 23. 모듈 (0) | 2023.11.15 |
[ javascript ] 22. Prototype(프로토타입), 생성자함수 , 클래스 (0) | 2023.11.13 |