정규표현식

da.circle·2023년 1월 15일

JavaScript

출처1)정규표현식 패턴들 - 생활코딩
출처2)모던 JavaScript 튜토리얼 - 패턴과 플래그

특정한 조건의 문자를 '검색'하거나 '치환'하는 과정을 매우 간편하게 처리 할 수 있도록 하는 수단이다. (출처: 생활코딩)
자바스크립트에서는 RegExp 객체와 문자열 메소드를 조합해 정규표현식을 사용한다.

정규 표현식 사용 방법

긴 문법

regexp = new RegExp("pattern", "flags");

짧은 문법

플래그가 없는 경우

regexp = /pattern/;

플래그가 있는 경우

regexp = /pattern/flag;

플래그

정규 표현식에는 검색에 영향을 주는 플래그를 선택해 붙일 수 있다.
여러개를 중복해 붙일 수도 있다.

i

대·소문자 구분 없이 검색한다.

g

패턴과 일치하는 모든 것들을 찾는다.
g 플래그가 없으면 패턴과 일치하는 첫 번째 결과만 반환한다.

m

다중 행 모드(multiline mode)를 활성화한다.
참고) 앵커 ^와 $의 여러 행 모드, 'm' 플래그

s

.이 개행 문자 \n도 포함(‘dotall’ 모드를 활성화)한다.
참고) 문자 클래스

u

유니코드 전체를 지원한다.
서로게이트 쌍(surrogate pair)을 올바르게 처리할 수 있다.
참고) 유니코드: 'u' 플래그와 \p{...} 클래스

y

문자 내 특정 위치에서 검색을 진행하는 ‘sticky’ 모드를 활성화한다.
참고) Sticky flag "y", searching at position

특정 문자열

/찾으려고 하는 문자열/

예시

/Hello/g → Hello World!
/hello/→ Hello World!

앞, 뒤에 오는 특정 문자열

^

^특정 문자열

앞에 먼저 오는 문자열만 찾는다.

예시

/^who/g → who is who

$

특정 문자열$

뒤에 오는 문자열만 찾는다.

예시

/who$/m → who is who
^$ → $12$ \-\ $25$
- 아무것도 선택되지 않는 이유 : ^(시작)과 $(끝) 사이에 아무 문자열도 없다.

이스케이프 문자

\

$같은 기능을 가진 문자를 일반 텍스트로 바꾼다. (\ 뒤에 오는 문자를 일반 문자열로 escape시킨다고 생각하면 될 것 같다)

예시

/\$/g → $12$ \-\ $25$
- '$'만 찾는다.
/^\$/g → $12$ \-\ $25$
- 처음(^)에 오는 '$'만 찾는다.
/\$$/m → $12$ \-\ $25$
- 마지막($)에 오는 '$'만 찾는다.
/\\/g → $12$ \-\ $25$
- '\'을 찾는다.

모든 문자열

.

모든 문자를 선택한다(띄어쓰기 포함).

예시

/./g → Hello World 123!@
/....../g → Regular expressions are powerful!!!
- 띄어쓰기를 포함한 6글자씩 묶었을 때 끝의 5글자('ul!!!')가 남는다.
/./g → O.K.
/\./g → O.K.
/\..\./g → O.K.
- \. : 문자 '.'
- . : 모든 문자(1자리)
- \. : 문자 '.'
  ⇒ '.1자리 문자.'를 찾는다.

[]

[찾으려는 문자 후보군]

대괄호 안에 있는 문자들 중 하나를 찾는다. (대괄호 하나는 문자 하나)

예시

/[oyu]/g → How do you do?
- o 또는 y 또는 u를 찾는다.
/[dH]./g → How do you do?
- [dH] : d또는 H (1글자)
- . : 모든 문자 (1글자)
/[owy][yow]/g → How do you do?
- [owy] : o 또는 w 또는 y 1글자
- [yow] : y 또는 o 또는 w 1글자

문자 범위(-)

[-]

[]안에 원하는 모든 문자열을 넣기에는 무리가 있다.
a-z : 소문자 알파벳 전체(abcdefghijklmnopqrstuvwxyz)
A-Z : 대문자 알파벳 전체(ABCDEFGHIJKLMNOPQRSTUVWXYZ)
0-9 : 숫자 전체(0123456789)
가-힣 : 한글 전체

예시

