kei : 29장 MATH (4p) + MDN 문서 참조
노아 : 30장 Date (10p)
데브워니 : 31장 RegExp (13p)
널두 : 32장 String (12p)
31장 정규표현식
31.1 정규표현식이란?
regular expression
일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어이다.
정규표현식은 자바스크립트의 고유 문법이 아니다.
대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다.
ES3부터 펄pearl 정규표현식 문법으로 도입했다.
대상: 문자열
기능: 패턴 매칭 : 특정한 패턴과 일치하는 문자열을 검색, 추출, 치환 할 수 있는 기능
const tel = '010-9999-8887';
const reg = /^\d{3}-\d{4}-\d{4}$/;
reg.test(tel);
const tel2 = '0101-9999-8887';
reg.test(tel2);
정규표현식을 사용하지 않았다면 반복문과 조건문을 사용했을 것이다.
31.2 정규 표현식의 생성
정규 표현식 객체를 생성하기 위해서는 정규 표현식 리터럴과 RegExp 생성자 함수를 사용할 수 있다.
일반적인 방법은 정규 표현식 리터럴을 사용한다.
정규표현식 리터럴 :
패턴: 어떤 형식인지 : 정규 표현식의 패턴
플래그: 부분만? 전체적으로? 적용할 것인지 : 정규 표현식의 플래그 g,i,m,u,y
const target = 'Is this all there is?';
const reg = /is/i;
reg.test(target);//true
reg.test(target);//true
reg.test(target);//true
const target2 = '하하 th하하 all there 하하?';
reg.test(target2);//false
RegExp 생성자 함수
const target = 'Is this all there is?';
const reg = new RegExp(/is/i);
reg.test(target);//true
const reg2 = new RegExp(/is/, 'i');
reg2.test(target);//true
const reg3 = new RegExp('is', 'i');
reg3.test(target);//true
31.3 RegExp 메서드
1) RegExp.prototype.exec
exex 메서드
인수로 전달 받은 문자열에 대해
-> 정규 표현식의 패턴을 검색
-> 매칭 결과
-> 배열로 반환, 없으면 null
const target = '엄마 안녕하세요 아침이에요';
const reg = /아침/;
reg.exec(target);
['아침', index: 9, input: '엄마 안녕하세요 아침이에요', groups: undefined]
reg.exec(target);
['아침', index: 9, input: '엄마 안녕하세요 아침이에요', groups: undefined]
const target2 = '엄마 안녕하세요 아침이에요 아침 밥은 무엇인가요';
reg.exec(target2);
['아침', index: 9, input: '엄마 안녕하세요 아침이에요 아침 밥은 무엇인가요', groups: undefined]
reg.exec(target2);
['아침', index: 9, input: '엄마 안녕하세요 아침이에요 아침 밥은 무엇인가요', groups: undefined]
reg.test(target2);//true
reg.test(target2);//true
const target = '엄마 안녕하세요 아침이에요 아침 밥은 무엇인가요';
const reg = /아침/g;
reg.exec(target);
['아침', index: 9, input: '엄마 안녕하세요 아침이에요 아침 밥은 무엇인가요', groups: undefined]
reg.exec(target);
['아침', index: 15, input: '엄마 안녕하세요 아침이에요 아침 밥은 무엇인가요', groups: undefined]
reg.exec(target);
null
reg.test(target);//true
reg.test(target);//true
reg.test(target);//false이상하네요
exec 메서드는 문자열 내의 모든 패턴을 검색하는 g플래그를 지정해도 첫번째 매칭 결과만 반환한다는데
그렇지 않은데?
2) RegExp.prototype.test
test 매서드는 인수로 전달 받은 문자열에 대해 -> 패턴을 검색하여 -> 매칭 결과를 -> 불리언 값으로 반환한다.
예시는 위를 참조 : exec 와 같음
3) String.prototype.match
String 표준 빌트인 객체가 제공하는 match 메서드는
-> 대상 문자열과 -> 인수로 전달받은 정규 표현식과의
-> 매칭 결과를
-> 배열로 반환한다.
const target = '엄마 안녕하세요 아침이에요 아침 밥은 무엇인가요';
const reg = /아침/g;
target.match(reg);
(2) ['아침', '아침']
const reg2 = /아침/;
target.match(reg2);
['아침', index: 9, input: '엄마 안녕하세요 아침이에요 아침 밥은 무엇인가요', groups: undefined]
exec 메서드는 문자열 내의 모든 패턴을 검색하는 g 플래그를 지정해도 첫 번째 매칭 결과만 반환한다.
하지만 String.prototype.match 메서드는 g플래그가 지정되면 모든 매칭 결과를 배열로 반환한다.
31.4 플래그
플래그: 정규 표현식의 검색 방식을 설정
플래그는 옵션이므로 선택적으로 사용할 수 있다.
순서 상관 없다. 하나 이상의 플래그를 동시에 적용 가능.
순정(플래그 안 달면): 대소문자 구별, 첫번째 매칭만 계속 검색함.
| 플래그 | 설명 |
| i | i 플래그가 붙으면 대·소문자 구분 없이 검색합니다. 따라서 A와 a에 차이가 없습니다 |
| g | g 플래그가 붙으면 패턴과 일치하는 모든 것들을 찾습니다. g 플래그가 없으면 패턴과 일치하는 첫 번째 결과만 반환됩니다. |
| m | 다중 행 모드(multiline mode)를 활성화합니다. 문자열의 행이 바뀌더라도 패턴 검색을 계속한다. |
| s | .이 개행 문자 \n도 포함하도록 ‘dotall’ 모드를 활성화합니다. |
| u | 유니코드 전체를 지원합니다. 이 플래그를 사용하면 서로게이트 쌍(surrogate pair)을 올바르게 처리할 수 있습니다. |
| y | 문자 내 특정 위치에서 검색을 진행하는 ‘sticky’ 모드를 활성화 시킵니다. |
const target = `Today id cold. 심바 house 보일러 안 킴. 나현 is sleeping. 심바 is sleeping too.
today 나현 is planed study for javascript.`;
target.match(/today/);
target.match(/today/i);
target.match(/today/g);
target.match(/today/gi);
31.5 패턴
패턴==규칙
: 일정한 규칙을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어
/로 열고 닫는다
문자열의 따옴표는 생략
따옴표를 포함하면 -> 따옴표까지도 패턴에 포함됨 -> 검색 된다
메타 문자 또는 기호로 표현한다.
문자열 <--- 패턴 일치하는 문자열 존재 : 정규표현식과 매치한다.
1) 문자열 검색
대상 문자열에서 패턴으로 검색한다.
2) 임의의 문자열 검색
.은 임의의 문자 한 개를 의미한다.
const target = 'Is this all there is';
const reg = /.../g;
target.match(reg);
3) 반복 검색
(1) {m,n}
{m,n}은 앞선 패턴이 최소 m번 최대 n번 반복되는 문자열을 의미한다.
콤마 뒤에 공백이 있으면 정상 동작하지 않으므로 주의하기 바란다.
const target = 'A AA AAA AAAA AAAA AaAa Aaa aaA BBB BBBB BBbb bbBB';
undefined
const reg = /A{2,3}/g;
undefined
target.match(reg);
(4) ['AA', 'AAA', 'AAA', 'AAA']
const reg2 = /B{2,3}/g;
undefined
target.match(reg2);
(4) ['BBB', 'BBB', 'BB', 'BB']
const reg3 = /B{1,4}/gi;
undefined
target.match(reg3);
(4) ['BBB', 'BBBB', 'BBbb', 'bbBB']
const reg4 = /B{3,4}/gi;
undefined
target.match(reg4);
(4) ['BBB', 'BBBB', 'BBbb', 'bbBB']
(2) {n}
{n} 패턴이 n번 반복되는 문자열
{n} 은 {n,n} 과 같다
패턴이 n번 반복 === 패턴이 최소 m번, 최대 n번 반복
(3) {n,1}
{n,1} 패턴이 최소 n번 이상 반복되는 문자열
const target = 'A AA AAA AAAA AAAA AaAa Aaa aaA BBB BBBB BBbb bbBB';
undefined
const reg = /A{2}/g;
undefined
const reg2 =/A{2,}/g;
undefined
target.match(reg);
(6) ['AA', 'AA', 'AA', 'AA', 'AA', 'AA']0: "AA"1: "AA"2: "AA"3: "AA"4: "AA"5: "AA"length: 6[[Prototype]]: Array(0)
target.match(reg2);
(4) ['AA', 'AAA', 'AAAA', 'AAAA']
(4) +
+는 앞선 패턴이 최소 한 번 이상 반복되는 문자열을 의미한다.
{1,} 과 + 는 같다
const target = 'A AA AAA AAAA AAAA AaAa Aaa aaA BBB BBBB BBbb bbBB';
undefined
const reg = /A+/g;
undefined
target.match(reg);
(9) ['A', 'AA', 'AAA', 'AAAA', 'AAAA', 'A', 'A', 'A', 'A']
const reg2 = /A{1,}/g;
undefined
target.match(reg2);
(9) ['A', 'AA', 'AAA', 'AAAA', 'AAAA', 'A', 'A', 'A', 'A']
const reg3 = /A{1}/g;
undefined
target.match(reg3);
(18) ['A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A']
const reg4 = /A{1,3}/g;
undefined
target.match(reg4);
(11) ['A', 'AA', 'AAA', 'AAA', 'A', 'AAA', 'A', 'A', 'A', 'A', 'A']
//{m,n}최소 m번, 최대 n번 반복
undefined
const reg5 = /A{2,4}/g;
undefined
target.match(reg5);
(4) ['AA', 'AAA', 'AAAA', 'AAAA']
(5) ?
?는 최대 한번 이상 반복되는 문자열을 의미한다.
?는 {0,1}과 같다
const target = 'color colour colouaur'
undefined
const reg = /colou?r/g;
undefined
target.match(reg);
(2) ['color', 'colour']
4) OR 검색
| 는 OR의 의미를 갖는다.
const target = 'A AA AAA AAAA AAAA AaAa Aaa aaA BBB BBBB BBbb bbBB';
undefined
const reg = /A|B{2,3}/g;
undefined
target.match(reg);
(22) ['A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'BBB', 'BBB', 'BB', 'BB']
const reg = /A{2,3}|B{2,3}/g;
undefined
target.match(reg);
(8) ['AA', 'AAA', 'AAA', 'AAA', 'BBB', 'BBB', 'BB', 'BB']
const reg3 = /A{1,3}|B{1,3}/g;
undefined
target.match(reg3);
(16) ['A', 'AA', 'AAA', 'AAA', 'A', 'AAA', 'A', 'A', 'A', 'A', 'A', 'BBB', 'BBB', 'B', 'BB', 'BB']
+는 패턴이 최소 한번 이상 반복되는 문자열
+는 {1,}과 같다
const target = 'A AA AAA AAAA AAAA AaAa Aaa aaA BBB BBBB BBbb bbBB';
const reg = /A+|B+/g;
target.match(reg);
(13) ['A', 'AA', 'AAA', 'AAAA', 'AAAA', 'A', 'A', 'A', 'A', 'BBB', 'BBBB', 'BB', 'BB']
const reg2 = /A{1,}|B{1,}/g;
target.match(reg2);
(13) ['A', 'AA', 'AAA', 'AAAA', 'AAAA', 'A', 'A', 'A', 'A', 'BBB', 'BBBB', 'BB', 'BB']
const reg3 = /A{2,}|B{2,}/g;
target.match(reg3);
(8) ['AA', 'AAA', 'AAAA', 'AAAA', 'BBB', 'BBBB', 'BB', 'BB']
[ ] 안에 있는 문자들은 OR로 작동한다
[ - ] 범위를 지정한다.
const target = 'A AA AAA AAAA AAAA AaAa Aaa aaA BBB BBBB BBbb bbBB';
undefined
const reg = /[AB]+/g;
undefined
target.match(reg)
(13) ['A', 'AA', 'AAA', 'AAAA', 'AAAA', 'A', 'A', 'A', 'A', 'BBB', 'BBBB', 'BB', 'BB']
const reg2 = /[A-Z]/g;
undefined
target.match(reg2)
(29) ['A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'B', 'B', 'B', 'B', 'B', 'B', 'B', 'B', 'B', 'B', 'B']
const reg3 = /[A-Z]+/g;
undefined
target.match(reg3)
(13) ['A', 'AA', 'AAA', 'AAAA', 'AAAA', 'A', 'A', 'A', 'A', 'BBB', 'BBBB', 'BB', 'BB']
5) NOT 검색
^은 not을 의미한다
[...] 안에서 존재한다.
[^0-9] 는 숫자를 제외한 == 문자를 의미한다
| [0-9] | \d | [^0-9] | \D |
| [A-Za-z0-9_] | \w | [^A-Za-z0-9_] | \W |
6) 시작 위치로 검색
문자열의 시작은 ^ 이다.
[...] 바깥에서 존재한다.
const target = 'https://cutewonny.tistory.com';
const reg = /^https/;
target.match(reg);
['https', index: 0, input: 'https://cutewonny.tistory.com', groups: undefined]
reg.test(target);
true
7) 마지막 위치로 검색
const target = 'https://cutewonny.tistory.com';
const reg = /^https/;
target.match(reg);
reg.test(target);
const reg2 =/com$/;
reg2.test(target);
const reg3 =/tistory$/;
reg3.test(target);
31.6 자주 사용하는 정규표현식
1) 특정 단어로 시작하는지 검사
let url = 'https://cutewonny.tistory.com/manage/newpost/195?type=post&returnURL=https%3A%2F%2Fcutewonny.tistory.com%2Fentry%2F31%EC%9E%A5-%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D'
undefined
/^https?:\/\//.test(url);
true
url.match(/^https?:\/\//)
['https://', index: 0, input: 'https://cutewonny.tistory.com/manage/newpost/195?t…%A5-%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D', groups: undefined]0: "https://"groups: undefinedindex: 0input: "https://cutewonny.tistory.com/manage/newpost/195?type=post&returnURL=https%3A%2F%2Fcutewonny.tistory.com%2Fentry%2F31%EC%9E%A5-%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D"length: 1[[Prototype]]: Array(0)
/^(http|https):\/\//.test(url);
true
2) 특정 단어로 끝나는지 검사
let fileName = 'index.html';
undefined
/html$/.test(fileName);
true
3) 숫자로만 이루어진 문자열인지 검사
let target ='12345';
undefined
/^\d+$/.test(target);
true
target ='asdfa12345asdfasdf';
'asdfa12345asdfasdf'
/^\d+$/.test(target);
false
target ='asdfa1234';
'asdfa1234'
/^\d+$/.test(target);
false
4) 하나 이상의 공백으로 시작하는지 검사
let target = ' Hi'
undefined
/^[\s]+/.test(target);
true
target = ' Hi'
' Hi'
/^[\s]+/.test(target);
true
target = 'Hi'
'Hi'
/^[\s]+/.test(target);
false
5) 아이디로 사용 가능한지 검사
let id = 'cutewonny123'
undefined
/^[A-Za-z0-9]{4,10}$/.test(id);
false
let id = 'wonny123'
undefined
/^[A-Za-z0-9]{4,10}$/.test(id);
true
6) 메일 주소 형식 검사
let regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
let regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;
undefined
let email = 'cutewonny@gmail.com'
undefined
regExp.test(email);
true
email = 'cutewonny@gmail.comasdfas'
'cutewonny@gmail.comasdfas'
regExp.test(email);
true
email = 'cutewonny@ad-max.co.kr'
'cutewonny@ad-max.co.kr'
regExp.test(email);
true
email.match(regExp);
(3) ['cutewonny@ad-max.co.kr', 'y', 'o', index: 0, input: 'cutewonny@ad-max.co.kr', groups: undefined]0: "cutewonny@ad-max.co.kr"1: "y"2: "o"groups: undefinedindex: 0input: "cutewonny@ad-max.co.kr"length: 3[[Prototype]]: Array(0)
email = 'cutewonny@ad-max'
'cutewonny@ad-max'
email.match(regExp);
(3) ['cutewonny@ad-max', 'y', 'd', index: 0, input: 'cutewonny@ad-max', groups: undefined]
regExp.test(email);
true
7) 핸드폰 번호 형식 검사
let regPhone = /^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/;
undefined
aa = '010-1212-1212'
'010-1212-1212'
regPhone.test(aa);
true
aa = '010-1212-121211111'
'010-1212-121211111'
regPhone.test(aa);
false
8) 특수 문자 포함 여부 검사
const reg = /[^\w\sㄱ-힣]|[\_]/g;
let aa = '한정원짱짱맨';
let aa2 = '한정원짱짱맨!@!!';
reg.test(aa);
false
reg.test(aa2);
true
특수문자 제거
'자바스크립트-스터디[2021-10-05~완료]' 카테고리의 다른 글
| 33장 Symbol (0) | 2022.01.21 |
|---|---|
| 34장 이터러블 (0) | 2022.01.21 |
| 18장 함수와 일급 객체 (0) | 2022.01.12 |
| [27.8] 배열 메서드 (0) | 2022.01.10 |
| 16장 프로퍼티 어트리뷰트 (0) | 2021.12.31 |
