HotHandCoding

DarrenKwon

솔직히 설명 백날 읽어봐야 절대 이해 안된다. 코드로 바로 직행을 추천.
 
프코캠에서 regex 알려주길래 밤에 커피 마시면서 함 돌려봤다. 설명도 안 쓸테니 코드를 음미하자.
let testStr = "Hello, my name is Kevin.";
let testRegex = /Kevin/;
testRegex.test(testStr); // true
let petString = "James has a pet cat.";
let petRegex = /dog|cat|bird|fish/; // | 연산 가능
let result = petRegex.test(petString);
let myString = "freeCodeCamp";
let fccRegex = /freeCodeCamp/i; // i를 붙여서 case insensitive로
let result = fccRegex.test(myString);
const myStr = 'hello my name is DarRen';
const nameRgx = /darren/i; // case insensitive
console.log(myStr.match(nameRgx)); //[ 'DarRen', index: 17, ... ]
console.log(nameRgx.test(myStr)); // true
let twinkleStar = 'Twinkle, twinkle, little star';
let starRegex = /Twinkle/ig; // g 붙여서 같은 거 있으면 여러번
let result = twinkleStar.match(starRegex); // [ 'Twinkle', 'twinkle' ]
const str = '사서 사니 사고 사는가';
const rgx = /사./g; // .은 wildcard임. 어떤 문자와도 매칭됨
console.log(str.match(rgx)); // [ '사서', '사니', '사고', '사는' ]
const str = 'big bug bog bag';
const rgx = /b[aieou]g/g; // [] 내부에 든 것중 하나만 만족하면 됨. bag, big, beg, bog, bug 해당
console.log(str.match(rgx)); // [ 'big', 'bug', 'bog', 'bag' ]
let quoteSample = "The quick brown fox jumps over the lazy dog.";
let alphabetRegex = /[A-Za-z]/ig; // - 가 붙으면 범위를 의미. 영어 대소문자면 다 됨. 
let result = quoteSample.match(alphabetRegex); // ['T', 'h', 'e', 'q', 'u', ... ]
// 아래 두 정규식은 같은 의미임
/[A-Za-z]/
/[a-z]/i
let quoteSample = "Blueberry 3.141592653s are delicious.";
let myRegex = /[h-s2-6]/ig; // 숫자도 가능
let result = quoteSample.match(myRegex); 
let quoteSample = '3 blind! mice.';
let myRegex = /[^aeiou0-9]/gi; // [] 안에 든 ^는 반대를 의미. 즉, 모음, 숫자 아닌 모든 것. 공백, ., ! [, @, / 특수 문자도 매칭됨
let result = quoteSample.match(myRegex); 
let difficultSpelling = 'Mississippis';
let myRegex = /s+/g; // s가 1개 이상 있는 것.
let result = difficultSpelling.match(myRegex); // [ 'ss', 'ss', 's' ]
let chewieQuote = 'Aaaaaaaarrgh!';
let chewieRegex = /Aa*/g; //  *는 0개 이상. 즉, A만 있어도 되긴함.
let result = chewieQuote.match(chewieRegex); // [ 'Aaaaaaaa' ]
let text = 'titanic';
let myRegex = /t[a-z]*i/; // greedy matching. 만족하는 것 중 가장 긴 것
let lazyRegex = /t[a-z]*?i/; // lazy matching. 만족하는 것 중 가장 작은 것
let result = text.match(myRegex); // titani
let result2 = text.match(lazyRegex); // ti
let text = '<h1>Winter is coming</h1>';
let myRegex = /<.*?>/; // 어떤 문자가 0개이상 있되 lazy matching
let result = text.match(myRegex); // <h1/>
// Match Beginning String PatternsPassed
// 주의할 점이 [] 안에 든 ^는 반대를 의미. 여기서 ^X는 X로 패턴이 시작함을 의미
let firstString = "Ricky is first and can be found.";
let firstRegex = /^Ricky/;
firstRegex.test(firstString); // true
let notFirst = "You can't find Ricky now.";
firstRegex.test(notFirst); // false
// Match Ending String Patterns
let theEnding = "This is a never ending story";
let storyRegex = /story$/;
storyRegex.test(theEnding); // true
let noEnding = "Sometimes a story will have to end";
storyRegex.test(noEnding); // false
let longHand = /[A-Za-z0-9_]+/; // 모든 문자, _와 매칭. 단 공백 제외
let shortHand = /\w+/; // [a-zA-Z0-9_] 단 공백 제외
let numbers = "42";
let varNames = "important_var";
longHand.test(numbers); // true
shortHand.test(numbers); // true
longHand.test(varNames); // true
shortHand.test(varNames); // true
let quoteSample = 'The five boxing wizards jump quickly.';
let alphabetRegexV2 = /\w/g; // [a-zA-Z0-9_]
let alphabetRegexV3 = /\w+/g; // [a-zA-Z0-9_]가 1개 이상 존재하는 덩어리
let resultV2 = quoteSample.match(alphabetRegexV2).length; // 31 (문자 갯수)
let resultV3 = quoteSample.match(alphabetRegexV2).length; // 6 (문장 덩어리 갯수)
let quoteSample = 'This! is, special% char& 하 34';
let nonAlphabetRegex = /\W/g; // \W는 \w와 반대 즉, [^A-Za-z0-9_]입니다. 특수 문자와 공백, 한글을 찾아냅니다.
let result = quoteSample.match(nonAlphabetRegex); // ['!', ' ', ',', ' ', '%', ' ', '&', ' ', '하', ' ']
let movieName = '2001: A Space Odyssey';
let numRegex = /\d/g; // \d 는 [0-9]을 의미한다. digit
let result = movieName.match(numRegex); // [ '2', '0', '0', '1' ]
let movieName = '2001: A Space Odyssey';
let numRegex = /\d/g; // \d 는 [0-9]을 의미한다. digit
let notNumRegex = /\D/g; // \D 는 [^0-9]을 의미한다. digit
let result = movieName.match(numRegex); // [ '2', '0', '0', '1' ]
let result2 = movieName.match(notNumRegex); // [ ':', ' ', 'A', ' ', ... ]
// 유효한 userName인지 정규식으로 걸러내기
// spec :
// 1. Usernames can only use alpha-numeric characters.
// 2. The only numbers in the username have to be at the end. There can be zero or more of them at the end. Username cannot start with the number.
// 3. Username letters can be lowercase and uppercase.
// 4. Usernames have to be at least two characters long. A two-character username can only use alphabet letters as characters.
let username = 'JackOfAllTrades';
let userCheck = /(^[a-z][a-z]+\d*$|^[a-z]\d\d+$)/i;
// sams as /^[a-z]([0-9]{2,}|[a-z]+\d*)$/i;
let result = userCheck.test(username); // 유효한 username이니? T/F
let whiteSpace = 'Whitespace. Whitespace everywhere!';
let spaceRegex = /\s/g;
let result = whiteSpace.match(spaceRegex); // [ ' ', ' ' ]
let A5 = 'aaaaah';
let A4 = 'aaaah';
let A3 = 'aaah';
let A2 = 'aah';
let multipleA = /a{3,5}h/; // a가 3개 이상 5개 이하 있어야 함
console.log(multipleA.test(A5)); // true
console.log(multipleA.test(A4)); // true
console.log(multipleA.test(A3)); // true
console.log(multipleA.test(A2)); // false
let ohStr = 'Ohhh no';
let ohRegex = /Oh{3,6}\sno/; // Ohhh no, Ohhhh no, ...
let result = ohRegex.test(ohStr);
let AMany = 'haaaaaaaaaaaaaaaaaah';
let A4 = 'haaaah';
let A2 = 'haah';
let multipleA = /ha{3,}h/; // a가 3개 이상이기만 하면 됨.
console.log(multipleA.test(AMany)); // true
console.log(multipleA.test(A4)); // true
console.log(multipleA.test(A2)); // false
let A3 = 'haaah';
let A2 = 'haah';
let multipleA = /ha{3}h/; // a가 딱 3개 있어야 함
console.log(multipleA.test(A3)); // true
console.log(multipleA.test(A2)); // false
let favWord = 'favorite';
let favRegex = /favou?rite/; // u는 있어도 좋고 있어도 (1개) 좋다. 단 u 여러개는 안된다. 그럴거면 *을 써라.
let result = favRegex.test(favWord); // true
 
 
 
