📝 [JS 공부기록] 정규표현식(Regular Expression)

정규표현식 공부?

string 데이터를 다루다 보면 특정 문자를 찾거나 대체해야 하는 경우가 많이 발생합니다. 그럴 때 slice, splice를 쓰기에는 애매하거나 찾고자 하는 문자열이 있을 때는 정규표현식을 써야합니다.

그런데 정규표현식이 워낙 직관적이지 않게 생겨서 이해가 어려운데요.
필요할 때 마다 찾아 쓰는 것도 좋은 방법이지만, 찾아보려면 이해하기 위해 시간이 걸리는 경우가 많습니다.

그래서 한 번 정리해두면 나중에 이해하기도 편하고 쉽게 찾아 쓸 수 있어서 정리 해보려고 합니다. 모든 정규표현식을 다루지는 않고 많이 사용되는 정규표현식 위주로 기록 해보겠습니다.

그전에 정규표현식의 역할에 대해 설명하자면,

1. 문자검색(search)
2. 문자 대체(replace)
3. 문자 추출(extract)

이 세가지 역할이 있습니다.

JS 정규식 생성

두 가지 정규식 생성 방식

JS에서는 정규식을 만드는 방법에 두 가지가 있습니다. 주로 리터럴 방식을 쓰기는 하지만 생성자 함수 방식도 알아둘 필요가 있습니다!

1. 생성자 함수 방식

new RegExp('표현', '옵션')

new RegEcp('[a-z]', 'gi') <- 예시

2. 리터럴(Literal) 방식

/표현/옵션

/[a-z]/gi <- 예시

플래그 옵션

정규표현식의 플래그에 따른 옵션을 알아봅시다.

• g : 모든 문자 일치(global)

• i : 영어 대소문자를 구분 않고 일치(ignore case)

• m : 여러 줄 일치(multi line)

위와 같은 옵션들로 원하는 값을 찾을 수 있습니다!

패턴(표현)

옵션들을 활용해서 어떠한 패턴들로 정규표현식이 활용되는지 알아봅시다!

^ab - 줄(Line) 시작에 있는 ab와 일치

console.log(
	str.match(/^t/gm)
)

=> 한 라인에서 t 로 시작하는 문자를 출력한다.

ab$ - 줄(Line) 끝에 있는 ab와 일치

console.log(
	str.match(/d$/gm)
)

=> 한 라인에서 d로 끝나는 문자를 출력한다.

. - 임의의 한 문자와 일치

console.log(
	str.match(/a.c/gm)
)

=> 한 라인에서 a 와 c 를 양 끝으로 하는 문자를 출력한다.

a | b - a 또는 b 와 일치

console.log(
	str.match(/fox|dog/gm)
)

=> fox이거나 dog인 문자를 출력한다. 먼저 찾은 것을 출력

ab? - b가 없거나 b와 일치

console.log(
	str.match(/https?/g)
)

=> s 가 있을 수도 있고 없을 수도 있는 http 문자를 출력한다.

{3} - 3개 연속 일치

{3, } - 3개 이상 연속 일치

{3, 5} - 3개 이상 5개 이하(3~5) 연속 일치

console.log(
	str.match(/d{2}/g)
)

=> d 가 두 개 연속된 문자 출력한다.

console.log(
	str.match(/d{2, }/g)
)

=> d 가 두 개 이상 연속된 문자 출력한다.

console.log(
	str.match(0-9{1, 3})
)

=> 0 ~ 9 숫자 사이의 1개에서 3개 이상 연속된 숫자를 출력한다.

[a-z] | a부터 z 사이의 문자 구간에 일치(영어 소문자)

[A-Z] | A부터 Z 사이의 문자 구간에 일치(영어 대문자)

[0-9] | 0부터 9 사이의 문자 구간에 일치(숫자)

[가-힣] | 가부터 힣 사이의 문자 구간에 일치(한글)

console.log(str.match(/\bf\w{1, }\b/g))

=> 63개 문자에 포함되지 않으면 경계로 바꿈(소문자 f로 시작하는 모든 영단어 찾기)

const h = '    the   hello   wrold    !'

console.log(
	h.replace(/\s/g, '')
)

=> 공백을 지워주는 코드

(?=) | 앞쪽 일치(Lookahead)

(?<=) | 뒤쪽 일치(Lookbehind)

str = "asdf1234@naver.com"

console.log(
	str.match(/.{1, }(?=@)/g)
)

=> @ 앞쪽의 아이디 부분만 출력한다.

str = "asdf1234@naver.com"

console.log(
	str.match(/(?<=@).{1, }/g)
)

=> @ 뒤에 부분을 찾아 줄력한다.

참고하면 좋은 사이트

RegExr: Learn, Build, & Test RegEx

이곳에서 정규표현식을 테스트 할 수도 있다.