Mong dev blog

이번엔 이 공부 끝내겠다 시리즈/정규표현식

js 정규표현식 기초

by GicoMomg 2021. 9. 10.

1. 정규표현식이란?

  • 정규표현식은 특정 규칙을 가지는 문자열을 찾아내는 방법입니다.
  • 정규표현식을 통해 검색을 할 수도 있고, 해당하는 문자를 변경할 수도 있습니다.

2. 정규식 생성법

정규식을 생성하는 방법에는 2가지 방법이 있습니다.
하나는 리터럴, 또 다른 하나는 RegExp 객체를 생성하는 방법입니다.
그렇다면 이 두 방법 어떤 경우에 쓰는 게 좋을까요?

A. 정규식 패턴이 유지되는 경우

  • 만약 정규식 패턴이 변경되지 않는다면 리터럴 방법을 사용하는 걸 추천합니다.
  • 리터럴 방식은 아래와 같습니다.
    const reg = /ab/;   //ab문자열을 가지는 패턴

B. 정규식 패턴이 변동되는 경우

  • 만약 정규식 패턴에 변수처럼 변동값이 들어가는 경우에는 이 방법을 써야 합니다.
  • new RegExp객체를 생성하여 정규식을 생성합니다.
    const regObj = new RegExp("ab");  //ab문자열을 가지는 패턴

3. flag로 상세 검색을 하자

  • 정규식에서는 i, g 등과 같은 플래그가 존재합니다.
  • 이 플래그를 추가하면 좀 더 상세한 검색이 가능해집니다.
  • 플래그는 정규식 패턴 파트에서 함께 보도록 합시다.

종류 설명
i 검색시 대소문자를 구분치 않도록 설정합니다.
g 검색시 일치하는 모든 문자열을 찾아내도록 합니다.
m 여러 줄의 문자열을 그 상태 그대로, 여러 줄로 비교하도록 합니다.

4. 정규식 패턴

우리는 정규식에 여러 특수문자를 조합하여, 특정 문자를 찾거나 변경할 수 있습니다.
그렇다면 이 패턴에는 무엇이 있을까요? 한 번 알아봅시다.

A. 정규식은 대소문자를 구분한다.

  • 정규식은 기본적으로 대소문자를 구분합니다.
  • 기본적으로 아래 예시처럼 대문자 Hello만 검색되는 걸 알 수 있습니다.
const text = 'Hello, world';
const regex1 = /Hello/;  //Hello문자열을 찾는 패턴
const regex2 = /hello/;  //hello문자열을 찾는 패턴
console.log(text.match(regex1));
console.log(text.match(regex2));
출력 결과
["Hello"]
null
  • 만약 대소문자 구분없이 검색하고 싶다면 정규식에 flag i를 추가해주면 됩니다.
const text = 'Hello, world';
const regex1 = /hello/i;  // 대소문자 구분없이 hello문자열을 찾는 패턴
console.log(text.match(regex1));
출력 결과
["Hello"]

B. 정규식은 공백 문자(공백, 탭, 줄바꿈)을 구분한다.

  • 정규식은 기본적으로 공백 문자를 구분합니다.
  • 아래 예시에서 regex1에서는 text의 띄어쓰기를 지켰고, regex2는 띄어쓰기를 무시했습니다.
  • 결과적으로 정규식은 공백 문자를 구분하므로 regex2에 해당하는 문자열은 없습니다.
const text = 'Hello, world';
const regex1 = /Hello, world/;
const regex2 = new RegExp('Hello,world');
console.log(text.match(regex1));
console.log(text.match(regex2));
출력 결과
["Hello, world"]
null
  • 띄어쓰기와 상관없는 정규식 패턴을 만들려면 문자 *을 합니다.
  • 문자 *은 아래에서 설명하겠지만, 문자가 0번 이상 반복되는 문자열 패턴을 생성하는 역할을 합니다.
const text = 'Hello, world';
let regex1 = 'H *e *l *l *o *, *w *o *r *l *d';
console.log(text.match(regex1));
출력 결과
["Hello, world"]

C. ^, $를 사용해 특정 단어가 줄의 시작 혹은 끝인지 알 수 있다.

  • ^문자 조합은 문자가 문자열의 시작 위치에 있는지 확인할 수 있습니다.
  • text = 오늘 아침은 빵이야인데, 만약 오늘이 맨 앞에 위치해있는지 알고 싶다면 ^오늘을 쓰면 됩니다.
const text = '오늘 아침은 빵이야';
const regex1 = /^오늘/;
console.log(text.match(regex1));
출력 결과
["오늘"]
  • 문자$ 조합은 문자가 문자열의 끝 위치에 있는지 확인할 수 있습니다.
  • 만약 끝 문자열이 빵이야임을 알고 싶다면 빵이야$를 사용합니다.