a-z 범위
[A-Za-z0-9가-힣]
 
\w, \W: word. a-z, A-Z, 숫자, _인 것 한글, 한자는 인식 못 함
\w = 영어 알파벳, 숫자, _ 와 매칭 [a-zA-Z0-9_]
\W = [^a-zA-Z0-9_]
\d = [0-9]
\D = [^0-9]
\s = 공백. 띄어쓰기, 탭, 엔터 다 공백임.
\S = 공백 아닌 모든 것
 
제한자(quantifier)
 
+ 1개 이상
* 0개 이상 (없어도 됨)
? 없거나 1개여야 함. (*과 혼동 주의 *는 여러개 있어도 됨.)
 
^ 무엇으로 시작함.
$ 무엇으로 끝남.
[^ 반대 (^와 혼동 주의)
 
{m, n} m개 이상 n개 이하 반복.
{m, } m개 이상이기만 하면 됨.
{m} 정확히 m개 여야 함
 
 
lazy matching 
패턴에 매칭되는 것들 중 가장 짧은 녀석
 
+? 1개 이상 있긴 한데 만족하는 것 중 가장 짧은 것
*? 0개 이상 있긴 한데 만족하는 것 중 가장 짧은 것
?? (이거 의미 있긴한가?)
{m, n}? m개 이상 n개 이하 있긴 한데 가장 짧은 것
{m, }? m개 이상 있긴한데 가장 짧은것
 
 
Lookahead
 
 
 
 
flag
i
g
 
 
  정규식 생성
 
- 정규식 패턴이 계속 지속될 경우
const re = /ab+c/;
정규식이 계속 지속 될 경우 위와 같은 리터럴 방법을 사용하는 것이 좋습니다.
 
- 정규식 패턴이 변경되는 경우 (constructor를 통한 정규식 생성)
const re = new RegExp("ab+c");
정규식 패턴이 바뀌는 경우, 생성자 함수를 사용하여 동적으로 정규식을 만들 수 있습니다.
 
  정규식 활용 맛보기
 
메타문자들
 
[ ] : 대괄호 안에 문자들과 매칭. [abc] 면 a || b || c
- : 범위문자. A-Z면 A부터 Z까지.
$ : 끝
^ : 뒤에 위치한 문자를 제외한 모든 문자와 매칭. 즉 NOT 연산과 동일. 
 
[\ 관련]
\d, \D : digit. 숫자인 것
\d  = [0-9]
\D = [^0-9] (숫자가 아닌것)
 
\w, \W: word. a-z, A-Z, 숫자, _인 것 한글, 한자는 인식 못 함
\w = 영어 알파벳, 숫자, _ 와 매칭 [a-zA-Z0-9_]
\W = [^a-zA-Z0-9_]
 
\s, \S : space. 공백
\s = 공백. [\t\n\r\f\v]
\S = [^\t\n\r\f\v]
 
[반복자]
* : 앞서 위치한 문자가 0번 이상 반복
+ : 1번 이상 반복
{s, e} : s번 이상, e번 이하로 '반복'될 경우
 
[대표적 예제]
 
[a-zA-Z] a부터 z까지, A부터 Z까지. 즉, 영어 알파벳과 일치
[가-힣] 조합된 한글 모두와 매칭. 단, 낱개의 자음, 모음은 일치 하지 않음
\.{2,} '.'이 두 번 이상 반복될 경우 해당 문자와 해칭(.은 메타 문자이기 때문에 \를 붙여야)
[^a-zA-Z가-힣] 영어와 (조합된) 한글이 아닌 문자와 매칭. 즉, 영어도 아니고 한글도 아닌것.
(다|까)+(\.|\?)$ 문장의 끝이 다. 다? 까. 까? 로 끝나는 것
다\. ? 문자열 중 '다.' 혹은 '다. '가 있을 경우.
[가-힣][은는이가]+ 문자열 중 한글 + [은는이가] 인 경우 매칭
 
 
⚡ 정규식에서의 캐릭터 클래스
 
\
1. 단순문자 앞에 \ : 단순 문자가 아니라 다른 의미로 해석됩니다. \d의 경우 숫자를 의미합니다.
2. 특수문자 앞에 \ : 특수 문자가 아니라 단순 문제로 해석됩니다. \*은 그냥 문자 *가 됩니다.
\대문자는 \소문자의 반대입니다. 예를 들어 \s가 공백을 의미하지만 \S는 공백이 아닌 것을 의미합니다.
 
 
\d, \D : digit. 숫자인 것
\d  = [0-9]
\D = [^0-9] (숫자가 아닌것)
 
\w, \W: word. a-z, A-Z, 숫자, _인 것 한글, 한자는 인식 못 함
\w = 영어 알파벳, 숫자, _ 와 매칭 [a-zA-Z0-9_]
\W = [^a-zA-Z0-9_]
 
\s, \S : space. 공백
\s = 공백. [\t\n\r\f\v]
\S = [^\t\n\r\f\v]
 
 
.
 
새로운 라인을 의미하는 \n 이스케이프를 제외한 모든 문자 하나를 의미한다. 즉, 그 문자가 무엇이든 상관없이 그냥 문자라면 모두 매칭한다. 한글, 한자, 숫자도 모두 매칭한다.
 
 
⚡ 정규식에서의 앵커
 
^, $
 
^ 앵커는 문자열이 시작하는 경계, $는 문자열이 끝나는 경계를 의미한다.
 
 
 
⚡ 정규식에서의 수량자(반복)
 
 
*
앞서 살펴보았듯, 해당 문자가 0개 이상 있다는 것입니다.
0개에 주의합시다. 해당 문자가 없어도 된다는 것입니다.
/ab*c/는 ac와도 연계되겠죠
 
 
 
+
*와 비슷합니다 *가 해당 문자가 0개 이상 있다는 것이라면 +는 1개 이상 있다는 것입니다.
 
 
 
⚡ 정규식에서의 플래그
 
정규식의 파라미터입니다. 다음과 같이 사용됩니다
new RegExp(pattern[, flags])
const re = new RegExp(/^abc/, "i");
 
g
전체 판별(global). 처음 일치에서 중단하지 않고, 문자열 전체를 판별합니다.
 
i
대소문자 무시.(insensitive) u 플래그까지 활성화된 경우, 유니코드 대소문자 폴딩을 사용합니다.
 
m
여러 줄. 시작 혹은 끝 문자(^과 $)가 여러 줄에 적용되도록 합니다. 즉, 전체 입력 문자열의 맨 처음과 맨 끝뿐만이 아니라 (\n이나 \r로 구분되는) 모든 줄의 처음과 끝에 적용됩니다.
 
s
"dotAll". . 문자가 줄바꿈을 포함한 모든 문자에 일치합니다.
 
u
유니코드. 패턴을 유니코드 코드 포인트 열로 처리합니다. (Binary strings 참조)
 
y
sticky. 이 정규 표현식의 lastIndex 속성에 명시된 인덱스에서만 판별하고, 이전/이후 인덱스에서 판별을 시도하지 않습니다.
 
 
 
  실제 프로젝트에서 사용하는 Regex들
 
https://regexr.com/
여기에서 입력한 결과물들을 테스트해볼 수 있다.
 
 
* webpack에서 특정 확장자로 끝나는 경우 추출하기
 
설명을 덧붙이자면 //는 정규식이란 의미이며
\.는 .이 특별한 의미가 아닌 일반 문자인 .을 의미한다는 것
css$는 css로 끝나는 것을 의미합니다.
()는 Capturing group으로 /\.(js|mjs|jsx|ts|tsx)$/ 와 같이 여러 문자열 중 하나에 matching 시켜야 하는 경우 사용해야 합니다.
만약, /\.js|mjs|jsx|ts|tsx$/ 와 같이 사용한 후 hello.tsx을 검사해보면 .tsx에 걸리는 것이 아니라 .ts에 걸립니다.
 
/\.(scss)$/
/\.(js)$/
/\.css$/
/\.(ts|tsx)$/
/\.(js|mjs|jsx|ts|tsx)$/
/\.html$/
/\.json$/
 
* e2e 테스트 파일을 감지하기 위한 정규식
".e2e-spec.ts$"
 
* gmail.com으로 끝나는가?
/^[A-Za-z-0-9._%+-]+@gmail.com$/
 
* 글에서 img 태그 분리
<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>
 
* img 태그에서 src="" 에서 "" 부분 추출
/"(.+?)"/;
 
* [0-9a-zA-Z_]+[\.]+(jpg|png|svg|gif)
* http[s]?://(?:[a-zA-Z]|[0-9]|[$-_@.&+]|[!*,]|(?:%[0-9a-fA-F][0-9a-fA-F]))+
 
 
ref)
https://stackoverflow.com/questions/19605150/regex-for-password-must-contain-at-least-eight-characters-at-least-one-number-a
darrengwon.tistory.com/1271?category=900894
https://evan-moon.github.io/2020/08/15/regex-example/
https://evan-moon.github.io/2020/07/24/about-regular-expression/

예시로 공부하는 javascript 정규식

댓글