<div id="readability-page-1" class="page"><div><h2>🌈 정규 표현식 정의</h2>
<ul>
<li>
<p>자바스크립트에서 정규 표현식은 RegExp 객체로 표현된다.</p>
</li>
<li>
<p>정규 표현식 리터럴은 한 쌍의 슬래시(/) 문자 사이에 위치한다.</p>
<pre><code>// s로 끝나는 모든 문자열과 매치된다.
const pattern = /s$/; // 문자열 리터럴
const pattern = new RegExp('s$'); // RegExp() 생성자를 사용하여 정의</code></pre>
</li>
</ul>
<h3>🎈 리터럴 문자</h3>
<ul>
<li>
<p><b>모든 영문자와 숫자는 그 문자 그대로 정규 표현식에서 매치된다.</b></p>
</li>
<li>
<p>특정한 비-알파벳 문자들은 역슬래시(\)로 시작하는 <a href="https://ko.wikipedia.org/wiki/%EC%9D%B4%EC%8A%A4%EC%BC%80%EC%9D%B4%ED%94%84_%EB%AC%B8%EC%9E%90">이스케이프 문자열</a>을 통해 지원한다.</p>
</li>
<li>
<p>구두점 문자(?,!,.,등등)를 일반 문자로 취급할려면 <b>반드시 \를 문자 앞에 붙여야 한다.</b></p>
<pre><code>// 역슬래시를 포함하는 모든 문자열과 매치된다.
const pattern = /\\/;</code></pre>
</li>
</ul>
<figure id="og_1594472801471" contenteditable="false" data-ke-type="opengraph" data-og-type="website" data-og-title="이스케이프 문자 - 위키백과, 우리 모두의 백과사전" data-og-description="위키백과, 우리 모두의 백과사전. 이스케이프 문자는 이스케이프 시퀀스를 따르는 문자들로서 다음 문자가 특수 문자임을 알리는 백슬래시(\)를 사용한다. 일부 제어 시퀀스인 이스케이프 문자�" data-og-host="ko.wikipedia.org" data-og-source-url="https://ko.wikipedia.org/wiki/%EC%9D%B4%EC%8A%A4%EC%BC%80%EC%9D%B4%ED%94%84_%EB%AC%B8%EC%9E%90" data-og-url="https://ko.wikipedia.org/wiki/%EC%9D%B4%EC%8A%A4%EC%BC%80%EC%9D%B4%ED%94%84_%EB%AC%B8%EC%9E%90" data-og-image=""><a href="https://ko.wikipedia.org/wiki/%EC%9D%B4%EC%8A%A4%EC%BC%80%EC%9D%B4%ED%94%84_%EB%AC%B8%EC%9E%90" target="_blank" rel="noopener" data-source-url="https://ko.wikipedia.org/wiki/%EC%9D%B4%EC%8A%A4%EC%BC%80%EC%9D%B4%ED%94%84_%EB%AC%B8%EC%9E%90">

