Front End/JavaScript

정규표현식

정규표현식(정규식, 正規式)

정규표현식은 문자열에서 특정한 규칙에 따른 문자열 집합을 표현하기 위해 사용되는 형식 언어이다. 특정한 규칙을 갖는 문자열로 이루어진 표현식이며, 정규표현식에서 특수 문자는 각각의 고유한 규칙을 갖고 있다. 이러한 규칙을 조합해 원하는 패턴을 만들고, 특정 문자열에서 해당 패턴과 대응하는 문자를 찾을 수 있다.

정규표현식 사용하기

정규식 표현은 두 가지 방법으로 사용할 수 있다.

  • 리터럴 패턴

    정규표현식 규칙을 슬래시(/)로 감싸 사용한다. 슬래시 안에 들어올 문자열이 찾고자 하는 문자열이며, 컴퓨터에게 슬래시 사이에 있는 문자열을 찾는다고 명령을 내리는 것이다.

  • 생성자 함수 호출 패턴

    RegExp 객체의 생성자 함수를 호출하여 사용한다. new RegExp()

정규식 패턴(표현식)

정규표현식에서 다양한 특수기호를 함께 사용하면 문자열을 다룰 때 더 많은 옵션을 설정할 수 있다.

Anchors : ^ and $

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

"coding is fun".match(/^co/); // ['co']
"coding is fun".match(/^fun/); // 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번 이상 나타나는 경우를 검색한다. 아래의 예시 코드는 od가 들어가면서 그 뒤에 e가 0번 이상 포함된 모든 문자열을 리턴한다.

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

    +*와 같은 방식으로 동작하지만 바로 앞의 문자가 1번 이상 나타나는 경우를 검색한다.

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

    위의 경우와 비슷하게 동작하지만, 앞의 문자가 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"]
  • {}

    {}*, +, ?의 확장판으로, 직접 숫자를 넣어서 연속되는 개수를 설정할 수 있다.

    "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 or b or c 를 검색한다. or(|) Operator 로 작성한 a|b|c 와 동일하게 작동한다.
[a-c] // [abc] 와 동일하다. - 로 검색 구간을 설정할 수 있다.

"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는 digit을 의미하며, 숫자 하나를 검색한다. [0-9]와 동일.
    • \D는 not digit을 의미해 숫자가 아닌 문자 하나를 검색한다. [^0-9]와 동일.
    "abc34".match(/\d/); // ["3"]
    "abc34".match(/[0-9]/) // ["3"]
    "abc34".match(/\d/g); // ["3", "4"]
    "abc34".match(/[0-9]/g) // ["3", "4"]
    "abc34".match(/\D/); // ["a"]
    "abc34".match(/[^0-9]/); // ["a"]
    "abc34".match(/\D/g); // ["a", "b", "c"]
    "abc34".match(/[^0-9]/g); // ["a", "b", "c"]
  • \w\W
    • \w는 알파벳 대소문자, 숫자, _ 중 하나를 검색한다. [a-zA-Z0-9_]와 동일.
    • \W는 반대로 알파벳 대소문자, 숫자, _가 아닌 문자 하나를 검색한다. [^a-zA-Z0-9_]와 동일.
    "ab3_@A.Kr".match(/\w/); //["a"]
    "ab3_@A.Kr".match(/[a-zA-Z0-9_]/) // ["a"]
    "ab3_@A.Kr".match(/\w/g); //["a", "b", "3", "_", "A", "K", "r"]
    "ab3_@A.Kr".match(/[a-zA-Z0-9_]/g) // ["a", "b", "3", "_", "A", "K", "r"]
    
    "ab3_@A.Kr".match(/\W/); // ["@"]
    "ab3_@A.Kr".match(/[^a-zA-Z0-9_]/); // ["@"]
    "ab3_@A.Kr".match(/\W/g); // ["@", "."]
    "ab3_@A.Kr".match(/[^a-zA-Z0-9_]/g); // ["@", "."]

Grouping and Capturing

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

이외의 다양한 정규식 표현