/[C-K]/g → ABCDEFGHIJKLMNOPQRSTUVWXYZ
/[a-d]/ → abcdefghijklmnopqrstuvwxyz
/[C-Ka-d2-6]/g → ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

부정([^])

[^특정 문자열]

특정 문자열을 제외한 문자열을 선택한다.

예시

/[^CDghi45]/g → ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

서브패턴(subpattern, |)

(문자열1 | 문자열2 | ...)

or의 의미(또는)

예시

/(on|ues|rida)/g → Monday Tuesday Friday
/(Mon|Tues|Fri)day/g → Monday Tuesday Friday
/..(id|esd|nd)ay/g → Monday Tuesday Friday
- .. : 2자리 문자
- (id|esd|nd) : 'id' 또는 'esd' 또는 'nd'
- ay : 'ay'

Quantifier(수량자)

어떤 패턴이 몇 번 나타나는가를 나타낸다.

*

문자열*

'*'앞에 오는 문자열이 0번 ~ 여러번 나타난다. (= 있을수도 없을수도 있다)

예시

/a*b/g → aabc abc bc
- b앞에 오는 a가 0번 ~ 여러번 있다.

+

문자열+

'+'앞에 오는 문자열이 1번 이상 나타난다.(없으면 안된다)

예시

/a+b/g → aabc abc bc
- b앞에 a가 없어도 되고, a가 여러개여도 된다.

?

문자열?

0개 또는 하나만 나타난다.

예시

/a?b/g -> aabc abc bc
- b앞에 a가 없을 수도 있고 하나만 있을 수 도 있다.

{}

{최소갯수, 최대갯수}

길이를 나타낸다.(갯수)

예시

/.{5}/g → One ring to bring them all and in the darkness bind them
- 어떤 문자던간에 5글자이어야 한다. 5글자씩 갯수를 나눴을 때 맨 마지막의 m만 남는다.
/[els]{1,3}/g → One ring to bring them all and in the darkness bind them
- e, l, s가 1글자 이상 3글자 이하여야 한다.
/[a-z]{3,}/g → One ring to bring them all and in the darkness bind them
- 영어 소문자이어야 하고, 3글자 이상이어야 한다. 맨 처음 One이 선택되지 않은 이유는 O가 대문자이기 때문이다.

수량자 + ?

수량자 뒤에 ?가 오게되면 ?의 의미가 달라진다.
수량자 뒤에 ?가 오면 앞의 수량자가 나타내는 가장 작은 수량만을 나타내게 된다.
*? : ?가 뒤에 붙으면 *의 의미가 ?에 의해 0을 나타내게 된다.
+? : ?가 뒤에 붙으면 +의 의미가 ?에 의해 1을 나타내게 된다.
?? : ?가 뒤에 붙으면 ?의 의미가 ?에 의해 0을 나타내게 된다.

예시

/r.*?/g → One ring to bring them all and in the darkness bind them
- r뒤에 오는 모든 문자는 어떤 문자든(.)0개이어야 한다(*?때문에 의미가 바뀜). 따라서 r만을 나타낸다.
/r.+?/g → One ring to bring them all and in the darkkness bind them
- r뒤에 오는 모든 문자는 어떤 문자든(.)1개이어야 한다(+?)때문에 의미가 바뀜).
/r.??/g → One ring to bring them all and in the darkness bind them
- r뒤에 오는 모든 문자는 어떤 문자든(.)0개이어야 한다(??때문에 의미가 바뀜). 따라서 r만을 나타낸다.

Greedy/Lazy quantifier

Greedy quantifier(탐욕적 수량자)

/<div>.+</div>/ → <div>test</div><div>test2</div>
- 수량자를 사용하다보면 위의 예시처럼 모든 문자열이 선택되는 경우가 있는데, 이를 탐욕적(Greedy) 수량자라고 한다.
/<div>.+?</div>/ → <div>test</div> <div>test2</div>
- ?를 추가해서 최소한의 범위로 선택하는 것을 게으른(Lazy) 수량자라고 한다.

상황에 따라 적절한 수량자를 사용해야겠다.