const text = '오늘 아침은 빵이야';
const regex1 = /빵이야$/;
console.log(text.match(regex1));
출력 결과
["빵이야"]

D. 정규식에서 특수문자는 특정 역할을 한다.

  • 정규표현식에서 $, * 등과 같은 특수문자는 어떤 역할을 수행합니다.
  • 만약 정규표현식에서 특수문자를 문자 그대로 검색하고 싶다면 이스케이프해야 합니다.
  • 이스케이프라고 하니 거창한 거 같지만, \특수문자라고 작성하는 방법입니다.
const text = '$$$$$*****';
const regex1 = /\$/;
const regex2 = /\*/;
const regex3 = /\$\*/;
console.log(text.match(regex1));
console.log(text.match(regex2));
console.log(text.match(regex3));
출력 결과
["$"]
["*"]
["$*"]

E. 특정 패턴이 없는 문자열을 찾을 수 있다.

  • 만약 특정 패턴을 가지지 않는 문자열을 검색하고 싶다면 이 방법을 쓰면 됩니다.
  • (?!패턴)을 사용하면 해당 패턴을 가지지 않는 문자열을 찾을 수 있습니다.
  • 아래 코드는 저녁패턴을 가지지 않는 문자열을 검색합니다.
const text = '아침점심저녁';
const regex1 = /아침(?!저녁)/;
console.log(text.match(regex1));
출력 결과
["아침"]

F. 0번 이상 반복되는 문자열을 찾을 수 있다.

  • 패턴*을 하면 해당 패턴이 0번 이상 반복되는 문자열을 찾을 수 있습니다.
  • 만약 red가 주어졌는데 패턴이 /redc*/라면, c은 0번 반복되므로 이를 제외한 red가 검색됩니다.
const text = "abbbbbbbbbbb";
const regex1 = /ab*/;
const regex2 = /abc*/;
console.log(text.match(regex1))
console.log(text.match(regex2))
출력 결과
["abbbbbbbbbbb"]
["ab"]

G. 1번 이상 반복되는 문자열을 찾을 수 있다.

  • 패턴+을 하면 해당 패턴이 1번 이상 반복되는 문자열을 찾을 수 있습니다.
  • 1번 이상 반복되는 문자열이므로, 해당하는 패턴이 1번이라도 반복되지 않으면 찾지 못합니다.
const text = "abcccccccc";
const regex1 = /abc+/;
const regex2 = /abcd+/;
console.log(text.match(regex1))
console.log(text.match(regex2))
출력 결과
["abcccccccc"]
null

H. 0~1번 반복되는 문자열을 찾을 수 있다.

  • 패턴?을 하면 해당 패턴이 0~1번 반복되는 문자열을 찾을 수 있습니다.
  • 0~1번 반복되는 문자열을 찾는 정규식이므로, 해당 패턴이 없으면 제외한 결과를 찾습니다.
const text = "abcccccccc";
const regex1 = /abc?/;
const regex2 = /abcd?/;
console.log(text.match(regex1))
console.log(text.match(regex2))
출력 결과
["abc"]
["abc"]
  • 어떤 특수문자(*, +, ?, {}) 다음에 ?을 추가하면, 가능한 적은 문자열을 검색합니다.
  • \d+를 하면 숫자를 검색할 수 있는데, /d+?를 하면 가능한 적은 패턴을 검색할 수 있습니다.
const text = "123abc";
const regex1 = /\d+/;   // 가능한 많은 문자열을 매칭
const regex2 = /\d+?/;  // 가능한 적은 문자열을 매칭
console.log(text.match(regex1));  
console.log(text.match(regex2));
검색 결과
["123"]
["1"]

I. 띄어쓰기를 제외한 문자열을 찾을 수 있다.

  • .문자을 하면 띄어쓰기 여부를 제외하고 문자를 검색합니다.
const text = "an apple";
const regex1 = /.n/;
const regex2 = /.ap/;
const regex3 = /an.apple/;
console.log(text.match(regex1));
console.log(text.match(regex2));
console.log(text.match(regex3));
검색 결과
["an"]
[" ap"]
["an apple"]

J. 특정 패턴에 해당하는 모든 경우의 수를 찾을 수 있다.

  • (패턴)를 하면 패턴에 일치하는 문자열을 검색하는데, (패턴)으로 매치되는 모든 경우를 찾습니다.
const text = 'apple orange pear';
const regex1 = /(apple) (orange)/;
console.log(text.match(regex1));
검색 결과
["apple orange", "apple", "orange"]

K. 특정 패턴이 반복되는 문자열을 찾을 수 있다.

  • (?:패턴)을 하면 패턴에 일치하는 문자열을 검색하여, 패턴이 반복되는 경우를 찾습니다.
