๐Ÿ’ก์ •๊ทœ ํ‘œํ˜„์‹(Regular Expression) - ํŒจํ„ด๊ณผ ํ”Œ๋ž˜๊ทธ

Hi! I'm JENNIEยท2022๋…„ 6์›” 15์ผ
0

TIL : ๊ธฐ๋ก

๋ชฉ๋ก ๋ณด๊ธฐ
2/16
post-thumbnail

1. ์ •๊ทœ ํ‘œํ˜„์‹(Regular Expression)์ด๋ž€?

: ์ผ์ •ํ•œ 'ํŒจํ„ด'์„ ๊ฐ€์ง„ '๋ฌธ์ž์—ด'์˜ '์ง‘ํ•ฉ'์„ ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” 'ํ˜•์‹ ์–ธ์–ด(formal language)'

  • โ€˜regexpโ€™ ๋˜๋Š” 'regโ€™๋ผ๊ณ  ์ค„์—ฌ์„œ ์‚ฌ์šฉ
  • ๊ตฌ์„ฑ : ํŒจํ„ด(pattern) & ํ”Œ๋ž˜๊ทธ(flag)
  • ๊ธฐ๋Šฅ
    1) ๋ฌธ์ž ๊ฒ€์ƒ‰(search)
    2) ๋ฌธ์ž ์ถ”์ถœ(extract)
    3) ๋ฌธ์ž ์น˜ํ™˜(replace)
    • ๋ฐ˜๋ณต๋ฌธ๊ณผ ์กฐ๊ฑด๋ฌธ ์—†์ด ํŒจํ„ด์„ ๊ฐ€์ง„ ๋ฌธ์ž์—ด์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ๊ฒ€์ƒ‰, ์ถ”์ถœ, ์น˜ํ™˜ํ•  ์ˆ˜ ์žˆ๋‹ค.
    • E-mail ํ˜•์‹๊ฒ€์‚ฌ, Password ๊ฒ€์‚ฌ(์œ ํšจ์„ฑ ๊ฒ€์‚ฌ) ๋“ฑ์˜ ๋ณต์žกํ•œ ๋ฌธ์ž ์ผ์น˜ ๊ธฐ๋Šฅ ๋“ฑ์„ ๋น ๋ฅด๊ฒŒ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค.

2. ํŒจํ„ด๊ณผ ํ”Œ๋ž˜๊ทธ

1) ํŒจํ„ด(Pattern) :: ๐Ÿ’กํ•„์ˆ˜

: ๋ฌธ์ž์—ด์˜ ์ผ์ •ํ•œ ๊ทœ์น™์„ ํ‘œํ˜„

  • ํŒจํ„ด์€ /๋กœ ์—ด๊ณ  ๋‹ซ์œผ๋ฉฐ, ๋ฌธ์ž์—ด์˜ ๋”ฐ์˜ดํ‘œ๋Š” ์ƒ๋žตํ•œ๋‹ค.
  • ๋”ฐ์˜ดํ‘œ๋ฅผ ํฌํ•จํ•˜๋ฉด ๋”ฐ์˜ดํ‘œ๊นŒ์ง€๋„ ํŒจํ„ด์— ํฌํ•จ๋˜์–ด ๊ฒ€์ƒ‰๋œ๋‹ค.
  • ํŒจํ„ด์€ ํŠน๋ณ„ํ•œ ์˜๋ฏธ๋ฅผ ๊ฐ€์ง€๋Š” ๋ฉ”ํƒ€๋ฌธ์ž ๋˜๋Š” ๊ธฐํ˜ธ๋กœ ํ‘œํ˜„ ๊ฐ€๋Šฅ ํ•˜๋‹ค.

๐Ÿ“Œ ํŒจํ„ดํ‘œ ์ฐธ๊ณ 
์ •๊ทœํ‘œํ˜„์‹ (Regex) ์ •๋ฆฌ
[JavaScript] ์ •๊ทœ ํ‘œํ˜„์‹(RegExp) ์‚ฌ์šฉํ•˜๊ธฐ (๊ฐœ๋…ํŽธ)
โœ… ํŒจํ„ด์€ ๋ชจ๋‘ ์™ธ์šธ ์ˆ˜ ์—†์œผ๋‹ˆ ํ•„์š”ํ•  ๋•Œ ํ‘œ๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ์ž‘์„ฑ!

[์˜ˆ์ œ]

