정규표현식 part2

정규식 패턴(표현식)

Anchors -^ and $

^

^는 문자열의 처음을 의미하며, 문자열에서 ^뒤에 붙은 단어로 시작하는부분을 찾는다. 일치하는 부분이 있더라도, 그 부분이 문자열의 시작부분이 아니면 null을 리턴.

"coding is fun".match(/^co/); // ["co"]
"coding is fun".match(/^fun/); // null

$

$는 문자열의 끝을 의미하며, 문자열에서 $앞에 표현식으로 끝나는 부분을 찾는다. ^와 비슷하지만 ^는 문자열의 시작을 찾는 반면, $는 문자열의 마지막부분을 찾는다. 마찬가지로 일치하는부분이 끝부분이아니면 null을 리턴한다.

"coding is fun".match(/un$/); // ["un"]
"coding is fun".match(/is$/); // null
"coding is fun".match(/^coding is fun$/); // ["coding is fun"]
// 문자열을 ^ $로 감싸면 그 사이에 들어간 문자열과 정확히 일차하는부분을 찾는다.

Quantifiers -- *, +, ? and {}

*

는 바로앞의 문자가 0번이상 나타나는 경우를 검색한다.

/ode*/g을 사용하면 "od"가 들어가면서 "e"가 0번이상(없어도된다는얘기) 포함된 문자열을 리턴

"co cod code codee coding codeeeeee codingding".match(/ode*/g);
// ["od", "ode", "odee", "od", "odeeeeee", "od"]

+

+도 마찬가지로 *과 같은 방식이지만 +는 1번이상 이라는 조건이 다르다.

?

?는 *또는 +와 비슷한데

?앞의 문자가 0번 혹은 1번 나타나는 경우만 검색한다.

*? 또는 +?와 같이 * +와 같이쓰는것도 가능하다.

"co cod code codee coding codeeeeee codingding".match(/ode?/g);
// ["od", "ode", "ode", "od", "ode", "od"]
"co cod code codee coding codeeeeee codingding".match(/ode*?/g);
// ["od", "od", "od", "od", "od", "od"]
"co cod code codee coding codeeeeee codingding".match(/ode+?/g);
// ["ode", "ode", "ode"]

{}

{}는 ,?,+,+?의 확장판으로 생각할수있다. ,?,+,+?가 0개 이상 또는 1개 이상 검색이 전부였다면, {}는 직접 숫자를 넣어서 연속되는 갯수를 설정할수 있다.

"co cod code codee coding codeeeeee codingding".match(/ode{2}/g);
// 2개의 "e"를 포함한 문자열을 검색합니다.
// ["odee", "odee"]

"co cod code codee coding codeeeeee codingding".match(/ode{2,}/g);
// 2개 이상의 "e"를 포함한 문자열을 검색합니다.
// ["odee", "odeeeeee"]

"co cod code codee coding codeeeeee codingding".match(/ode{2,5}/g);
// 2개 이상 5개 이하의 "e"를 포함한 문자열을 검색합니다.
// ["odee", "odeeeee"]

OR operator

|는 or조건으로 검색하여 | 의 왼쪽 또는 오른쪽의 검색결과를 반환한다.

"Cc Oo Dd Ee".match(/O|D/g); // ["O", "D"]
"Cc Oo Dd Ee".match(/c|e/g); // ["c", "e"]
"Cc Oo Dd Ee".match(/D|e/g); // ["D", "e"]
"Ccc Ooo DDd EEeee".match(/D+|e+/g); // + 는 1번 이상 반복을 의미하기 때문에
// ["DD", "eee"] 를 반환합니다.

Bracket Operator - []

대괄호 []안에 명시된 값을 검색한다.

[abc] // a,b,c 를 검색 OR operator를 이용해서 a|b|c도 동일하게 작동
[a-c] // 위와 동일  "-"로 검색구간을 설정 가능

"Ccc Ooo DDd EEeee".match(/[CD]+/g); // [] 에 + 등의 기호를 함께 사용할 수도 있습니다.
// C or D 가 한번 이상 반복된 문자열을 반복 검색하기 때문에
// ["C", "DD"] 가 반환됩니다.

"Ccc Ooo DDd EEeee".match(/[co]+/g); // ["cc", "oo"]
"Ccc Ooo DDd EEeee".match(/[c-o]+/g); // - 때문에 c ~ o 구간을 검색하여
// ["cc", "oo", "d", "eee"] 가 반환됩니다.

"AA 12 ZZ Ad %% Az !# dd 54 zz".match(/[A-Za-z]+/g); 
// a~z 또는 A~Z 에서 한번 이상 반복되는 문자열을 반복 검색하기 때문에
// ["AA", "ZZ", "Ad", "Az", "dd", "zz"] 를 반환합니다.
"AA 12 ZZ Ad %% Az !# dd 54 zz".match(/[A-Z]+/gi);
// flag i 는 대소문자를 구분하지 않기 때문에 위와 동일한 결과를 반환합니다.
// ["AA", "ZZ", "Ad", "Az", "dd", "zz"]