const text = 'abcabcabc';
const regex1 = /(?:abc)/;
const regex2 = /(?:abc)+/;
console.log(text.match(regex1))
console.log(text.match(regex2))
검색 결과
["abc"]
["abcabcabc"]

L. 특정 문자가 뒤따라오는 문자열을 찾을 수 있다.

  • x(?=y)를 하면 y가 뒤따라오는 x를 찾을 수 있습니다.
const text = 'abcd';
const regex1 = /a(?=b)/;
const regex2 = /ab(?=c)/;
console.log(text.match(regex1))
console.log(text.match(regex2))
검색 결과
["a"]
["ab"]

M. 특정 문자가 뒤따라오지 않는 문자열을 찾을 수 있다.

  • x(?!y)를 하면 y가 뒤따라오지 않는 x를 찾을 수 있습니다.
  • 아래 예시는 소수점이 뒤따라오지 않는 숫자를 찾는 정규식입니다.
const text = '3.141541.123123';
const regex1 = /\d+(?!\.)/;
console.log(text.match(regex1))
검색 결과
["141541"]
  • 만약 조건에 해당하는 모든 경우를 찾고 싶다면 flag g를 추가하면 됩니다.
const text = '3.141541.123123';
const regex1 = /\d+(?!\.)/g;
console.log(text.match(regex1))
검색 결과
["14154", "123123"]

N. 두 가지 경우 중 하나가 일치되는 문자열을 찾을 수 있다.

  • x|y를 하면 x 또는 y와 일치하는 문자열을 찾을 수 있습니다.
  • 마치 js의 or과 유사합니다.
const text = 'green apple';
const regex1 = /green|apple/;
console.log(text.match(regex1))
검색 결과
["green"]
  • 만약 조건에 해당하는 모든 경우를 찾고 싶다면 flag g를 추가합니다.
const text = 'green apple';
const regex1 = /green|apple/g;
console.log(text.match(regex1))
검색 결과
["green", "apple"]

O. 특정 패턴이 특정 수만큼 반복되는 문자열을 찾을 수 있다.

  • x{n}을 하면 x가 n번 나타날 경우를 찾을 수 있습니다.
  • 아래 예시는 p가 1번, 2번, 3번 반복되는 경우를 찾는 정규식입니다.
const text = 'apppppp';
const regex1 = /ap{1}/;
const regex2 = /ap{2}/;
const regex3 = /ap{3}/;
console.log(text.match(regex1))
console.log(text.match(regex2))
console.log(text.match(regex3))
검색 결과
["ap"]
["app"]
["appp"]

P. 특정 패턴이 특정 범위만큼 반복되는 문자열을 찾을 수 있다.

  • x{n, m}을 하면 x가 n~m번 반복되는 경우를 찾을 수 있습니다.
const text = 'apppppp';
const regex1 = /ap{1,4}/;
console.log(text.match(regex1))
검색 결과
["apppp"]

Q. 문자셋([])을 이용할 수 있다.

  • [문자들]은 문자셋이라고 부릅니다.
  • 점(.), 별표(*)와 같은 특수문자는 문자셋 안에서는 단순 문자로 인식됩니다.
  • 하이픈(-)을 사용해 문자의 범위를 지정할 수 있습니다.
const text = 'abcdef';
const regex1 = /[a-d]/;
const regex2 = /[a-d]+/;
const regex3 = /[a-d]/g;
console.log(text.match(regex1))
console.log(text.match(regex2))
console.log(text.match(regex3))
검색 결과
["a"]
["abcd"]
["a","b","c","d"]
  • 만약 p + 숫자인 패턴을 찾고 싶다면 아래와 같이 정규식을 작성할 수 있다.
const point = ['p1', 'p2', 'p3', 'p4', 'p11'];
const text = point.join('');
const regex1 = /p[1-9]+/g;
console.log(text.match(regex1))
검색 결과
['p1', 'p2', 'p3', 'p4', 'p11']
  • [^문자들]을 하면 문자셋 안에 있지 않는 문자열을 찾을 수 있습니다.
  • 이 역시 하이픈(-)을 사용해 문자의 범위를 지정할 수 있습니다.
const text = 'abcdef';
const regex1 = /[^a-d]/;
const regex2 = /[^a-d]+/;
const regex3 = /[^a-d]/g;
console.log(text.match(regex1))
console.log(text.match(regex2))
console.log(text.match(regex3))
검색 결과
["e"]
["ef"]
["e", "f"]




출처
위 포스팅은 아래 출처의 내용을 학습 후 작성되었습니다

반응형

'이번엔 이 공부 끝내겠다 시리즈 > 정규표현식' 카테고리의 다른 글

string을 정규표현식 변환하기  (0) 2021.12.29

관련글

댓글

티스토리툴바