초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)
- 3. /…/
gim
AA BB Aa Bb $12,000
1 match
정규표현식
시작,종료 기호
플래그
[“AA ”]
- 4. /…/
gim
AA BB Aa Bb $12,000
1 match
검색 대상!
문자열
[“AA ”]
- 5. /…/
gim
AA BB Aa Bb $12,000
1 match
정규식과 일치한 문자열
[“AA ”]
- 6. /…/
AA BB Aa Bb $12,000
추출된 문자들
[“AA ”]
1 match
gim
- 7. 입력된 표현식이 없으면 일치한 문자열도 없음
//
AA BB Aa Bb $12,000
[ ]
no match
- 8. 입력된 문자와 일치한 첫 번째 문자를 찾고 반환
/A/
AA BB Aa Bb $12,000
[“A”]
1 match
- 9. /A/
AA BB Aa Bb $12,000
[“A”, “A”, “A”]
3 matches
g
대상 문자열 전체로 검색 대상을 지정!
정규식 패턴에 일치하는 모든 문자(열) 반환
- 10. /A/
AA BB Aa Bb $12,000
[“A”, “A”, “A”, “a”]
4 matches
gi
알파벳 대소문자 구분 무시
i 플래그의 영향으로 소문자 a 도 일치됨
- 11. /AA/
AA BB Aa Bb $12,000
[“AA”, “Aa”]
2 matches
gi
문자열 패턴
- 12. 임의의 문자 하나를 의미하는 메타 문자 마침표(.)
/./
AA BB Aa Bb $12,000
[“A”]
1 match
- 13. 두 개의 마침표는 문자 두 개가 결합된 문자열과 일치
/../
AA BB Aa Bb $12,000
[“AA”]
1 match
- 15. 대상 문자열 전체를 선택하는 방법?!
대상 문자열의 문자 갯수 만큼 마침표를 입력
/………………/
AA BB Aa Bb $12,000
[“AA BB Aa Bb $12,000”]
1 match
- 16. 대상 문자열의 길이가 너무 길거나 알 수 없다면?
/./
AA BB Aa Bb $12,000
[“A”]
1 match
- 17. g 플래그로 마침표 패턴 일치 결과를 대상 문자열 전체로 확장
/./
g
AA BB Aa Bb $12,000
그러나 전체 문자열이 아닌 모든 문자가 분해되어 반환
[“A”, “A”, “ ”, “B”, “B”, “ ”, “A”, “a”, “ ”, “B”, “b”, “ ”, “$”, “1”, “2”, “,”, “0”, “0”, “0” ]
19 matches
- 18. /.+/
AA BB Aa Bb $12,000
[“AA BB Aa Bb $12,000”]
1 match
앞에 있는 패턴의 반복을 지시하는 메타 문자
앞선 패턴(마침표, 즉 모든 문자)의 !
불일치가 발생할 때 까지 반복 시킴
모든 문자의 불일치가 대상 문자열 끝까지 !
일어나지 않았기 때문에 결국 대상 문자열 전체가 일치
- 19. /A+/
AA BB Aa Bb $12,000
[“AA”]
1 match
A 문자 패턴이 반복되고 공백 문자를!
만나는 순간 A 문자 패턴의 불일치가!
발생하여 AA 까지만 일치됨
공백 문자를 만나 불일치!!
- 20. /A+/
AA BB Aa Bb $12,000
[“AA”, “A”]
2 matches
g
대상을 전체로 확대하여 !
A 문자 하나가 추가로 일치
- 21. /A+/
AA BB Aa Bb $12,000
[“AA”, “Aa”]
2 matches
gi
대소문자 구분을 무시!
따라서 Aa 패턴도 일치
- 22. A or B or … 조건의 패턴 정규식
//
AA BB Aa Bb $12,000
[ ]
no match
- 23. 파이프 문자(|)는 OR를 의미!
좌측과 우측의 패턴 중 하나와 일치하면 일치
/A|B/
AA BB Aa Bb $12,000
[“A”, “A”, “B”, “B”, “A”, “B”]
6 matches
g
- 24. 분해되지 않은 문자열을 얻기위해!
/A+|B+/
AA BB Aa Bb $12,000
[“AA”,“BB”, “A”, “B”]
4 matches
g
반복 메타 문자 사용
- 25. 문자 집합 메타 문자!
문자 집합 내에 포함된 문자는 OR 로 작동
/[AB]/g
AA BB Aa Bb $12,000
[“A”, “A”, “B”, “B”, “A”, “B”]
6 matches
- 26. 앞선 패턴의 반복을 지정!
앞선 패턴이 그룹(문자 집합, 하위 표현식 등)이면 !
그룹 전체가 반복의 대상이 됨
/[AB]+/
AA BB Aa Bb $12,000
[“AA”,“BB”, “A”, “B”]
4 matches
g
반복 대상
- 27. 범위 지정 메타 문자 마이너스(-)!
왼쪽 문자를 시작으로 오른쪽 문자까지 순차적으로 문자를 증가!
[A-Z] 는 [ABCDEGHIJKLMNOPQRSTUVWXYZ] 과 동일!
문자 집합 내에서만 사용 가능
/[A-Z]+/
AA BB Aa Bb $12,000
[“AA”,“BB”, “A”, “B”]
4 matches
g
- 28. 범위는 하나의 패턴으로 취급!
모든 대문자 알파벳, 모든 소문자 알파벳을 의미
/[A-Za-z]+/
AA BB Aa Bb $12,000
[“AA”,“BB”, “Aa”, “Bb”]
4 matches
g
- 30. 일치되지 않음!
“$” 문자는 정규식 내에서 특별한!
기능을 가진 메타 문자기 때문
/$12,000/
AA BB Aa Bb $12,000
[ ]
no match
g
- 31. /$12,000/
AA BB Aa Bb $12,000
[“$12,000”]
1 match
g
역슬래쉬( )!
메타 문자를 일반 문자로 취급!
$ 정규식은 $ 문자와 일치
- 32. $ 이후 숫자를 한정하지 않기 위해 !
0-9 문자집합 사용, 그러나 $ 이후!
숫자 하나만 일치
/$[0-9]/
AA BB Aa Bb $12,000
[“$1”]
1 match
g
- 33. 문자 집합을 반복 일치!
콤마(,)가 나타나 일치가 중단되어!
$12 까지만 일치
/$[0-9]+/
AA BB Aa Bb $12,000
[“$12”]
1 match
g
- 36. 문자집합에 마침표( . ) 추가
/$[0-9,.]+/
AA BB Aa Bb $12,000.00
[“$12,000.00”]
1 match
g
- 37. 마침표( . )는 문자 집합 [ ] 밖에서는!
임의의 한 문자를 의미하는 메타문자로 작동!
문자 집합 밖에서 마침표를 일치시키기 위해선!
역슬래쉬 사용
/./
AA BB Aa Bb $12,000.00
[“.”]
1 match
g
- 38. 특별한 기능을 가진 메타 문자가 있다!
d 는 숫자를 의미함. [0-9] 와 같다
/d/
AA BB Aa Bb $12,000.00
[“1”, “2”, “0”, “0”, “0”, “0”, “0”]
7 matches
g
- 39. 대문자 D 는 숫자의 반대 즉, !
숫자가 아닌 모든 문자를 의미
/D/
AA BB Aa Bb $12,000.00
[“A”, “A”, “ ”, “B”, “B”, “ ”, “A”, “a”, “ ”, “B”, “b”, “ ”, “$”, “,”, “.”]
15 matches
g
- 40. w 는 영문자를 의미!
[a-zA-Z_0-9] 의 축양형!
* 영문자에 언더바 (_)와 숫자가 포함된다
/w/
AA BB Aa Bb $12,000.00
[“A”, “A”, “B”, “B”, “A”, “a”, “B”, “b”, “1”, “2”, “0”, “0”, “0”, “0”, “0”]
15 matches
g
- 41. 대문자 W 는 영문자 이외의 모든 문자를 의미!
[^a-zA-Z_0-9] 의 축약형!
* 캐럿(^) 은 문자 집합의 반대(Not)를 의미
/W/
AA BB Aa Bb $12,000.00
[“ ”, “ ”, “ ”, “ ”, “$”, “,”, “.”]
7 matches
g
공백도 당연히 독립된!
하나의 문자다
- 42. http: 또는 https: 문자열 찾기
//
http: vs. https: or httpss: What’s the difference?
[ ]
no match
- 43. http: 로는 https: 와 httpss: 를 찾지 못함
/http:/
http: vs. https: or httpss: What’s the difference?
[“http:”]
1 match
g
- 44. s 를 추가하면 http: 와 httpss: 가 일치되지 않음
/https:/
http: vs. https: or httpss: What’s the difference?
[“https:”]
1 match
g
- 45. /http:|https:/
http: vs. https: or httpss: What’s the difference?
[“http:”, “https:”]
2 matches
g
OR를 이용하여 http: 와 https: 를 찾을 수 있다!
그러나 정규식이 과도하게 길어짐
- 46. 앞에 문자가 없거나 1번이상!
나타나는 패턴과 일치시킴
/https*:/
http: vs. https: or httpss: What’s the difference?
[“http:”, “https:”, “httpss:”]
3 matches
g
앞에 문자 s 가 없거나 1번 이상!
반복되는 패턴과 일치
일치되길 원하지 않는 httpss: 문자열도 일치됨
- 47. 앞에 문자가 없거나 1번만!
나타나는 패턴과 일치시킴
/https?:/
http: vs. https: or httpss: What’s the difference?
[“http:”, “https:”]
2 matches
g
s가 두번 반복되기 때문에 일치되지 않음
- 48. HTTP URL 추출하기
//
http://www.static.com:8080/a.jpg
A: https://admin.static-best.io/show?no=1
B: https://static-best.site.org/show.jsp?no=1
http://static best.net/#!/ibare
http://static.net/#!/ibare
[ ]
no match
- 50. 두 개의 슬래쉬 문자는 정규식 내에서 메타 문자이기 때문에!
/https?:///
http://www.static.com:8080/a.jpg
A: https://admin.static-best.io/show?no=1
B: https://static-best.site.org/show.jsp?no=1
http://static best.net/#!/ibare
http://static.net/#!/ibare
[ ]
5 matches
g
역슬래쉬를 이용하여 표현
- 51. 호스트 문자열 지정!
그러나 호스트 문자열은 www 뿐만 아닌, !
적시할 수 없는 임의의 문자열 패턴
/https?://www/
[ ]
1 match
g
http://www.static.com:8080/a.jpg
A: https://admin.static-best.io/show?no=1
B: https://static-best.site.org/show.jsp?no=1
http://static best.net/#!/ibare
http://static.net/#!/ibare
- 52. 메타 문자 w 사용. 알파벳과 숫자를 일치시키도록 변경
/https?://w/
[ ]
5 matches
g
http://www.static.com:8080/a.jpg
A: https://admin.static-best.io/show?no=1
B: https://static-best.site.org/show.jsp?no=1
http://static best.net/#!/ibare
http://static.net/#!/ibare
- 53. 패턴의 불일치가 발생할 때 까지 반복 지정
/https?://w+/
[ ]
5 matches
g
http://www.static.com:8080/a.jpg
A: https://admin.static-best.io/show?no=1
B: https://static-best.site.org/show.jsp?no=1
http://static best.net/#!/ibare
http://static.net/#!/ibare
- 54. 너무 많은 도메인 문자 패턴이 존재하여 안티 패턴 사용!
도메인 문자로 사용할 수 없는 문자 이외의 문자가 일치되도록 패턴 변경!
캐럿(^)은 문자 집합내에서 NOT 을 의미
/https?://[^:/s]/
[ ]
5 matches
g
http://www.static.com:8080/a.jpg
A: https://admin.static-best.io/show?no=1
B: https://static-best.site.org/show.jsp?no=1
http://static best.net/#!/ibare
http://static.net/#!/ibare
- 55. 문자 집합을 반복시켜 도메인 주소 끝까지 확장!
그러나 잘못된 도메인도 일치되는 문제점 발생
/https?://[^:/s]+/
[ ]
5 matches
g
http://www.static.com:8080/a.jpg
A: https://admin.static-best.io/show?no=1
B: https://static-best.site.org/show.jsp?no=1
http://static best.net/#!/ibare
http://static.net/#!/ibare
공백 문자가 포함된 잘못된 도메인
- 56. 도메인 문자의 마지막은 마침표와 알파벳으로 끝나는 패턴 삽입 (.com, .io 등)!
잘못된 도메인이 일치되는 문제점 수정
/https?://[^:/s]+.w+/
[ ]
4 matches
g
http://www.static.com:8080/a.jpg
A: https://admin.static-best.io/show?no=1
B: https://static-best.site.org/show.jsp?no=1
http://static best.net/#!/ibare
http://static.net/#!/ibare
- 57. 도메인의 포트 지정 (:80, :8080 등) 은 도메인에 포함되기 위해 포트 형식 패턴 추가!
그러나 포트가 없는 (생략된) 도메인이 모두 일치되지 않는 문제점 발생
/https?://[^:/s]+.w+:d+/
[ ]
1 match
g
http://www.static.com:8080/a.jpg
A: https://admin.static-best.io/show?no=1
B: https://static-best.site.org/show.jsp?no=1
http://static best.net/#!/ibare
http://static.net/#!/ibare
- 58. 없거나, 1번만 나오는 패턴과 일치하는 메타 문자 물음표(?)를 사용!
포트 지정 패턴은 하나의 문자 패턴이 아니기 때문에 하위 표현식 괄호 ()를 이용하여 그룹화 함!
문자 집합과 마찮가지로 하나의 패턴 그룹으로 지정
/https?://[^:/s]+.w+(:d+)?/
[ ]
4 matches
g
http://www.static.com:8080/a.jpg
A: https://admin.static-best.io/show?no=1
B: https://static-best.site.org/show.jsp?no=1
http://static best.net/#!/ibare
http://static.net/#!/ibare
- 59. 대상 문자열의 첫 번째 나타나는 문자 지정 메타 문자 캐럿(^)!
문자 집합 밖에서의 캐럿은 대상 문자열의 첫 번째를 의미함
/^https?://[^:/s]+.w+(:d+)?/
[ ]
1 match
g
http://www.static.com:8080/a.jpg
A: https://admin.static-best.io/show?no=1
B: https://static-best.site.org/show.jsp?no=1
http://static best.net/#!/ibare
http://static.net/#!/ibare
- 60. 대상 문자열의 줄바꿈을 인식하여 멀티 라인 모드 사용 플래그!
멀티 라인 모드 활성화의 결과로 캐럿의 효과가 각 라인으로 확대 !
각 라인의 첫 번째에서 시작되는 도메인만 일치됨
/^https?://[^:/s]+.w+(:d+)?/
[ ]
2 matches
gm
http://www.static.com:8080/a.jpg
A: https://admin.static-best.io/show?no=1
B: https://static-best.site.org/show.jsp?no=1
http://static best.net/#!/ibare
http://static.net/#!/ibare
- 61. .brand {
반복 패턴 사용
//g
font-size: 22px;
color: #ff0000;
background-color: #00ff00;
border-color: #ddd;
margin: 10px 10px 10px 5px;
padding: 2em 1em 2em 1em;
}
[ ]
no match
- 62. #으로 시작되는 16진수 컬러값을 추출하기 위한 문자 집합 패턴
.brand {
/#[0-9A-Fa-f]/g
font-size: 22px;
color: #ff0000;
background-color: #00ff00;
border-color: #ddd;
margin: 10px 10px 10px 5px;
padding: 2em 1em 2em 1em;
}
[ ]
3 matches
- 63. 동일한 패턴을 하나 더 추가
/#[0-9A-Fa-f][0-9A-Fa-f]/g
.brand {
font-size: 22px;
color: #ff0000;
background-color: #00ff00;
border-color: #ddd;
margin: 10px 10px 10px 5px;
padding: 2em 1em 2em 1em;
}
[ ]
3 matches
- 64. 동일한 패턴을 세 번 반복
/#[0-9A-Fa-f][0-9A-Fa-f][0-9A-Fa-f]/g
.brand {
font-size: 22px;
color: #ff0000;
background-color: #00ff00;
border-color: #ddd;
margin: 10px 10px 10px 5px;
padding: 2em 1em 2em 1em;
}
[ ]
3 matches
- 65. 같은 패턴의 반복 횟수를 지정할 수 있는 메타 문자 { } 사용!
앞의 패턴을 반복 횟수를 지정
/#[0-9A-Fa-f]{6}/g
.brand {
font-size: 22px;
color: #ff0000;
background-color: #00ff00;
border-color: #ddd;
margin: 10px 10px 10px 5px;
padding: 2em 1em 2em 1em;
}
[ ]
2 matches
- 66. 6번 반복되는 컬러값 외에도 3번 반복되는 컬러값 패턴도 대응하기 위해!
3번 반복 패턴을 OR 로 추가
/#[0-9A-Fa-f]{6}|[0-9A-Fa-f]{3}/g
.brand {
font-size: 22px;
color: #ff0000;
background-color: #00ff00;
border-color: #ddd;
margin: 10px 10px 10px 5px;
padding: 2em 1em 2em 1em;
}
[ ]
3 matches
- 67. 반복 지정을 { from, to } 로 할 수 있음!
앞선 패턴이 3번 이상 6번 이하 반복되는 패턴으로 정규식을 간소화 시킴
/#[0-9A-Fa-f]{3,6}/g
.brand {
font-size: 22px;
color: #ff0000;
background-color: #00ff00;
border-color: #ddd;
margin: 10px 10px 10px 5px;
padding: 2em 1em 2em 1em;
}
[ ]
3 matches
- 68. 컬러값의 마지막이 항상 세미콜론(;) 으로 끝나기 때문에 !
반복 횟수 지정을 사용하지 않고 세미콜론까지 무한 반복 형태로 변경!
그러나 추출된 문자열에 세미콜론까지 포함되는 문제점 발생
/#[0-9A-Fa-f]+;/g
.brand {
font-size: 22px;
color: #ff0000;
background-color: #00ff00;
border-color: #ddd;
margin: 10px 10px 10px 5px;
padding: 2em 1em 2em 1em;
}
[ ]
3 matches
- 69. 패턴을 일치시키는 위치를 지정하는 위치 지정 메타 문자 중 !
전방 탐색 연산자를 (?=) 사용하여 추출시 세미콜론을 제거
/#[0-9A-Fa-f]+(?=;)/g
.brand {
font-size: 22px;
color: #ff0000;
background-color: #00ff00;
border-color: #ddd;
margin: 10px 10px 10px 5px;
padding: 2em 1em 2em 1em;
}
[ ]
3 matches
전방 탐색 방향 후방 탐색 방향
* 후방 탐색 (?<=) 연산자는 Javascript!
정규식에서 지원되지 않는다
- 70. <article>
역참조를 이용한 범위 지정
//g
<h1>Tim Cook didn't address Apple's real privacy problem</h1>
<h2>Tim Cook didn't address Apple's real privacy problem</h2>
<h2>Tim Cook didn't address Apple's real privacy problem</h2>
<h3>Tim Cook didn't address Apple's real privacy problem</h1>
<h4>Tim Cook didn't address Apple's real privacy problem</h4>
</article>
[ ]
no match
- 71. <article>
<h1>과 </h1> 문자열 사이의 모든 문자를 찾는다
/<h1>.+</h1>/g
<h1>Tim Cook didn't address Apple's real privacy problem</h1>
<h2>Tim Cook didn't address Apple's real privacy problem</h2>
<h2>Tim Cook didn't address Apple's real privacy problem</h2>
<h3>Tim Cook didn't address Apple's real privacy problem</h1>
<h4>Tim Cook didn't address Apple's real privacy problem</h4>
</article>
[ ]
1 matches
- 72. <article>
h1, h2, h3 … h6 까지 종류를 확대하기 위해 문자 집합 사용!
<h3>…</h1> 처럼 짝이 맞지 않는 잘못된 문자열도 일치되는 문제가 존재
/<h[1-6]>.+</h[1-6]>/g
<h1>Tim Cook didn't address Apple's real privacy problem</h1>
<h2>Tim Cook didn't address Apple's real privacy problem</h2>
<h2>Tim Cook didn't address Apple's real privacy problem</h2>
<h3>Tim Cook didn't address Apple's real privacy problem</h1>
<h4>Tim Cook didn't address Apple's real privacy problem</h4>
</article>
[ ]
5 matches
- 73. 일치된 하위 표현식()을 지정하는 역참조를 사용하여 앞선 하위 표현식과 동일한 패턴으로 일치시킴!
<article>
역참조로 인해 <h3> … </h1> 패턴은 일치되지 않음!
하위 표현식 () 이 1개 이상일 경우 순차적으로 1, 2, 3 과 같이 지정
/<h([1-6])>.+</h1>/g
<h1>Tim Cook didn't address Apple's real privacy problem</h1>
<h2>Tim Cook didn't address Apple's real privacy problem</h2>
<h2>Tim Cook didn't address Apple's real privacy problem</h2>
<h3>Tim Cook didn't address Apple's real privacy problem</h1>
<h4>Tim Cook didn't address Apple's real privacy problem</h4>
</article>
[ ]
4 matches
1
- 74. Code (Javascript)
var targetText = “http: vs. https: or httpss:”;
var matches = targetText.match(/https?:/g);
!
console.log(matches);
> Array [“http:”, “https:”]
targetText = targetText.replace(/https?:/g, “protocol”);
console.log(targetText);
> “protocol vs. protocol or httpss:”
- 76. Regular!
Expressions
for Beginners
/bysKimsminstae/gmi
.+end$/g
*참고: 이 문서는 정규 표현식의 기본적인 작성 방법을 학습하기위해 작성되었습니다.
따라서 다루지 않은 내용이 존재합니다. 정규 표현식은 프로그래밍 언어에 따라 문법
과 기능의 차이가 존재합니다. 기본적인 작동 방식은 유사하나 다루는 프로그래밍
언어에 따른 추가 학습이 필요합니다.