`\`w

word
/[A-z0-9_]/와 같다. 알파벳 대소문자, 숫자, _ 를 모두 포함한다.
공백은 제외한다.

예시

/\w/g → A 1 B 2 c 3 d _ 4 e:5 f f G G 7 7-- _ _--
/\w*/g → A1 B2 c3 d_4 e:5 ffGG77--__--
- \w의 범위에 해당하는 문자들이 올 수도 있고 안 올 수도 있다.
/[a-z]\w*/g → A1 B2 c3 d_4 e:5 ffGG77--__--
- 알파벳 소문자로 시작하고 뒤에는 \w에 해당하는 문자들이 올 수도 있고 안 올 수도 있다.

`\`W

[^A-z0-9_]와 같다.
\w와 정반대의 의미이다.

예시

/\W/g → AS _34:AS11.23 @#$%12^*

`\`d

digit
[0-9]와 같다.

예시

/\d/g → Page 123; published: 1234 id=12#24@112

`\D`

\d와 정반대의 의미이다.
[^0-9]와 같다.

예시

/\D/g → Page 123; published: 1234 id=12#24@112

Word boundary

`\`b

word boundary를 이용해서 원하는 위치의 문자열을 찾을 수 있다.

예시

/\b\w/g → Ere iron was found or tree was hewn, When young was mountain under moon;
- \w 앞에 word boundary를 붙여서 단어의 맨 앞글자만 선택했다.
/\w\b/g → Ere iron was found or tree was hewn, When young was mountain under moon;
- \w 뒤에 word boundary를 붙여서 단어의 맨 뒷글자만 선택했다.
/\bcat/g → cat concat
/cat\b/g → cat concat

`\`B

\b의 반대이다.

예시

/\b./g → cat concat
/\B./g → cat concat
/\B.\B/g → cat concat

(?=패턴)

?= : 뒤에 오는 문자를 찾아서 나타낼때는 뒤에 오는 문자를 제외한다(예시를 봐야 이해가 간다)

예시

/\w+(?=X)/g → AAAX---aaax---111
- X를 기준으로 찾았지만 X를 제외한 AAA만 나타내졌다.
- aaax는 소문자 x이므로 조건에 부합하지 않는다.
/\w+/g → AAAX---aaax---111
/\w+(?=\w)/g → AAAX---aaax---111
- \w+ : AAA, aaa, 11
- (?=\w) : 뒤에 1자리 문자열

자바스크립트 메소드

str.match

str.match(regexp)

문자열 str에서 regexp와 일치하는 것들을 찾는다.

플래그 g가 붙으면 패턴과 일치하는 모든 것을 담은 배열을 반환한다.

let str = "We will, we will rock you"; 
console.log(str.match(/we/gi)); // We,we

→ i플래그를 같이 사용하여 대소문자 구분 없이 검색한다.

플래그 g가 없는 경우에는 패턴에 맞는 첫 번째 부분 문자열만 담은 배열을 반환한다.

let str = "We will, we will rock you";

let result = str.match(/we/i);

console.log(result[0]); // We
console.log(result.length); // 1
console.log(result.index); // 0(문자열의 위치)
console.log(result.input); // We will, we will rock you(원본 문자열)

→ 참고) 정규식을 괄호로 둘러싸면 메소드 호출 시 배열에 0이외에도 다른 index가 있을 수 있다.Capturing groups

플래그 g와 상관없이 패턴과 일치하는 부분 문자열을 찾지 못하면 null을 반환한다.
→ 반환 결과가 항상 배열이 되도록 하려면 다음과 같이 코드를 짜면 된다.

str.match(pattern) || []

str.replace

str.replace(regexp, replacement)

str 문자열 중 regexp에 일치하는 문자열을 replacement로 교체한다.
플래그 g가 있으면 모든 부분 문자열이 교체된다.
플래그 g가 없으면 첫 부분 문자열만 교체된다.

console.log("We will, we will".replace(/we/i, "I")); // I will, we will
console.log("We will, we will".replace(/we/ig, "I")); // I will, I will

regexp.test

regexp.test(str)

패턴과 일치하는 부분 문자열이 하나라도 있는 경우에 true, 아니면 false를 반환한다.

let str = "I love JavaScript";
let regexp = /LOVE/i;

console.log(regexp.test(str)); // true

정규표현식 테스트해볼 수 있는 사이트! regexr.com
얼렁뚱땅 알고있던 정규표현식을 생활코딩 영상과 모던자바스크립트 튜토리얼 사이트를 보면서 정리해보았다. 하나하나만 보면 알겠는데.. 응용을 하려니 어려워진다😥 많이 사용해서 익숙해져야겠다!

da.circle

프론트엔드 개발자를 꿈꾸는 사람( •̀ ω •́ )✧

이전 포스트

부동소수점이란?

다음 포스트