๊ฐœ๋ณ„ ์ˆซ์ž - /[0-9]/ // 0๋ถ€ํ„ฐ 9์‚ฌ์ด์˜ ์ˆซ์ž ์ฐพ๊ธฐ
๊ฐœ๋ณ„ ๋ฌธ์ž - /[to]/ // t ๋˜๋Š” o๊ฐ€ ๋“ค์–ด๊ฐ„ ๋ฌธ์ž ์ฐพ๊ธฐ
๋‹จ์–ด - /filter/ // filter๋ผ๋Š” ๋‹จ์–ด(ํ†ต์งธ๋กœ) ์ฐพ๊ธฐ
ํ•ธ๋“œํฐ ๋ฒˆํ˜ธ - /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/
/*
์ˆซ์ž 01๋กœ ์‹œ์ž‘ /
๊ทธ ํ›„์— 0,1,6,7,8,9 ์ค‘์— ํ•˜๋‚˜๊ฐ€ ์˜ฌ ์ˆ˜๋„ ์žˆ๊ณ  /
ํ•˜์ดํ”ˆ(-)์ด 1๊ฐœ ์˜ฌ ์ˆ˜๋„ ์žˆ๊ณ  / 
0๋ถ€ํ„ฐ 9์‚ฌ์ด์˜ ์ˆซ์ž๊ฐ€ 3~4๊ฐœ / 
ํ•˜์ดํ”ˆ(-)์ด 1๊ฐœ ์˜ฌ ์ˆ˜๋„ ์žˆ๊ณ  / 
0๋ถ€ํ„ฐ 9์‚ฌ์ด์˜ ์ˆซ์ž๊ฐ€ 4๊ฐœ๋กœ ๋
*/

2) ํ”Œ๋ž˜๊ทธ(Flag) :: ์„ ํƒ์‚ฌํ•ญ

: ์ •๊ทœ ํ‘œํ˜„์‹์˜ ๊ฒ€์ƒ‰ ๋ฐฉ์‹์„ ์„ค์ •

  • ์›ํ•˜๋Š” ๋ฌธ์ž ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋„๋ก ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ์ •๊ทœ ํ‘œํ˜„์‹์˜ ์˜ต์…˜์œผ๋กœ์„œ, ๊ผญ ์„ค์ •ํ•˜์ง€ ์•Š์•„๋„ ๋œ๋‹ค.
  • ํ•˜๋‚˜ ์ด์ƒ์˜ ํ”Œ๋ž˜๊ทธ๋ฅผ ๋™์‹œ์— ์„ค์ •ํ• ์ˆ˜๋„ ์žˆ๋‹ค.
  • ์ˆœ์„œ๋Š” ์ƒ๊ด€์—†๋‹ค.

g(global) ํ”Œ๋ž˜๊ทธ

: ๋ชจ๋“  ๋ฌธ์ž๋ฅผ ๊ฒ€์ƒ‰

g๊ฐ€ ์—†์œผ๋ฉด ์›๋ž˜๋Š” ์ฒ˜์Œ ๋ฐœ๊ฒฌ๋œ ๊ฒฐ๊ณผ๋งŒ ์ถœ๋ ฅ๋œ๋‹ค.
g๊ฐ€ ์žˆ์œผ๋ฉด ์žˆ๋Š” ๋ชจ๋“  ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ๋ฅผ ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

str = 'Hi wecode! I am code kim.';
const regexp1 = /code/; // we'code'
const regexp2 = /code/g; // we'code', 'code' kim

i(ignoreCase) ํ”Œ๋ž˜๊ทธ

: ์˜์–ด ๋Œ€์†Œ๋ฌธ์ž๋ฅผ ๊ตฌ๋ถ„ํ•˜์ง€ ์•Š์Œ(๋ฌด์‹œํ•จ)

i๊ฐ€ ์—†์œผ๋ฉด ์›๋ž˜๋Š” code์™€ Code๋Š” ๋‹ค๋ฅด๋‹ค. ==> ๋Œ€์†Œ๋ฌธ์ž๋ฅผ ๊ตฌ๋ถ„ํ•จ!
ig๋ฅผ ๊ฐ™์ด ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋ฉด ๋Œ€์†Œ๋ฌธ์ž ๊ตฌ๋ถ„์—†์ด ํ‘œํ˜„์‹์˜ ๋ชจ๋“  ๊ฒ€์ƒ‰๊ฒฐ๊ณผ๋ฅผ ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

m(multi line) ํ”Œ๋ž˜๊ทธ

: ๋ฌธ์ž์—ด์˜ ํ–‰์ด ๋ฐ”๋€Œ๋”๋ผ๋„ ํŒจํ„ด ๊ฒ€์ƒ‰์„ ๊ณ„์†ํ•จ

y(sticky) ํ”Œ๋ž˜๊ทธ

: lastIndex ์†์„ฑ์„ ์ด์šฉํ•ด ์›ํ•˜๋Š” ์œ„์น˜์—์„œ ๊ฒ€์ƒ‰์„ ์‹œ์ž‘

const str = "Cats love cats, and we love cats."
const regExp = /cats/igy;
exp.lastIndex = 4; // index 4 ์ดํ›„๋ถ€ํ„ฐ ๊ฒ€์ƒ‰

