JavaScript: 정규표현식 Ep.1 (정규식 생성)

28 Sep 2022 • TIL

정규식 생성

정규표현식 (Regular Expression) 문자열을 검색하고 대체하는데 사용 가능한 일종의 형식언어(패턴)이다.
간단한 문자 검색부터 이메일, 패스워드 검사 등의 복잡한 문자 일치 기능등을 정규식 패턴으로 빠르게 수행할 수 있다.
정규표현식은 자바스크립트에서만 사용할 수 있는 것이 아니기에 다른 프로그래밍 언어나 특정한 환경에서도 사용할 수 있다.
주의해야 할 점은, 자바스크립트에서는 동작하지만 다른 언어나 환경에서는 동작하지 않을 수도 있다. 반대로 다른 프로그래밍 언어에서는 동작을 하는데 자바스크립트 환경에서는 동작하지 않는 내용이 있을 수도 있다.

정규표현식 역할

  • 문자 검색 (search)
  • 문자 대체 (replace)
  • 문자 추출 (extract)

정규표현식 테스트 사이트
해당 사이트를 이용하여 정규표현식을 빠르게 테스트할 수 있다.
regex101
regexr
regexper

자바스크립트 정규식(=정규표현식) 생성

  • 생성자 함수 방식

    new라는 키워드와 함께 전역에서 사용할 수 있는 전역개체로 RegExp라는 객체를 제공한다.
    해당 객체를 생성자함수로 만들면 정규표현식을 생성할 수 있다.
    이렇게 생성된 결과를 특정한 변수에 받아서 활용할 수 있다.

    첫번째 인수, 특정한 표현의 패턴
    두번째 인수, 해당 패턴을 어떤 방식으로 검색할 것인지에 대한 옵션

    new RegExp('표현', '옵션')
new RegExp('[a-z]', 'gi')

  • 리터럴 방식

    생성자 함수 방식은 패턴부분을 따옴표로 묶어서 문자데이터로 인수를 넣어서 사용했지만 리터럴 방식은 패턴부분 양옆에 /(슬래쉬)기호를 붙여서 작성한다.

    /표현/옵션
/[a-z]/gi

두 정규식 생성 비교 실습

const str = `
010-1234-5678
thesoha@gmail.com
https://soi-ha.github.io/
The quick brown fox jumps over the lazy dog.
abbcccdddd
`
  • 실습 - 생성자 함수 방식
    • the라는 문자 검색하기 
      const regexp = new RegExp('the','')
console.log(str.match(regexp))

      첫번째 인수에 검색하고자 하는 문자, the를 입력한다.
      검색하고자 하는 변수 str에 match라는 메소드를 사용해서 첫번째 인수로 생성자함수를 통해서 생성된 인스턴스가 담겨져 있는 변수(regexp)를 넣는다.

      0: "the"
groups: undefined
index: 87
input: "\n010-1234-5678\nsoha@gmail.com\nhttps://soi-ha.github.io/\nThe quick brown fox jumps over the lazy dog.\nabbcccdddd\n"
length: 1

      인덱스가 0번인 데이터를 확인하면 정규표현식의 패턴으로 입력한 단어(the)가 보인다.
      input 부분에는 검색하려 했던 변수 str의 내용이 들어가 있다.

      str이라는 input부분에 입력된 문장에서 the라는 단어를 찾아서 배열데이터로 만들어 주는데 기본적으로는 제일 처음에 찾아진 the라는 단어만 배열로 만들어준다.

    • 모든 the 문자 검색하기 
      const regexp = new RegExp('the','g')
console.log(str.match(regexp))

      두번째 인수에 g라는 옵션(플래그)을 추가해준다.
      g는 검색하고자 하는 모든 문자열을 불러온다.
      옵션을 플래그라고도 부른다.

      (2) ['the', 'the']
0: "the"
1: "the"
length: 2
    • 대소문자 상관없이 모든 the 문자 검색하기 
      const regexp = new RegExp('the','gi')
console.log(str.match(regexp))

      두번째 인수에 g와i라는 옵션(플래그)을 추가해준다.
      i는 대소문자 모두를 검색한다.

      (3) ['the', 'The', 'the']
0: "the"
1: "The"
2: "the"
length: 3
  • 실습 - 리터럴 방식 
    const regexp = /the/gi
console.log(str.match(regexp))

    슬래쉬 사이에 검색하고자 하는 문자를 입력하고 슬래쉬 뒤에는 원하는 옵션을 작성한다.

    (3) ['the', 'The', 'the']
0: "the"
1: "The"
2: "the"
length: 3

    검색 결과는 생성자함수 방식과 동일하게 나온다.
    리터럴 방식이 생성자함수보다 더 간결하게 검색할 수 있어서 앞으로는 주로 리터럴방식을 통해서 정규표현식을 사용한다.

 TIL  JS

Comments

Related Posts