JAVA 웹개발 과정 국비 43일차 정리
43일차
※ 배우는 과정이므로 정확하지 않을 수 있습니다.
잘못된 점은 알려주시면 수정하도록 하겠습니다!
https://regexr.com/ 사이트가 도움이 많이 되었다.
1. 정규표현식(JS)
1) 정규표현식이란?
Regular Expresstion - Regex
텍스트 데이터에 대하여 단순 검색이 아닌 복잡한 조건의 패턴을 찾아내는 기술 (패턴 매칭 기법)
- 문서 뷰어 프로그램 내에 정교한 검색 기능
- 데이터 유효성 검사
- 웹 크롤링
- 로그 분석
- 빅데이터(텍스트 데이터 분석)
2) 정규표현식의 구조
정규표현식은 슬래시를 기준으로 크게 두 가지로 나눌 수 있다.
슬래시(/)는 모든 언어에서 동일하게 사용하는 것은 아니고, 자바 스크립트에서 사용되는 규칙이지만 문법 자체는 모든 언어가 동일하다.
/ Expression / Flag
- Expression : 정규표현식을 사용하여 검색할 곳
- Flag : 옵션 (생략 가능)
3) Flag
u나 y는 다뤄보지 않았다. 잘 쓰이지 않는 것 같다.
| flag | details | 설명 |
|---|---|---|
| g | global | 조건에 맞는 모든 단어 찾기 |
| i | case insensitive | 대,소문자 구분 없이 |
| m | multiline mode | 다중 행 모드 활성화 |
| s | dot all | .이 개행문자(\n) 도 포함하도록 변경 |
| u | unicode | 유니코드 검색할 때 활용 |
| y | stick | 문자 내 특정 위치에서 검색을 진행 |
4) Expression - 특수문자
① .
. 은 모든 문자 한글자와 매칭된다. (개행 \n은 제외)
마찬가지로 .. 는 아무거나 두글자가 된다.
e 다음 아무 한글자 온 후, t가 오는 조건의 단어 여러개 찾기
/e.t/g
eat
eot
ept
apt
ate
② ^ 와 $
| 특수문자 | 설명 |
|---|---|
| ^ | 문장의 시작부분에서 표현식이 매칭될 때만 검색 |
| $ | 문장의 끝부분에서 표현식이 매칭될 때만 검색 |
| ^expression$ | 표현으로 시작해서 표현으로 끝나는 즉, 오로지 표현으로만 구성된 대상을 검색 |
multiline 없이 사용되면, 전체 문장에서 대상을 찾지만
multiline 옵션을 부여하면 각 행마다 검색 대상을 찾는다.
※ ^ 기호는 문맥에 따라 not(반전)의 의미를 가지기도 한다. (④번 참조)
/^e/g
eat
eot
ept
apt
ate
/^e/gm
eat
eot
ept
apt
ate
/t$/g
eat
esa
eoe
apt
aet
/t$/gm
eat
esa
eoe
apt
aet
/^apt$/gm
eat
esa
eoe
apt
aet
여기서는 m을 쓰지 않으면 아무것도 검색되지 않는다.
③ ?
바로 앞의 한 글자가 0글자 또는 한글자인 경우에 대한 매칭
(문맥에 따라 수량자 뒤에 사용될 경우는 Lazy Match의 의미를 가짐)
/Wor.?d$/gm
This is my World
This is my Word
World is beautiful.
문자에 대하여Worl?d라고 검색하면 World와 Word 모두 검색된다.
Worl?d는 Wor 글자 후에 l이 있을 수도 있고 없을 수도 있으며 d가 온다.
④ [ ]
| 특수문자 | 설명 |
|---|---|
| [ ] | 대괄호 사이에 존재하는 문자들 중 하나와 매칭 |
| [^] | 대괄호 사이 존재하는 문자들만 빼고 매칭 (반대의 의미) |
대괄호 안에 있는 문자는 하나씩 별도로 인식되며 or의 의미를 가진다.
[AD] 는 A나 D를 검색한다.
[ADE] 는 A나 D나 E를 검색한다.
[A-Z] 는 A부터 Z까지의 모든 대문자(아스키코드 기준으로 작용)
[0-9]는 \d로 간단하게 사용가능하다.
/[ADE]pple/gm
Apple
Bpple
Cpple
Dpple
Epple
fpple
0pple
5pple
/[^ADE]pple/gm
Apple
Bpple
Cpple
Dpple
Epple
fpple
0pple
5pple
5) Greedy Match 와 Lazy match
- Greedy Match(최장매치) : 검색 조건에 맞는 가장 긴 단어를 매칭
- Lazy Match(최단매치) : 검색 조건에 맞는 가장 짧은 단어를 매칭
Greedy Match일 때
/<.+>/g
<div><h1>Hello World</h1></div>
Lazy Match일 때
/<.+?>/g
<div><h1>Hello World</h1></div>
6) Expression - 수량자
수량자는 기본적(default)으로 Greedy Match(최장매치)가 적용된다.
반대로 Lazy Match(최단매치)를 적용하려면, ? 기호를 사용한다.
① +
바로 앞에 있는 한 글자가 1회 이상 반복되는 상황을 매칭
/Sta+r/g
Str
Star
Staar
Staaar
Staaaar
② *
바로 앞에 있는 한 글자가 0회 이상 반복되는 상황을 매칭
/Sta+r/g
Str
Star
Staar
Staaar
Staaaar
③ { }
바로 앞에 있는 한 글자가 지정한 횟수 만큼 반복되는 매칭
| 특수문자 | 설명 |
|---|---|
| {start,} | 횟수 이상 반복되는 글자를 검색 |
| {start, end} | start 이상 end 이하 반복되는 글자를 검색 |
/Sta{2}r/g
Str
Star
Staar
Staaar
Staaaar
/Sta{2,}r/g
Str
Star
Staar
Staaar
Staaaar
/Sta{2,3}r/g
Str
Star
Staar
Staaar
Staaaar
④ ( )
데이터 묶음 & 데이터 그룹화를 의미한다.
괄호기호는 정규표현식에 적용될 문자를 묶어서 처리하는 역할이다.
| 표현식 | 설명 |
|---|---|
| 캡처변수 | 정규표현식으로 검색되는 모든 내용을 다 저장하는 변수 |
| $& | 기본 검색되는 캡처변수 |
| $1 | 첫 괄호(그룹)의 캡처변수 |
| $n | n번째 괄호(그룹)의 캡처변수 |
/<.+?>/g
<div>Hello World</div>
<h1>Test</h1>
| $&\n | $1 | $2 |
|---|---|---|
| <div> | - | - |
| </div> | - | - |
| <h1> | - | - |
| </h1> | - | - |
/<(.+?)>/g
<div>Hello World</div>
<h1>Test</h1>
| $&\n | $1\n | $2\n |
|---|---|---|
| <div> | div | - |
| </div> | /div | - |
| <h1> | h1 | - |
| </h1> | /h1 | - |
/<(.+?)>.+<(.+?)>/g
<div>Hello World</div>
<h1>Test</h1>
| $&\n | $1\n | $2\n |
|---|---|---|
| <div>Hello World</div> | div | /div |
| <h1>Test</h1> | h1 | /h1 |
7) 예제 문제
① 아래 html 코드에서 id를 검색해보기.
<div id="wrapper">
<div id="inputs">
<input type=text id="num1" placeholder="첫 번째 수"><br>
<input type=text id="num2" placeholder="두 번째 수">
</div>
<div id="buttons">
<input type=button id="plus" value="+">
</div>
<div id="result">
<p id="result_field"></p>
</div>
</div>
정규 표현식 /id="(.+?)"/g을 사용하고 캡처변수 $1를 사용하면 아래와 같이 id만 검색할 수 있다.
wrapper
inputs
num1
num2
buttons
plus
result
result_field
② 아래 html 코드에서 innerHTML만 추려서 출력해보기.
<div class="container">
<div id="box">I'm Box!</div>
<div id="control">
<button id="red">RED</button>
<button id="green">GREEN</button>
<button id="blue">BLUE</button>
</div>
</div>
정규 표현식 />(.+?)</g을 사용하고 캡처변수 $1를 사용하면 아래와 같이 >와 <사이에 있는 Text만 검색할 수 있다.
I'm Box!
RED
GREEN
BLUE
③ 핸드폰번호만 출력하기
핸드폰 번호는 010으로 시작하는 8자리이거나, 010-0000-0000 형식으로 되어있다.
<div class="container">
<div id="box">I'm Box!</div>
<div id="control">
<button id="red">RED</button>
<button id="green">GREEN</button>
<button id="blue">BLUE</button>
</div>
</div>
정규 표현식 /^010-?[0-9]{4}-?[0-9]{4}$/gm을 사용한다.
^와 $는 자리수를 8개로 딱 맞춰줘야하기 때문에 사용한다.
-? 는 핸드폰 번호의 양식이 -가 있을 수도 있고 없을 수도 있기 때문에 사용한다.
[0-9]{4}는 숫자가 4개 반복되야 하기 때문에 사용한다.
마지막으로 g와 m은 여러개를 검색하고, 여러 줄에서 검색해야하기 때문에 사용한다.
또한 그룹화 시키지 않았으므로 캡처변수 $&를 사용하면 아래와 같이 핸드폰 번호들만 출력 가능하다.
01012344321
010-1004-4001
01056786758
그냥 정규표현식을 배울 때는 왜 배우는지 잘 이해가 안갔는데, 이렇게 예제를 풀어보니 어느정도 감이 오는 것 같다. 내일은 자바 스크립트에서 직접 정규표현식을 사용하는 것을 배울 예정이다.
댓글남기기