javaScript(정규표현식)

정규표현식

---

정규표현식이란 문자열을 검색하고 대체하는 데 사용 가능한 일종의 형식 언어(패턴)이다.
간단한 문자 검색부터 이메일, 패스워드 검사 등의 복잡한 문자 일치 기능 등을 정규식 패턴으로 빠르게 수행할 수 있다.
단 정규식 패턴이 수행 내용과 매치가 잘 안 되어 가독성이 많이 떨어지기 때문에 입문자들이 어려워하는 경우가 많다.
하지만 초반 개념만 잘 잡으면 금방 익숙해질 수 있다.

정규표현식은 크게 다음과 같은 역할을 수행한다.

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

정규표현식 테스트 사이트

---

https://regex101.com/
https://regexr.com/
https://regexper.com/

자바스크립트 정규식 생성

---

생성자 함수 방식

RegExp생성자 함수를 호출하여 사용할 수 있다.

const regexp1 = new RegExp("^abc");
// new RegExg(표현식)

const regexp2 = new RegExp("^abc", "gi");
// new RegExg(표현식, 플래그)

리터럴(Literal) 방식

정규표현식은 /로 감싸진 패턴을 리터럴로 사용한다.

const regexp1 = /^abc/;
// /표현식/

const regexp2 = /^abc/gi;
// /표현식/플래그

보통의 경우에는 리터럴 방식이 훨씬 편리하다.
하지만 상황에 따라 RegExg 생성자 함수를 써야만 하는 경우도 있다.

자바스크립트 메소드

---

메소드	문법	설명
exec	정규식.exec(문자열)	일치하는 하나의 정보(Array) 반환
test	정규식.test(문자열)	일치 여부(Boolean) 반환
match	문자열.match(정규식)	일치하는 문자열의 배열(Array) 반환
search	문자열.search(정규식)	일치하는 문자열의 인덱스(Number) 반환
replace	문자열.replace(정규식,대체문자)	일치하는 문자열을 대체하고 대체된 문자열(String) 반환
split	문자열.split(정규식)	일치하는 문자열을 분할하여 배열(Array)로 반환
toString	생성자_정규식.toString()	생성자 함수 방식의 정규식을 리터럴 방식의 문자열(String)로 반환

test메서드 활용예제

const str = `
010-1234-5678
abc1234@gmail.com
http://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
aabbccdddd
`

const regexp = /fox/gi
console.log(regexp.test(str))

결과

replace메서드 활용예제

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

const str = `
010-1234-5678
abc1234@gmail.com
http://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
aabbccdddd
`

const regexp = /fox/gi
console.log(str.replace(regexp, 'AAA'))
console.log(str)

결과

수정된 내용을 원본데이터에 할당시키는 방법

// str을 const에서 수정이 가능한 let로 수정
let str = `
010-1234-5678
abc1234@gmail.com
http://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
aabbccdddd
`

const regexp = /fox/gi
// str에 수정할 내용을 할당
str = str.replace(regexp, 'AAA')
console.log(str)

결과

플래그(옵션)

---

메소드	설명
g	모든 문자와 여러 줄 일치(global)
i	영어 대소문자를 구분 않고 일치(insensitive, ignore case)
m	여러 줄 일치(multi line)
u	유니코드(unicode)
y	lastIndex 속성으로 지정된 인덱스에서만 1회 일치(sticky)

g(global) 플래그 활용예제

let str에서 the를 찾는 예제

let str = `
010-1234-5678
the1234@gmail.com
http://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
aabbccdddd
`

const regexp = /the/g
console.log(str.match(regexp))

결과

i(insensitive, ignore case) 플래그 활용예제

let str 에서 대소문자 상관없이 the를 찾는 예제

let str = `
010-1234-5678
the1234@gmail.com
http://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
aabbccdddd
`

console.log(str.match(/the/gi))

결과

m(multi line) 플래그 활용예제

let str에서 각 문장 마지막에 .이 있는 문장을 찾는 예제

let str = `
010-1234-5678
the1234@gmail.com
http://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
aabbccdddd
`

// .은 js에서 특정한 기능으로 작동하기 때문에 
// ＼(백슬래시)기호를 넣어 일반적인 문자로 해석되게 하기위에 앞에 넣는다.
// $ - 줄(Line)의 끝에서 일치, /xyz$/
console.log(str.match(/\.$/gim))

이스케이프 문자(Escape Character)란 ＼(백슬래시)기호를 통해 본래의 기능에서 벗어나 상태가 바뀌는 문자를 말한다.

결과

정규식 패턴(표현식)

---