정규식 패턴설명
^줄(Line)의 시작에서 일치 /^abc/
$줄(Line)의 끝에서 일치 /xyz$/
.(특수기호, 띄어쓰기를 포함한) 임의의 한 문자
a|ba or b 와 일치, 인덱스가 작은 것을 우선 반환
*0회 이상 연속으로 반복되는 문자와 가능한 많이 일치. {0,} 와 동일
*?0회 이상 연속으로 반복되는 문자와 가능한 적게 일치. {0} 와 동일
+1회 이상 연속으로 반복되는 문자와 가능한 많이 일치. {1,} 와 동일
+?1회 이상 연속으로 반복되는 문자와 가능한 적게 일치. {1} 와 동일
{3}숫자 3개 연속 일치
{3,}3개 이상 연속 일치
{3, 5}3개 이상 5개 이하 연속 일치
()캡쳐(capture)할 그룹
[a-z]a부터 z 사이의 문자 구간에 일치(영어 소문자)
[A-Z]A부터 Z 사이의 문자 구간에 일치(영어 대문자)
[0-9]0부터 9 사이의 문자 구간에 일치(숫자)
\(역슬래쉬)escape 문자. 특수 기호 앞에 \를 붙이면 정규식 패턴이 아닌, 기호 자체로 인식
\d숫자를 검색함. /[0-9]/와 동일
\D숫자가 아닌 문자를 검색함. /[^0-9]/와 동일
\w영어대소문자, 숫자, (underscore)를 검색함. /[A-Za-z0-9]/ 와 동일
\W영어대소문자, 숫자, (underscore)가 아닌 문자를 검색함. /[^A-Za-z0-9]/ 와 동일
[^][]안의 문자열 앞에 ^이 쓰이면, []안에 없는 문자를 검색함

정규표현식 내장 메서드

  • RegExp 객체의 메서드
    • exec()

      execution의 줄임말로, 원하는 정보를 뽑아내고자 할 때 사용한다. 검색의 대상이 찾고자 하는 문자열에 대한 정보를 가지고 있다면 이를 배열로 반환하며, 없다면 null을 반환한다.

      let pattern = /c/; // 찾고자 하는 문자열
      pattern.exec('codestates') // 검색하려는 대상을 exec 메소드의 첫 번째 인자로 전달
      
      // 즉, 'codestates' 가 'c' 를 포함하고 있는지를 확인한다.
      // 이 경우 'c' 가 포함되어 있으므로, ['c'] 를 반환한다.
    • test()

      찾고자 하는 문자열이 대상 안에 있는지의 여부를 boolean으로 리턴한다.

      let pattern = /c/;
      pattern.test('codestates');
      // 이 경우는 'codestates'가 'c'를 포함하고 있으므로 true 를 리턴한다.
  • String 객체의 메서드
    • match()

      RegExp.exec()와 비슷한 기능을 하여, 정규표현식을 인자로 받아 주어진 문자열과 일치된 결과를 배열로 반환한다. 없다면 null을 리턴한다.

      let pattern = /c/;
      let str = 'codestates';
      str.match(pattern);
      // str 안에 pattern 이 포함되어 있으므로, ['c'] 를 반환한다.
    • replace()

      검색 후 바꾸기를 수행한다. 첫 번째 인자는 정규표현식을 받고, 두 번째 인자로는 치환하려는 문자열을 받는다. 문자열에서 찾고자 하는 대상을 검색해 치환하려는 문자열로 변경하여 그 값을 리턴한다.

      let pattern = /c/;
      let str = 'codestates';
      str.replace(pattern, 'C');
      // str 안에서 pattern 을 검색한 후 'C' 로 변경하여 그 결과를 리턴한다.
      // 여기서는 'Codestates'가 반환
    • search()

      정규표현식을 인자로 받아 가장 처음 매칭되는 문자열의 index를 반환한다. 매칭되는 문자열이 없으면 -1을 반환한다.

      "JavaScript".search(/script/); // -1 대소문자를 구분합니다
      "JavaScript".search(/Script/); // 4
      "codestates".search(/ode/); // 1

flag(플래그)

정규표현식은 추가적인 검색 옵션을 플래그로 설정할 수 있다. 이 플래그들은 각자 혹은 함께 사용하는 것이 모두 가능하며 순서에 구분이 없다.

  • i

    대소문자를 구분하지 않는다.

    let withi = /c/i;
    let withouti = /c/;
    "Codestates".match(withi); // ['C']
    "Codestates".match(withouti); // null
  • g

    모든 검색결과를 리턴한다.

    let withg = /c/g;
    let withoutg = /c/;
    "coolcodestates".match(withg); // ['c', 'c']
    "coolcodestates".match(withoutg); // ['c'] g 가 없으면 첫 번째 검색 결과만 반환
  • m

    다중행을 검색한다.

    let str = `1st : cool
    2nd : code
    3rd : states`;
    str.match(/c/gm)
    // 3개의 행을 검색하여 모든 c 를 반환
    // ['c', 'c']
    str.match(/c/m)
    // m은 다중행을 검색하게 해 주지만, g 를 빼고 검색하면 
    // 검색 대상을 찾는 순간 검색을 멈추기 때문에 첫 행의 ['c'] 만 리턴


Uploaded by N2T