"AA 12 ZZ Ad %% Az !# dd 54 zz".match(/[0-9]+/g);
// 숫자도 검색 가능합니다.
// ["12", "54"]

"aAbB$#67Xz@9".match(/[^a-zA-Z]+/g);
// [] 안에 ^ 를 사용하면 anchor 로써의 문자열의 처음을 찾는것이 아닌 
// 부정을 나타내기 때문에 [] 안에 없는 값을 검색합니다.
// ["$#67", "@9"]

Character classes

\d & \D

\d 의 d 는 digit을 의미하며 0~9 사이의 숫자 하나를 검색한다. [0-9]와 동일하다
\D 는 not Digit을 의미하며 , 숫자가 아닌 문자 하나를 검색한다. [^0-9]와 동일

\w & \W

\w는 알파벳 대소문자, 숫자 _(underbar)중 하나를 검색한다. [a-zA-Z0-9_]와 동일

\W는 알파벳 대소문자, 숫자 _(underbar)가 아닌 문자 하나를 검색한다. [^a-zA-Z0-9_]와 동일

Grouping and capturing

()
소괄호는 그룹으로 묶는다는 으이미 이외에도 다른 몇가지 의미가 더있다.

그룹화

let co = "coco";
let coco = "cooocooo";

co.match(/co+/); // ["co", index:0, input:"coco", groups:undefined]
cooo.match(/co+/); // ["cooo", index:0, input: "cooocooo", groups:undefined]

co.match(/(co)+/); // ["coco","co",index:0, input:"coco", groups:undefined]
cooo.match(/(co)+/); // ["co", "co", index:0, input:"cooocooo", groups:undefined]

co+는 c를 검색하고 +가 o를 1회이상 연속으로 반복되는 문자를 검색해주기 때문에 cooo가 반환되었다.

하지만 (co)+ 는 c와 o를 그룹화하여 co를 단위로 1회이상 반복을 검색한다.

coco가 반환된다. 특이한점은 여기서 문자열로 반환된 결과가 두개이다.

캡쳐

()로 그룹화한다고 하였다. 이를 캡쳐한다고 한다.

co.match(/(co)+/); // ["coco", "co", index:0, input:"coco", groups : undefined]

1. () 로 "co"를 캡쳐
2. 캡쳐한 "co"는 당장 사용하지않고 +가 "co"의 1회이상 연속반복을 검색
3. 이렇게 캡쳐 이외 표현식이 모두 작동하고나면 캡쳐해 두었던 "co"를 검색

"2021code".match(/(\d+)(\w)/);
// ["2021c", "2021", "c", index:0, input:"2021code", groups:undefined]

1. ()안의 표현식을 순서대로 캡쳐 -> \d+ 와 \w
2. 캡쳐후 남은 표현식으로 검색 => 이변 예시에는 남는 표현식없음 위에는 + 가있엇음
3. \d로 숫자를 검색하되 +로 1개이상연속되는 숫자를 검색 => 2021
4. \w로 문자를 검색 => c
5. 3번과 4번이 조합되어 "2020c"가 반환
6. 첫번째 캡쳐한 (\d+)로 인해 2020이 반환
7. 두번째 캡쳐한 (\w)로 인해 "c"가 반환

문자열 대체시 캡쳐된 값 참조

캡쳐된 값은 replace() 메소드를 사용하여 문자 치환시 참조 패턴으로 사용될 수 있다.

"code.hooks".replace(/(\w+)\.(\w+)/, "$2.$1"); // hooks.code

1. 첫번째 (\w+) code를 캡쳐하고, 두번째 (\w+)가 hooks를 캡쳐한다.
2. /(\w+)\ 와 (\w+)/사이의 . 은 . 앞에 역슬래시가 사용되었기 때문에 '임의의 한 문자'가 아닌 기호로써의 온점 . 을 의미합니다.
3. 각 캡쳐된 값은 첫번째 $1이 참조, 두번째는 $2이 참조하기 때문에 이 참조된 값을 "$2.$1"이 대체 하게되어 앞뒤가 바뀐 값이 반환된다.

non-capturing

()를 사용하면 그룹화와 캡쳐를 한다고했다.

하지만 (?:)로 사용하면 그룹은 만들어지지만 캡쳐는 하지않는다.

let co = "coco";

co.match(/(co)+/); // ["coco", "co", index:0, input:"coco", groups:undefined]

co.match(/(?:co)+/);

//["coco", index:0, input:"coco", groups:undefined]
// 캡쳐는 없고 +로 연속되는것을 찾고 바로 반환하고 끝난다. (남은작업이없다 -> 캡쳐를안했기때문에)

lookahead

(?=)는 검색하려는 문자열에 (?=여기)에 일치하는 문자가 있어야 (?=여기)앞의 문자열을 반환한다.

"abcde".match(/ab(?=c)/);
// ab가 c앞에 있기 때문에 ["ab"]를 반환한다.

"abcde".match(/ab(?=d)/);
// d의 앞에는 "abc"이기 때문에 null을 반환한다.

negated lookahead

(?!) 는 (?=)의 부정이다.

"abcde".match(/ab(?!c)/);//null
"abcde".match(/ab(?!d)/); //["ab"]