정규식 패턴	설명
^	줄(Line)의 시작에서 일치, /^abc/
$	줄(Line)의 끝에서 일치, /xyz$/
.	임의의 한 문자와 일치
a|b	a 또는 b와 일치, 인덱스가 작은 것을 우선 반환
*	0회 이상 연속으로 반복되는 문자와 가능한 많이 일치, {0,}와 동일
*?	0회 이상 연속으로 반복되는 문자와 가능한 적게 일치(lazy), {0}와 동일
+	1회 이상 연속으로 반복되는 문자에 가능한 많이 일치, {1,}와 동일
+?	1회 이상 연속으로 반복되는 문자에 가능한 적게 일치(lazy), {1}와 동일
?	없거나 1회 가능한 많이 일치
??	없거나 1회 가능한 적게 일치(lazy)
{3}	3(숫자)개 연속 일치
{3},	3개 이상 연속 일치
{3,5}	3개 이상 5개 이하(3~5개) 연속 일치
{3,5}?	3개 이상 5개 이하(3~5개) 연속 중 가능한 적은 3개 연속 일치(lazy), {3}와 동일
()	캡처(Capture)할 그룹
?<>	캡처 그룹 이름 지정, /(?<name>pattern)/ ES2018
(?:)	캡처(Capture)하지 않는 그룹
(?=)	앞쪽 일치(Lookahead), /ab(?=c)/
(?!)	부정 앞쪽 일치(Negative Lookahead), /ab(?!c)/
(?<=)	뒤쪽 일치(Lookbehind), /(?<=ab)c/ ES2018
(?<!)	부정 뒤쪽 일치(Negative Lookbehind), /(?<!ab)c/ ES2018
[abc]	a 또는 b 또는 c와 일치, 점( . )이나 별표( * ) 같은 특수 문자는 []안에서 특수 문자가 아님, /\.[.]/
[a-z]	a부터 z 사이의 문자 구간에 일치(영어 소문자)
[A-Z]	A부터 Z 사이의 문자 구간에 일치(영어 대문자)
[0-9]	0부터 9 사이의 문자 구간에 일치(숫자)
[가-힣]	가부터 힣 사이의 문자 구간에 일치(한글)
[2-7]	2부터 7 사이의 문자 구간에 일치(2,3,4,5,6,7)
[b-f]	b부터 f 사이의 문자 구간에 일치(b,c,d,e,f)
[다-바]	다부터 바 사이의 문자 구간에 일치(다,라,마,바)
[^abc]	a 또는 b 또는 c가 아닌 나머지 문자에 일치(부정)
\	이스케이프 문자, /\.\?\/\$\^/
\b	63개 문자(영문 대소문자 52개 + 숫자 10개 + _(underscore))가 아닌 나머지 문자에 일치하는 경계(boundary)
\B	63개 문자에 일치하는 경계
\d	숫자(Digit)에 일치
\D	숫자가 아닌 문자에 일치
\p{}	유니코드 속성(Property) 집합에 맞는 문자에 일치, /\p{Emoji}/u ES2018
\P{}	유니코드 속성 집합에 맞지 않는 문자에 일치, /\p{Uppercase}/u ES2018
\s	공백(Space, Tab 등)에 일치
\S	공백이 아닌 문자에 일치
\w	63개 문자(Word, 영문 대소문자 52개 + 숫자 10개 + _)에 일치
\W	63개 문자가 아닌 나머지 문자에 일치
\x	16진수 문자에 일치, /\x61/는 a에 일치
\0	8진수 문자에 일치, /\141/은 a에 일치
\u	유니코드(Unicode) 문자에 일치, /\u0061/는 a에 일치
\c	제어(Control) 문자에 일치
\f	폼 피드(FF, U+000C) 문자에 일치
\n	줄 바꿈(LF, U+000A) 문자에 일치
\r	캐리지 리턴(CR, U+000D) 문자에 일치
\t	탭 (U+0009) 문자에 일치
$`	문자 대체(replace) 시 일치한 문자 이전 값 참조
$'	문자 대체(replace) 시 일치한 문자 이후 값 참조
$+	문자 대체(replace) 시 마지막으로 캡처된 값 참조
$&	문자 대체(replace) 시 일치한 문자 결과 전체 참조
$_	문자 대체(replace) 시 입력(input)된 문자 전체 참조
$1~9	문자 대체(replace) 시 캡처(Capture)된 값 참조

문장은 LoremIpsum 페이지에서 참고
https://regex101.com/ 에서 테스트

$ 활용예제

let str에서 문장이 끝나는 지점에 d가 있는 문장을 찾는 다.
m이 없으면 각 문장이 끝나는 지점이 아닌 마지막 ` 기호 앞이 마지막이 된다.

let str = `
010-1234-5678
the1234@gmail.com
http://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
aabbccdddd
d`

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

결과

^ 활용예제

let str에서 문장이 시작하는 지점에 t가 있는 문장을 찾는다.
대소문자 구분없이 t를 찾고 싶으면 i를 넣으면 된다.

let str = `
010-1234-5678
the1234@gmail.com
http://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
aabbccdddd
d`

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

. 활용예제

임의의 한 문자와 일치
let str내에 있는 문장 중 h로 시작해서 p로 끝나는 4글자를 찾는다.

let str = `
010-1234-5678
the1234@gmail.com
http://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
aabbccdddd
hxyp
`

console.log(
  str.match(/h..p/g)
)

결과

a|b 활용예제

a 또는 b와 일치
let str내에서 fox 또는 dog를 찾는다.

let str = `
010-1234-5678
the1234@gmail.com
http://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
aabbccdddd
hxyp
`

// fox|dog - a 또는 b와 일치
console.log(
  str.match(/fox|dog/g)
)

결과

ab? 활용예제

?앞에 있는 글자가 있을 수도 없을 수도 있다.
let str내에서 https를 찾는데 s는 있을 수도 없을 수도 있는 단어를 찾는다.

let str = `
010-1234-5678
the1234@gmail.com
https://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
aabbccdddd
http://localhost:1234
`

// https? - ?앞에 있는 글자가 있을 수도 없을 수도 있다.
console.log(
  str.match(/https?/g)
)

결과

{3,2}, ＼b 활용예제

1. 63개 문자(영문 대소문자 52개 + 숫자 10개 + _(underscore))가 아닌 나머지 문자에 일치하는 경계안에서 2개이상 3개이하인 단어를 찾는다.

2. f로 시작하는 모든 단어를 찾는다.

let str = `
010-1234-5678
the1234@gmail.com
https://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
aabbccdddd
http://localhost:1234
동해물과_백두산이 마르고 닳도록
`

console.log(
  str.match(/\b\w{2,3}\b/g)
)
console.log(
  // f로 시작하는 모든 단어를 찾는다.
  str.match(/\bf\w{1,}\b/g)

결과

1. 

2.