โฌ‡๏ธ

lastIndex๋ฅผ ์ง€์ •ํ•œ ๋’ค ํ”Œ๋ž˜๊ทธ y๋กœ ๊ฒ€์ƒ‰ํ•˜๋ฉด, ๊ทธ ์œ„์น˜์—์„œ ๊ฒ€์ƒ‰์ด ์‹œ์ž‘๋œ๋‹ค.

u(unicode) ํ”Œ๋ž˜๊ทธ

: ์œ ๋‹ˆ ์ฝ”๋“œ ๋ฌธ์ž๋ฅผ ์ฒ˜๋ฆฌ

s(single line) ํ”Œ๋ž˜๊ทธ

: ๊ฐœํ–‰(\n)์„ ๋ฌด์‹œํ•˜์—ฌ ๋‹จ์ผ ๋ผ์ธ์œผ๋กœ ์ทจ๊ธ‰

์ตœ๊ทผ์—๋Š” ๋งŽ์€ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‚ฌ์šฉ๋˜์ง€ ์•Š์Œ !

3. ์„ ์–ธ ๋ฐฉ์‹ (๋ฌธ๋ฒ•)

1) ๋ฆฌํ„ฐ๋Ÿด(Literal) ๋ฐฉ์‹

: ๊ฑฐ์˜ ๋Œ€๋ถ€๋ถ„ ๋ฆฌํ„ฐ๋Ÿด ๋ฐฉ์‹์„ ์ด์šฉํ•จ. ์ •์ ์ธ ๋ฐฉ์‹.

const regexp1 = /pattern/; // --> /ํŒจํ„ด/ (ํ”Œ๋ž˜๊ทธ โŒ)
const regexp2 = /pattern/gmi; // --> /ํŒจํ„ด/ํ”Œ๋ž˜๊ทธ (ํ”Œ๋ž˜๊ทธ g, m, i โญ•๏ธ)

2) ์ƒ์„ฑ์ž ํ•จ์ˆ˜ RegExp ๋ฐฉ์‹

: ์ƒํ™ฉ์— ๋”ฐ๋ผ '๋™์ '์œผ๋กœ ์ƒ์„ฑ๋œ ๋ฌธ์ž์—ด์„ ๊ฐ€์ง€๊ณ  ์ •๊ทœ ํ‘œํ˜„์‹์„ ๋งŒ๋“ค์–ด์•ผ ํ•  ๋•Œ ์‚ฌ์šฉ. ${...} ์ด์šฉ ๊ฐ€๋Šฅ.

const regexp1 = new RegExp("pattern", "flags");
const regexp2 = new RegExp("^abc", "gi");

let tag = prompt("์–ด๋–ค ํƒœ๊ทธ๋ฅผ ์ฐพ๊ณ  ์‹ถ๋‚˜์š”?", "h2");
let regexp = new RegExp(`<${tag}>`);
// ํ”„๋กฌํ”„ํŠธ์—์„œ "h2"๋ผ๊ณ  ๋Œ€๋‹ตํ•œ ๊ฒฝ์šฐ, /<h2>/์™€ ๋™์ผํ•œ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.

4. ์ •๊ทœ ํ‘œํ˜„์‹ ๊ด€๋ จ ๋ฉ”์†Œ๋“œ

1) ๊ฒ€์ƒ‰ : string.match()

  • ๊ฒ€์ƒ‰, ์ถ”์ถœ ๋ฉ”์†Œ๋“œ
  • str.match(regExp) == ๋ฌธ์ž์—ด str์—์„œ regExp์™€ ์ผ์น˜ํ•˜๋Š” ๊ฒฐ๊ณผ๋ฅผ ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜
  • ๋งค์นญ ๊ฒฐ๊ณผ๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ null ๋ฐ˜ํ™˜ (๋นˆ ๋ฐฐ์—ด [ ] โŒ)
  • flag 'g'์™€ ํ•จ๊ป˜ ๋งŽ์ด ์‚ฌ์šฉ
ex)
let str = "We will, we will rock you";
alert( str.match(/we/gi) ); // We, we

2) ์น˜ํ™˜ : string.replace()

  • ์น˜ํ™˜, ๋Œ€์ฒด ๋ฉ”์†Œ๋“œ
  • str.replace(regexp, replacement) == ๋ฌธ์ž์—ด str ๋‚ด regExp์— ์ผ์น˜ํ•˜๋Š” ๋ถ€๋ถ„ ๋ฌธ์ž์—ด์„ replacement๋กœ ์น˜ํ™˜
  • flag 'g' ๊ฐ€ ์žˆ๋‹ค๋ฉด, ๋ชจ๋“  ๋ถ€๋ถ„ ๋ฌธ์ž์—ด์ด ๊ต์ฒด๋˜๊ณ , ์•„๋‹ˆ๋ฉด ์ฒซ ๋ฒˆ์งธ ๋ถ€๋ถ„ ๋ฌธ์ž์—ด๋งŒ ๊ต์ฒด๋จ