<div>
<p>이스케이프 문자 - 위키백과, 우리 모두의 백과사전</p>
<p>위키백과, 우리 모두의 백과사전. 이스케이프 문자는 이스케이프 시퀀스를 따르는 문자들로서 다음 문자가 특수 문자임을 알리는 백슬래시(\)를 사용한다. 일부 제어 시퀀스인 이스케이프 문자�</p>
<p>ko.wikipedia.org</p>
</div>
</a></figure>
<h3>🎈 문자 클래스</h3>
<ul>
<li>
<p>개별 리터럴 문자들은 그 문자들을 <b>대괄호([])로 묶어서 문자 클래스</b>로 다룰 수 있다.</p>
</li>
<li>
<p>문자 클래스는 해당 클래스 내의 모든 문자에 매치된다.</p>
<pre><code>// a, b, c 중 아무 글자에나 매치된다.
const pattern = /[abc]/;</code></pre>
</li>
<li>
<p>부정 문자 클래스는 대괄호 안에 있는 무자들을 제외한 모든 문자와 매치된다.</p>
</li>
<li>
<p>대괄호안에 <b>캐럿(^)</b>을 제일 앞에 두면 부정 문자 클래스를 정의할 수 있다.</p>
<pre><code>// a, b, c를 제외한 모든 문자와 매치된다.
const pattern = /[^abc]/;</code></pre>
</li>
<li>
<p>하이픈(-)을 사용하여 <b>문자의 범위</b>를 지정할 수 있다.</p>
<pre><code>// 소문자 a부터 z까지와 매치된다.
const pattern = /[a-z]/;
// 모든 알파벳 글자와 숫자와 매치된다.
const pattern = /[a-zA-Z0-9]/;</code></pre>
</li>
<li>
<p>자바 스크립트 정규 표현식 문법에는 자주 사용되는 문자 클래스를 나타내는 특수 문자와 이스케이프 문자열이 정의 되어 있다.</p>
</li>
<li>
<p>이스케이프된 특수 문자 클래스를 대괄호 내에서 사용할 수 있다.</p>
<pre><code>// 공백 문자 하나 또는 숫자 문자 하나와 매치된다.
const pattern = /[\s\d]/;</code></pre>
</li>
<li>
<p>\b는 별도의 특별한 의미를 지니고 있지만, 문자 클래스 내에서 사용되면 <b>백스페이스 문자</b>를 나타낸다.</p>
</li>
<li>
<p>정규 표현식에서 백스페이스 문자 자체를 표현하려면 <b>하나의 요소만</b> 있는 문자 클래스를 사용해야 한다.</p>
<pre><code>// 백스페이스 리터럴
const pattern = /[\b]/;</code></pre>
</li>
</ul>
<h4>📌 정규 표현식 문자 클래스</h4>
<ul>
<li>
<table>
<thead>
<tr>
<th>문자</th>
<th>의미</th>
</tr>
</thead>
<tbody>
<tr>
<td>[...]</td>
<td>대괄호 사이에 있는 한 문자.</td>
</tr>
<tr>
<td>[^...]</td>
<td>대괄호 사이에 없는 한 문자.</td>
</tr>
<tr>
<td>.</td>
<td>줄바꿈 문자나 유니코드 라인 종료 문자를 제외한 모든 문자.</td>
</tr>
<tr>
<td>\w</td>
<td>ASCII 워드 문자. [a-zA-Z0-9]와 같다.</td>
</tr>
<tr>
<td>\W</td>
<td>ASCII 워드 문자가 아닌 모든 문자. [^a-zA-Z0-9]와 같다.</td>
</tr>
<tr>
<td>\s</td>
<td>모든 유니코드 공백 문자.</td>
</tr>
<tr>
<td>\S</td>
<td>유니코드 공백 문자가 아닌 모든 문자. (but! \w와 \S는 같지 않다.)</td>
</tr>
<tr>
<td>\d</td>
<td>모든 ASCII 숫자. [0-9]와 같다.</td>
</tr>
<tr>
<td>\D</td>
<td>ASCII 숫자가 아닌 모든 문자. [^0-9]와 같다.</td>
</tr>
<tr>
<td>[\b]</td>
<td>백스페이스 리터럴(특수한 경우)</td>
</tr>
</tbody>
</table>
</li>
</ul>
<h3>🎈 반복</h3>
<ul>
<li>
<p>반복을 지정하는 문자는 항상 <b>반복을 지정할 패턴 뒤</b>에 나온다.</p>
<pre><code>const pattern = /\d{2,4}/; // 두 자리에서 네 자리의 숫자와 매치된다.
const pattern = /\w{3}\d?/; // 3개의 문자와 생략 가능한 숫자와 매치된다.
const pattern = /\s+java\s+/; // java와 앞 뒤로 하나 이상의 공백 문자를 포함한 문자열과 매치된다.
const pattern = /[^(]*/; // 시작 괄호가 아닌 0개 이상의 문자와 매치된다.</code></pre>
<h4>📌 정규 표현식 반복 문자</h4>
</li>
<li>
<table>
<thead>
<tr>
<th>문자</th>
<th>의미</th>
</tr>
</thead>
<tbody>
<tr>
<td>{n,m}</td>
<td>앞의 항목이 적어도 n번 이상, m번 이하로 나타난다.</td>
</tr>
<tr>
<td>{n,}</td>
<td>앞의 항목이 n번 이상 나타난다.</td>
</tr>
<tr>
<td>{n}</td>
<td>앞의 항목이 정확하게 n번 나타난다.</td>
</tr>
<tr>
<td>?</td>
<td>앞의 항목이 0 또는 한 번 나타난다. 즉, 안나올수도 있다.{0,1}과 같다.</td>
</tr>
<tr>
<td>+</td>
<td>앞의 항목이 한 번 이상 나타난다. {1,}과 같다.</td>
</tr>
<tr>
<td>*</td>
<td>앞의 항목이 0번 또는 그 이상 나타난다. {0,}과 같다.</td>
</tr>
</tbody>
</table>
</li>
<li>
<p>* 와 ? 반복 문자는 앞에 오는 문자가 0번 매치된다고 간주하기 떄문에 반복 문자열 앞의 문자가 매치되지 않는 상황에서도 허용한다.</p>
<pre><code>const pattern = /a*/;
"bbbb".match(pattern);
// ["", index: 0, input: "bbbb", groups: undefined]</code></pre>
</li>
</ul>
<h3>🎈 대체, 그룹화, 참조</h3>
<ul>
<li>정규 표현식 문법은 <b>대체 표현식(alternative)</b>, <b>부분 표현식 그룹화(grouping subexpression)</b>, <b>이전 부분 표현식</b>을 참조하는 특별한 문자를 포함하고 있다.</li>
</ul>
<h4>🟦 대체 표현식(alternative)</h4>
<ul>
<li>
<p>파이프 문자( | )는 대체 표현식을 구분한다.</p>
<pre><code>// 문자열 ab 또는 cd 또는 ef와 매치된다.
const pattern = /ab|cd|ef/;
// 세 자리의 숫자문자 또는 네 개의 소문자로 이루어진 문자열과 매치된다.
const pattern = /\d{3}|[a-z]{4}/;</code></pre>
</li>
<li>
<p>대체 표현식은 매치를 발견할 때까지 왼쪽에서 오른쪽으로 수행된다.</p>
<pre><code>// ab에 적용하면, 오직 첫 번째 글자 a만 매치된다.
const pattern = /a|ab/;
"ab".match(pattern);
// ["a", index: 0, input: "ab", groups: undefined]</code></pre>
</li>
</ul>
<h4>🟦 부분 표현식 그룹화(grouping subexpression)</h4>
<ul>
<li>
<p>여러 항목을 하나의 부분 표현식으로 묶고(그룹화), 이렇게 묶인 항목들을 |,* ,+,? 등이 하나의 단위로 취급할 수 있도록 하는 것이다.</p>
<pre><code>// java와 그다음에 생략 가능한 script가 오는 문자열과 매치된다.
const pattern = /java(script)?/;
// ab 또는 cd가 한 번 이상 반복되는 문자열 혹은 무자열 ef와 매치된다.
const pattern = /(ab|cd)+|ef/;</code></pre>
</li>
</ul>
<h4>🟦 이전 부분 표현식</h4>
<ul>
<li>
<p>전체 패턴 안에 부분 패턴을 정의하는 것이다.</p>
</li>
<li>
<p>정규 표현식이 대상 문자열에 매치되면 괄호로 둘러싸인 특정 패턴과 매치되는 부분 문자열을 추출할 수 있다.</p>
<pre><code>// 만약 각 매치에 대해 끝에 있는 숫자를 뽑는다면, 괄호 안에 두고 찾아낸 매치 결과에서 숫자를 추출할 수 있다.
const pattern = /[a-z]+(\d+)/;</code></pre>
</li>
<li>
<p>괄호로 둘러싸인 부분 표현식을 사용하면 같은 정규 표현식 내에서 <b>해당 부분을 다시 참조</b>할 수 있다.</p>
</li>
<li>
<p>예를 들어 \1은 첫 번째 부분 표현식을 참조, \3은 세번째 부분 표현식을 참조한다.</p>
<pre><code>// 중첩된 부분 표현 ([Ss]cript)는 \2로 참조할 수 있다.
const pattern = /([Jj]ava([Ss]cript?)\sis\s(fun\w*)/;</code></pre>
</li>
<li>
<table>
<thead>
<tr>
<th>문자</th>
<th>의미</th>
</tr>
</thead>
<tbody>
<tr>
<td>파이프 문자</td>
<td>대체. 왼쪽에 있ㄴ는 부분 표현식이나 오른쪽에 있는 부분 표현식 중 하나를 매치한다.</td>
</tr>
<tr>
<td>(...)</td>
<td>그룹화. 하나의 단위로 그룹화된 아이템으로 * ,+,?,파이프 문자등에 의해 사용될 수 있다. <br>나중에 이 그룹을 참조할 수 있도록 이 그룹과 매치된 문자를 기억한다.</td>
</tr>
<tr>
<td>(?:...)</td>
<td>그룹화만 한다. 그룹의 항목들은 하나의 단위로 취급되지만, 이 그룹에 매치되는 문자들은 기억하지는 않는다.</td>
</tr>
<tr>
<td>\n</td>
<td>n번째 그룹이 처음 매치했던 문자와 같은 문자를 매치한다.</td>
</tr>
</tbody>
</table>
</li>
</ul>
<h3>🎈 정규 표현식 앵커(anchor)</h3>
<ul>
<li>
<p>매치에 사용할 문자를 지정하지 않고 매치가 일어날 수 있는 적절한 위치를 지정한다.</p>
</li>
<li>
<p>시작 부분에 정규식을 고정하는 ^와 문자열의 마지막에 정규식을 고정하는 $가 많이 사용된다.</p>
<pre><code>// JavaScript 문자열 자체가 매치된다.
const pattern = /^JavaScript$/;
// 이 경우 불필요한 공배까지 들어간다.
const pattern2 = /\sJava\s/;
"my Java Script".match(pattern2);
// [" Java ", index: 3, input: " my Java Script ", groups: undefined]
// 단어 경계에 매치된다. 불필요한 공백이 없다.
const pattern3 = /\bJava\b/;
"my Java Script".match(pattern3);
// ["Java", index: 3, input: "my Java Script", groups: undefined]</code></pre>
</li>
<li>
<p>(?= 와 ) 사이에 표현식이 있으면 이는 <b>긍정형 전방 탐색 선언문</b>이고, 이는 사이에 있는 <b>문자들이 반드시 매치</b>되어야 한다는 의미지만, <b>매치된 문자열이 결과에 포함되지 않는다</b>는 뜻이다.</p>
</li>
<li>
<p>(?!를 사용하여 선언문을 만들면 <b>부정형 전방 탐색</b>이고, 그다음에 나오는 문자열들이 매치되면 안 된다는 뜻이다.</p>
</li>
<li>
<p>✨ 더 자세한 내용은 <a href="https://blog.hexabrain.net/205">참고</a></p>
</li>
</ul>
<figure id="og_1594472811866" contenteditable="false" data-ke-type="opengraph" data-og-type="article" data-og-title="정규 표현식(Regex) 강좌 9편. 전후방탐색(lookaround)" data-og-description="1. 전방 탐색(lookahead) 전방 탐색(lookahead)이란 작성한 패턴에 일치하는 영역이 존재하여도 그 값이 제외되어서 나오는 패턴입니다. 전방 탐색 기호는 ?= 이며, = 다음에 오는 문자가 일치하는 영역�" data-og-host="blog.hexabrain.net" data-og-source-url="https://blog.hexabrain.net/205" data-og-url="https://blog.hexabrain.net/205" data-og-image="https://scrap.kakaocdn.net/dn/MQ8uF/hyGIy9ME4U/6BuCwyS82K0aaEfM34kdkk/img.jpg?width=620&amp;height=413&amp;face=0_0_620_413,https://scrap.kakaocdn.net/dn/b39f1D/hyGIuM6A19/gvhRJmVnLgkun4d9JtePo0/img.jpg?width=620&amp;height=413&amp;face=0_0_620_413,https://scrap.kakaocdn.net/dn/3JDCa/hyGIsPg5j2/FBGSrvK6MKkksjaur561J1/img.jpg?width=620&amp;height=413&amp;face=0_0_620_413"><a href="https://blog.hexabrain.net/205" target="_blank" rel="noopener" data-source-url="https://blog.hexabrain.net/205">

<div>
<p>정규 표현식(Regex) 강좌 9편. 전후방탐색(lookaround)</p>
<p>1. 전방 탐색(lookahead) 전방 탐색(lookahead)이란 작성한 패턴에 일치하는 영역이 존재하여도 그 값이 제외되어서 나오는 패턴입니다. 전방 탐색 기호는 ?= 이며, = 다음에 오는 문자가 일치하는 영역�</p>
<p>blog.hexabrain.net</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/MQ8uF/hyGIy9ME4U/6BuCwyS82K0aaEfM34kdkk/img.jpg?width=620&amp;height=413&amp;face=0_0_620_413,https://scrap.kakaocdn.net/dn/b39f1D/hyGIuM6A19/gvhRJmVnLgkun4d9JtePo0/img.jpg?width=620&amp;height=413&amp;face=0_0_620_413,https://scrap.kakaocdn.net/dn/3JDCa/hyGIsPg5j2/FBGSrvK6MKkksjaur561J1/img.jpg?width=620&amp;height=413&amp;face=0_0_620_413"></figure>
<ul>
<li>
<table>
<thead>
<tr>
<th>문자</th>
<th>의미</th>
</tr>
</thead>
<tbody>
<tr>
<td>^</td>
<td>문자열의 시작 부분, 정규식이 어려 줄을 대상으로 하는 경우 한 줄의 시작과 일치한다.</td>
</tr>
<tr>
<td>$</td>
<td>문자열의 끝을 나타낸다. 여러 줄일 경우 한 줄의 마지막을 나타낸다.</td>
</tr>
<tr>
<td>\b</td>
<td>단어 경계를 나타낸다</td>
</tr>
<tr>
<td>\B</td>
<td>단어 경계가 아닌 곳의 위치를 나타낸다.</td>
</tr>
<tr>
<td>(?=p)</td>
<td>전방 탐색 선언으로 패턴 p와 매치되어야 하지만, 매치 결과에는 포함되지 않는다</td>
</tr>
<tr>
<td>(?!p</td>
<td>부정형 전방 탐색 선언으로 '(?!' 다음에 나오는 문자들은 패턴 p와 매치되지 않아야 한다.</td>
</tr>
</tbody>
</table>
</li>
</ul>
<h3>🎈 플래그(flag)</h3>
<ul>
<li>다른 정규 표현식 문법과는 달리 <b>플래그는 / 문자 쌍 바깥</b>에, 즉 두 번째 슬래시 다음에 쓴다.</li>
<li>i 플래그는 <b>대소문자를 구별하지 않고</b> 패턴 매칭이 되어야 한다.</li>
<li>g 플래그는 전역 패턴 매칭을 지정하는데, 즉 검색할 문자열내에서 패턴의 첫 번째 매칭 결과뿐 아니라 <b>모든 매칭 결과를 얻는다.</b></li>
<li>m 플래그는 여러 줄에 걸쳐 패턴 매칭을 수행하는 것으로 m 플래그를 지정한 상태에서 검색될 문자열이 <b>줄바꿈 문자를 포함하고 있으면,</b> ^와 $ 앵커는 문자열의 시작과 끝을 나타낼 뿐만 아니라 각 줄의 시작과 끝을 나타내기도 한다.
<pre><code>// java 뿐만 아니라 Java\nis fun 에도 매치된다.
const pattern = /java$/im/;</code></pre>
<h4>📌 정규 표현식 플래그</h4>
</li>
<li>
<table>
<thead>
<tr>
<th>문자</th>
<th>의미</th>
</tr>
</thead>
<tbody>
<tr>
<td>i</td>
<td>대소문자를 구별하지 않는 매칭을 수행한다.</td>
</tr>
<tr>
<td>g</td>
<td>전역 매칭을 수행한다. 즉, 처음 매치에서 끝내지 않고 모든 매치를 찾는다.</td>
</tr>
<tr>
<td>m</td>
<td>여러 줄모드로 ^은 줄의 시작이나 문자열의 시작과 일치하고, $는 줄의 끝이나 문자열의 끝과 일치한다.</td>
</tr>
</tbody>
</table>
</li>
</ul>
<h2>🌈 참고 문서</h2>
<ul>
<li>&nbsp;MDN 공식 문서 : <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D">https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D</a></li>
</ul>
<figure id="og_1594472819167" contenteditable="false" data-ke-type="opengraph" data-og-type="website" data-og-title="정규 표현식" data-og-description="정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해&nbsp;사용되는 패턴입니다. 자바스크립트에서, 정규 표현식 또한 객체입니다.&nbsp; 이 패턴들은&nbsp;RegExp의 exec 메소드와 test 메소드&nbsp; ,��" data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D" data-og-url="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D" data-og-image="https://scrap.kakaocdn.net/dn/cJOKuN/hyGJT5IKDf/9JpWV5YMAMa4ZKKG61OeKK/img.png?width=600&amp;height=600&amp;face=0_0_600_600,https://scrap.kakaocdn.net/dn/Do2Ju/hyGJUjgHD2/DtFKVuem5hXnkeSjciYhpk/img.png?width=600&amp;height=600&amp;face=0_0_600_600"><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D" target="_blank" rel="noopener" data-source-url="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D">

<div>
<p>정규 표현식</p>
<p>정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해&nbsp;사용되는 패턴입니다. 자바스크립트에서, 정규 표현식 또한 객체입니다.&nbsp; 이 패턴들은&nbsp;RegExp의 exec 메소드와 test 메소드&nbsp; ,��</p>
<p>developer.mozilla.org</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/cJOKuN/hyGJT5IKDf/9JpWV5YMAMa4ZKKG61OeKK/img.png?width=600&amp;height=600&amp;face=0_0_600_600,https://scrap.kakaocdn.net/dn/Do2Ju/hyGJUjgHD2/DtFKVuem5hXnkeSjciYhpk/img.png?width=600&amp;height=600&amp;face=0_0_600_600"></figure>

</div></div>

SaDevelog

Harang

정규 표현식 정의
자바스크립트에서 정규 표현식은 RegExp 객체로 표현된다.
정규 표현식 리터럴은 한 쌍의 슬래시(/) 문자 사이에 위치한다.
// s로 끝나는 모든 문자열과 매치된다.
const pattern = /s$/; // 문자열 리터럴
const pattern = new RegExp('s$'); // RegExp() 생성자를 사용하여 정의
  리터럴 문자
모든 영문자와 숫자는 그 문자 그대로 정규 표현식에서 매치된다.
특정한 비-알파벳 문자들은 역슬래시(\)로 시작하는 이스케이프 문자열을 통해 지원한다.
구두점 문자(?,!,.,등등)를 일반 문자로 취급할려면 반드시 \를 문자 앞에 붙여야 한다.
// 역슬래시를 포함하는 모든 문자열과 매치된다.
const pattern = /\\/;
  문자 클래스
개별 리터럴 문자들은 그 문자들을 대괄호([])로 묶어서 문자 클래스로 다룰 수 있다.
문자 클래스는 해당 클래스 내의 모든 문자에 매치된다.
// a, b, c 중 아무 글자에나 매치된다.
const pattern = /[abc]/;
부정 문자 클래스는 대괄호 안에 있는 무자들을 제외한 모든 문자와 매치된다.
대괄호안에 캐럿(^)을 제일 앞에 두면 부정 문자 클래스를 정의할 수 있다.
// a, b, c를 제외한 모든 문자와 매치된다.
const pattern = /[^abc]/;
하이픈(-)을 사용하여 문자의 범위를 지정할 수 있다.
// 소문자 a부터 z까지와 매치된다.
const pattern = /[a-z]/;
// 모든 알파벳 글자와 숫자와 매치된다.
const pattern = /[a-zA-Z0-9]/;
자바 스크립트 정규 표현식 문법에는 자주 사용되는 문자 클래스를 나타내는 특수 문자와 이스케이프 문자열이 정의 되어 있다.
이스케이프된 특수 문자 클래스를 대괄호 내에서 사용할 수 있다.
// 공백 문자 하나 또는 숫자 문자 하나와 매치된다.
const pattern = /[\s\d]/;
\b는 별도의 특별한 의미를 지니고 있지만, 문자 클래스 내에서 사용되면 백스페이스 문자를 나타낸다.
정규 표현식에서 백스페이스 문자 자체를 표현하려면 하나의 요소만 있는 문자 클래스를 사용해야 한다.
// 백스페이스 리터럴
const pattern = /[\b]/;
  정규 표현식 문자 클래스
문자
의미
[...]
대괄호 사이에 있는 한 문자.
[^...]
대괄호 사이에 없는 한 문자.
.
줄바꿈 문자나 유니코드 라인 종료 문자를 제외한 모든 문자.
\w
ASCII 워드 문자. [a-zA-Z0-9]와 같다.
\W
ASCII 워드 문자가 아닌 모든 문자. [^a-zA-Z0-9]와 같다.
\s
모든 유니코드 공백 문자.
\S
유니코드 공백 문자가 아닌 모든 문자. (but! \w와 \S는 같지 않다.)
\d
모든 ASCII 숫자. [0-9]와 같다.
\D
ASCII 숫자가 아닌 모든 문자. [^0-9]와 같다.
[\b]
백스페이스 리터럴(특수한 경우)
  반복
반복을 지정하는 문자는 항상 반복을 지정할 패턴 뒤에 나온다.
const pattern = /\d{2,4}/; // 두 자리에서 네 자리의 숫자와 매치된다.
const pattern = /\w{3}\d?/; // 3개의 문자와 생략 가능한 숫자와 매치된다.
const pattern = /\s+java\s+/; // java와 앞 뒤로 하나 이상의 공백 문자를 포함한 문자열과 매치된다.
const pattern = /[^(]*/; // 시작 괄호가 아닌 0개 이상의 문자와 매치된다.
  정규 표현식 반복 문자
문자
의미
{n,m}
앞의 항목이 적어도 n번 이상, m번 이하로 나타난다.
{n,}
앞의 항목이 n번 이상 나타난다.
{n}
앞의 항목이 정확하게 n번 나타난다.
?
앞의 항목이 0 또는 한 번 나타난다. 즉, 안나올수도 있다.{0,1}과 같다.
+
앞의 항목이 한 번 이상 나타난다. {1,}과 같다.
*
앞의 항목이 0번 또는 그 이상 나타난다. {0,}과 같다.
* 와 ? 반복 문자는 앞에 오는 문자가 0번 매치된다고 간주하기 떄문에 반복 문자열 앞의 문자가 매치되지 않는 상황에서도 허용한다.
const pattern = /a*/;
"bbbb".match(pattern);
// ["", index: 0, input: "bbbb", groups: undefined]
  대체, 그룹화, 참조
정규 표현식 문법은 대체 표현식(alternative), 부분 표현식 그룹화(grouping subexpression), 이전 부분 표현식을 참조하는 특별한 문자를 포함하고 있다.
  대체 표현식(alternative)
파이프 문자( | )는 대체 표현식을 구분한다.
// 문자열 ab 또는 cd 또는 ef와 매치된다.
const pattern = /ab|cd|ef/;
// 세 자리의 숫자문자 또는 네 개의 소문자로 이루어진 문자열과 매치된다.
const pattern = /\d{3}|[a-z]{4}/;
대체 표현식은 매치를 발견할 때까지 왼쪽에서 오른쪽으로 수행된다.
// ab에 적용하면, 오직 첫 번째 글자 a만 매치된다.
const pattern = /a|ab/;
"ab".match(pattern);
// ["a", index: 0, input: "ab", groups: undefined]
  부분 표현식 그룹화(grouping subexpression)
여러 항목을 하나의 부분 표현식으로 묶고(그룹화), 이렇게 묶인 항목들을 |,* ,+,? 등이 하나의 단위로 취급할 수 있도록 하는 것이다.
// java와 그다음에 생략 가능한 script가 오는 문자열과 매치된다.
const pattern = /java(script)?/;
// ab 또는 cd가 한 번 이상 반복되는 문자열 혹은 무자열 ef와 매치된다.
const pattern = /(ab|cd)+|ef/;
  이전 부분 표현식
전체 패턴 안에 부분 패턴을 정의하는 것이다.
정규 표현식이 대상 문자열에 매치되면 괄호로 둘러싸인 특정 패턴과 매치되는 부분 문자열을 추출할 수 있다.
// 만약 각 매치에 대해 끝에 있는 숫자를 뽑는다면, 괄호 안에 두고 찾아낸 매치 결과에서 숫자를 추출할 수 있다.
const pattern = /[a-z]+(\d+)/;
괄호로 둘러싸인 부분 표현식을 사용하면 같은 정규 표현식 내에서 해당 부분을 다시 참조할 수 있다.
예를 들어 \1은 첫 번째 부분 표현식을 참조, \3은 세번째 부분 표현식을 참조한다.
// 중첩된 부분 표현 ([Ss]cript)는 \2로 참조할 수 있다.
const pattern = /([Jj]ava([Ss]cript?)\sis\s(fun\w*)/;
문자
의미
파이프 문자
대체. 왼쪽에 있ㄴ는 부분 표현식이나 오른쪽에 있는 부분 표현식 중 하나를 매치한다.
(...)
그룹화. 하나의 단위로 그룹화된 아이템으로 * ,+,?,파이프 문자등에 의해 사용될 수 있다. 
나중에 이 그룹을 참조할 수 있도록 이 그룹과 매치된 문자를 기억한다.
(?:...)
그룹화만 한다. 그룹의 항목들은 하나의 단위로 취급되지만, 이 그룹에 매치되는 문자들은 기억하지는 않는다.
\n
n번째 그룹이 처음 매치했던 문자와 같은 문자를 매치한다.
  정규 표현식 앵커(anchor)
매치에 사용할 문자를 지정하지 않고 매치가 일어날 수 있는 적절한 위치를 지정한다.
시작 부분에 정규식을 고정하는 ^와 문자열의 마지막에 정규식을 고정하는 $가 많이 사용된다.
// JavaScript 문자열 자체가 매치된다.
const pattern = /^JavaScript$/;
// 이 경우 불필요한 공배까지 들어간다.
const pattern2 = /\sJava\s/;
"my Java Script".match(pattern2);
// [" Java ", index: 3, input: " my Java Script ", groups: undefined]
// 단어 경계에 매치된다. 불필요한 공백이 없다.
const pattern3 = /\bJava\b/;
"my Java Script".match(pattern3);
// ["Java", index: 3, input: "my Java Script", groups: undefined]
(?= 와 ) 사이에 표현식이 있으면 이는 긍정형 전방 탐색 선언문이고, 이는 사이에 있는 문자들이 반드시 매치되어야 한다는 의미지만, 매치된 문자열이 결과에 포함되지 않는다는 뜻이다.
(?!를 사용하여 선언문을 만들면 부정형 전방 탐색이고, 그다음에 나오는 문자열들이 매치되면 안 된다는 뜻이다.
✨ 더 자세한 내용은 참고
문자
의미
^
문자열의 시작 부분, 정규식이 어려 줄을 대상으로 하는 경우 한 줄의 시작과 일치한다.
$
문자열의 끝을 나타낸다. 여러 줄일 경우 한 줄의 마지막을 나타낸다.
\b
단어 경계를 나타낸다
\B
단어 경계가 아닌 곳의 위치를 나타낸다.
(?=p)
전방 탐색 선언으로 패턴 p와 매치되어야 하지만, 매치 결과에는 포함되지 않는다
(?!p
부정형 전방 탐색 선언으로 '(?!' 다음에 나오는 문자들은 패턴 p와 매치되지 않아야 한다.
  플래그(flag)
다른 정규 표현식 문법과는 달리 플래그는 / 문자 쌍 바깥에, 즉 두 번째 슬래시 다음에 쓴다.
i 플래그는 대소문자를 구별하지 않고 패턴 매칭이 되어야 한다.
g 플래그는 전역 패턴 매칭을 지정하는데, 즉 검색할 문자열내에서 패턴의 첫 번째 매칭 결과뿐 아니라 모든 매칭 결과를 얻는다.
m 플래그는 여러 줄에 걸쳐 패턴 매칭을 수행하는 것으로 m 플래그를 지정한 상태에서 검색될 문자열이 줄바꿈 문자를 포함하고 있으면, ^와 $ 앵커는 문자열의 시작과 끝을 나타낼 뿐만 아니라 각 줄의 시작과 끝을 나타내기도 한다.
// java 뿐만 아니라 Java\nis fun 에도 매치된다.
const pattern = /java$/im/;
  정규 표현식 플래그
문자
의미
i
대소문자를 구별하지 않는 매칭을 수행한다.
g
전역 매칭을 수행한다. 즉, 처음 매치에서 끝내지 않고 모든 매치를 찾는다.
m
여러 줄모드로 ^은 줄의 시작이나 문자열의 시작과 일치하고, $는 줄의 끝이나 문자열의 끝과 일치한다.
  참고 문서
 MDN 공식 문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D

[JavaScript] 정규표현식(regular expression)

댓글