[JS] 정규표현식

seung·2022년 4월 28일

[MGS] 온라인 강의

목록 보기

4/5

정규표현식

정규 표현식은 new RegExp('표현', '옵션') 와 리터럴 방식(/표현/옵션)으로 나타낼 수 있다.

옵션은 선택사항으로 기재하지 않아도 동작한다.

const regexp1 = new RegExp('^abc');
const regexp2 = new RegExp('[a-z]', 'gi');

const regexp3 = /^abc/;
const regexp4 = /[a-z]/gi;

match

문자열.match(정규식) 와 같이 사용하며, 일치하는 문자열의 배열(Array)을 반환한다.

찾고싶은 표현만 작성하고 옵션을 넣지 않을 경우, 문장에서 제일 처음에 찾아진 단어만 배열에 담아 반환한다.

const str = `
010-1234-5678
seung@naver.com
https://www.api.com/?apikey=123&s=ff
kim seung won
Hi, Seung
`;

const regexp = /seung/; // new RegExp('seung', '')
console.log(str.match(regexp)); // ["seung"]

문장에서 주어진 모든 단어를 찾아 배열에 넣고 싶으면, 옵션에 g 플래그를 넣으면 된다.

const regexp = /seung/g; // new RegExp('seung', 'g')
console.log(str.match(regexp)); // ["seung", "seung"]

대소문자 구분없이 찾고 싶다면, 옵션에 i 플래그를 추가하면 된다.

const regexp = /seung/gi; // new RegExp('seung', 'gi')
console.log(str.match(regexp)); // ["seung", "seung", "Seung"]

test

정규식.test(문자열) 와 같이 사용하며, 일치 여부(Boolean)를 반환한다.

const str = `
010-1234-5678
seung@naver.com
https://www.api.com/?apikey=123&s=ff
kim seung won
Hi, Seung
`;

const regexp = /api/gi;
console.log(regexp.test(str)); // true

const regexp2 = /apple/gi;
console.log(regexp2.test(str)); // false

replace

문자열.replace(정규식, 대체문자) 와 같이 사용하며, 일치하는 문자열을 대체하고 대체된 문자열(String)을 반환한다.

원본 데이터를 손상시키지는 않는다.

const str = `
010-1234-5678
seung@naver.com
https://www.api.com/?apikey=123&s=ff
kim seung won
Hi, Seung
`;

const regexp = /won/gi;
console.log(str.replace(regexp, 'AAA')); // ... kim seung AAA ...
console.log(str); // ... kim seung won ...

플래그

g: 모든 문자 일치 (global)
i: 영어 대소문자를 구분하지 않고 일치 (ignore case)
m: 여러 줄 일치 (multi line)

예제

m 플래그를 추가함으로써 전체 문자열이 진짜로 끝나는 마지막 부분이 아니라 시각적으로 볼 수 있는 각각의 줄에서 마침표가 있는지 찾을 수 있다.

const str = `
010-1234-5678
seung@naver.com
https://www.api.com/?apikey=123&s=ff
kim seung won.
Hi, Seung
`;

console.log(str.match(/\.$/gim)); // . 부분을 찾고 싶을 때

✨ 정규 표현식의 기능으로 해석이 되는 특수문자를 표현식에 넣고 싶을 때 백슬래시(\)를 특수문자 앞에 넣어서 나타낼 수 있다.

패턴

^ab: 줄(Line) 시작에 있는 ab와 일치
ab$: 줄(Line) 끝에 있는 ab와 일치
.: 임의의 한 문자와 일치
a|b: a 또는 b와 일치
ab?: b가 없거나 b와 일치
{3}: 3개 연속 일치
{3,}: 3개 이상 연속 일치
{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)

예제1

const str = `
010-1234-5678
seung@naver.com
https://www.api.com/?apikey=123&s=ff
kim seung won.
Hi, Seung
m`;

/* $ */
console.log(
  str.match(/m$/g); // 문자열 전체의 맨 끝에 있는 m → ["m"]
);
console.log(
  str.match(/m$/gm); // 각 줄의 끝이 m → ["seung@naver.com", "m"]
);

/* ^ */
console.log(
  str.match(/^k/gm); // 각 줄의 시작이 m → ["kim seung won"]
);

예제2

const str = `
010-1234-5678
seung@naver.com
https://www.api.com/?apikey=123&s=ff
hxyp
http://www.abc.com
m`;

/* . */
console.log(
  str.match(/./g); // 문자열 전체를 한 글자씩 잘라서 배열로 반환 (띄어쓰기 포함)
);
console.log(
  // h와 p 사이에 아무 단어나 두 글자가 포함된 단어 찾기 → ["http", "hxyp"]
  str.match(/h..p/g); 
);

/* a|b */
console.log(
  str.match(/api|naver/g); // api 또는 naver 단어 찾기
);

/* ab? */
console.log(
  // http 뒤에 s가 있거나 없는 단어 찾기 → ["https", "http"]
  str.match(/https?/g);
);

예제3

const str = `
010-1234-5678
seung@naver.com
abbcccdddd
https://www.api.com/?apikey=123&s=ff
http://www.abc.com
`;

/* {2} */
console.log(
  // d가 2개 연속 일치하는 단어 찾기 → ["dd", "dd"]
  str.match(/d{2}/g);
);

/* {2,} */
console.log(
  // d가 2개 이상 연속 일치하는 단어 찾기 → ["dddd"]
  str.match(/d{2,}/g);
);

/* {2,3} */
console.log(
  // d가 2개 이상, 3개 이하 연속 일치하는 단어 찾기 → ["ddd"]
  str.match(/d{2,3}/g);
);

예제4

const str = `
010-1234-5678
https://www.api.com/?apikey=123&s=ff
`;

/* [ ] */
console.log(
  // 숫자 1개 이상이 연속되는 단어 찾기 → ["010", "1234", "5678", "123"]
  str.match(/[0-9]{1,}/g);
);

예제5

const str = `
010-1234-5678
https://www.api.com/?apikey=123&s=apple
http://www.abc.com
`;

console.log(
  // 바운더리로 나누고 a로 시작하는 모든 영단어를 찾기 → ["apple", "abc"]
  str.match(/\ba\w{1,}\b/g);
);

예제6

const str = `
010-1234-5678
seung@naver.com
https://www.api.com/?apikey=123&s=ff
kim seung won.
Hi, Seung
m`;

/* 앞쪽 일치 */
console.log(
	// @ 앞쪽이 한 글자 이상인 단어 찾기 → ["seung"]
  str.match(/.{1,}(?=@)/g);
);

/* 뒤쪽 일치 */
console.log(
	// @ 뒤쪽이 한 글자 이상인 단어 찾기 → ["naver.com"]
  str.match(/(?<=@).{1,}/g);
);