ex)
let str = "We will, we will";

// ํ”Œ๋ž˜๊ทธ g ์—†์Œ
alert( str.replace(/we/i, "I") ); // I will, we will
// ํ”Œ๋ž˜๊ทธ g ์žˆ์Œ
alert( str.replace(/we/ig, "I") ); // I will, I will

3) ์ผ์น˜ ์—ฌ๋ถ€ ํ™•์ธ : regExp.test()

  • ์ผ์น˜ ์—ฌ๋ถ€ ํ™•์ธ(Boolean) ๋ฉ”์†Œ๋“œ
  • regexp.test(str) == regExp์™€ ์ผ์น˜ํ•˜๋Š” ๋ถ€๋ถ„ ๋ฌธ์ž์—ด์ด ์žˆ๋‹ค๋ฉด true, ์—†๋‹ค๋ฉด false ๋ฐ˜ํ™˜
  • if๋ฌธ์„ ํ™œ์šฉํ•ด, ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ์— ์ž์ฃผ ์“ฐ์ž„
  • ๊ด„ํ˜ธ ์•ˆ์ด ๋ฌธ์ž์—ด(str)์ž„ โญ๏ธ
ex)
let str = "I love JavaScript";
let regexp = /LOVE/i;

alert( regexp.test(str) ); // true

5. ์ž์ฃผ ์“ฐ๋Š” ์ •๊ทœํ‘œํ˜„์‹ ํŒจํ„ด

์ด๋ฉ”์ผ ํ˜•์‹ ๊ฒ€์‚ฌ

const exptext = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
    if (exptext.test(check.value) == false) {
        //์ด๋ฉ”์ผ ํ˜•์‹์ด ์•ŒํŒŒ๋ฒณ+์ˆซ์ž@์•ŒํŒŒ๋ฒณ+์ˆซ์ž.์•ŒํŒŒ๋ฒณ+์ˆซ์ž ํ˜•์‹์ด ์•„๋‹๊ฒฝ์šฐ			
        alert("์ž…๋ ฅํ•œ ๋ฉ”์ผํ˜•์‹์ด ์˜ฌ๋ฐ”๋ฅด์ง€ ์•Š์Šต๋‹ˆ๋‹ค.");
        check.focus();
        return false;
    }

ํ•ธ๋“œํฐ ๋ฒˆํ˜ธ

const regExp = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/;

ID ํ˜•์‹ ๊ฒ€์‚ฌ

//์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•œ ID๊ฐ€ ํ•œ๊ธ€์ด ํฌํ•จ๋˜์–ด ์žˆ๋Š”์ง€ Check ํ•ฉ๋‹ˆ๋‹ค.
function idCheck () {  
    // ์ž…๋ ฅํ•œ ID๋ฅผ Checkํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.
    var titleCheck = $("titleId").val;
    // ์ •๊ทœํ‘œํ˜„์‹์œผ๋กœ ํ•œ๊ธ€๋งŒ ์„ ํƒํ•˜๋„๋ก ๋งŒ๋“ญ๋‹ˆ๋‹ค.
    var languageCheck = /[ใ„ฑ-ใ…Ž|ใ…-ใ…ฃ|๊ฐ€-ํžฃ]/;
    // ์ž…๋ ฅํ•œ ID์™€ ์ •๊ทœํ‘œํ˜„์‹์„ ๋น„๊ตํ•˜์—ฌ ํ•œ๊ธ€ ์—ฌ๋ถ€๋ฅผ ํŒ๋‹จํ•ฉ๋‹ˆ๋‹ค.
    // test์™ธ์—๋„ search ,exec , match๋“ฑ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    if (languageCheck.test(titleCheck)) {
        alert("ID์— ํ•œ๊ธ€์ด ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.");
        return;
    }

๐Ÿ’ก ์ •๊ทœํ‘œํ˜„์‹ test ์‚ฌ์ดํŠธ โžช https://regexr.com

๐Ÿ“์ฐธ๊ณ ์‚ฌ์ดํŠธ
https://www.codeguage.com/courses/regexp/flags
https://valuefactory.tistory.com/151
์ •๊ทœํ‘œํ˜„์‹ (Regex) ์ •๋ฆฌ
[JavaScript] ์ •๊ทœ ํ‘œํ˜„์‹(RegExp) ์‚ฌ์šฉํ•˜๊ธฐ (๊ฐœ๋…ํŽธ)
https://ko.javascript.info/regexp-introduction

profile
Front-End Developer

0๊ฐœ์˜ ๋Œ“๊ธ€