JavaScript: 정규표현식 Ep.3 (패턴(표현))

19 Oct 2022 • TIL

패턴(표현)

변수 str

const str = `
010-1234-5678
thesoha@gmail.com
https://soi-ha.github.io/
The quick brown fox jumps over the lazy dog.
abbcccdddd
`

  • ^ab

    ^가 앞에 붙어 있으면 줄(Line) 시작에 있는 ab와 일치한다.

    • 줄의 시작에 t 찾기

      모든(m)줄의 시작에서 t를 찾는다. 단, 소문자 t만 찾아지고 대문자T는 찾아지지 않는다.

      console.log(
  str.match(/^t/gm)
) // ['t']

    • 대소문자 구분 없이 t찾기 대소문자 구분을 없애기 위해 i를 추가한다.

      console.log(
  str.match(/^t/gmi)
) // ['t','T']

  • ab$

    $가 뒤에 붙어 있으면 줄(Line) 끝에 있는 ab와 일치한다.

    • 줄의 끝부분에 d 찾기

      하나의 줄의 끝 부분에 ‘d’라는 글자와 일치한다. 그런데 맨 끝부분은 현재 ‘만 존재할 뿐 어떠한 문자나 d가 존재하지 않기 때문에 결과값으로 null이 나오게 된다.

      console.log(
  str.match(/d$/g)
) // null

    • 다섯번째 줄의 끝부분 d 찾기

      모든 줄의 끝부분에 d를 찾는다.
      현재 다섯번째줄 끝에만 d가 존재하기 때문에 d가 하나만 출력된다.

      console.log(
  str.match(/d$/gm)
) // ['d']

  • . (마침표)

    임의의 하나의 문자와 일치한다.
    만약에 마침표를 그냥 사용하고 싶다면, \.사용해야 한다. 그냥 마침표를 사용하면 패턴으로 사용되기 때문이다.

    • 모든 문자와 일치하기

      문자, 기호, 띄어쓰기 등 모든걸 포함한다.

      console.log(
  str.match(/./g)
)
// (109) ['0', '1', '0', '-', '1', '2', '3', '4', '-', '5', '6', '7', '8', 't', 
// 'h', 'e', 's', 'o', 'h', 'a', '@', 'g', 'm', 'a', 'i', 'l', '.', 'c', 'o', 'm', 
// 'h', 't', 't', 'p', 's', ':', '/', '/', 's', 'o', 'i', '-', 'h', 'a', '.', 'g',
// 'i', 't', 'h', 'u', 'b', '.', 'i', 'o', '/', 'T', 'h', 'e', ' ', 'q', 'u', 'i',
// 'c', 'k', ' ', 'b', 'r', 'o', 'w', 'n', ' ', 'f', 'o', 'x', ' ', 'j', 'u', 'm',
// 'p', 's', ' ', 'o', 'v', 'e', 'r', ' ', 't', 'h', 'e', ' ', 'l', 'a', 'z', 'y',
// ' ', 'd', 'o', 'g', '.', 'a', …]

    • .을 이용해서 단어 찾기

      첫번째 단어로는 h를 찾고 두,세번째 단어에는 어떤게 오든 상관이 없으며 마지막 네번째 단어로 p가 오는 단어를 찾게된다.

      console.log(
  str.match(/http/g)
)
// ['http']
    
console.log(
  str.match(/h..p/g)
)
// ['http']

  • a|b

    a 또는 b와 일치한다.

    • fox와 dog 문자 찾기

      fox와 dog의 찾는 순서를 변경해도 출력 결과는 동일하다. 둘중에 먼저 찾아지는 것을 출력해서 보내주기 때문이다.

        console.log(
    str.match(/fox|dog/g)
  )
  // (2) ['fox', 'dog']

  • ab?

    ?가 있는 바로 앞의 문자 b가 있거나 없거도 b와 일치한다.

    const str = `
010-1234-5678
thesoha@gmail.com
https://soi-ha.github.io/
The quick brown fox jumps over the lazy dog.
abbcccdddd
http://localhost:1234
`

    • http, https 모두 출력하기

      그냥 https를 넣어서 검색하면 https만 출력된다.
      하지만, 그 뒤에 ?를 추가해주면 https 뿐 아니라 http도 같이 출력되는 것을 볼 수 있다. 물음표 바로 앞의 문자 하나가 없어도 동일하다고 보기 때문에 http도 출력되는 것이다.

        console.log(
    str.match(/https/g)
  )
  // ['https']
      
  console.log(
    str.match(/https?/g)
  )
  // (2) ['https', 'http']

  • {3}

    3개(안에 들어있는 숫자만큼) 연속 일치한다.

    • d 찾기 
      console.log(
  str.match(/d/)
)
// ['d', index: 99, ...]
    • d가 두번 반복되는 문자 찾기 
      console.log(
  str.match(/d{2}/)
)
// ['dd', index: 110, ...]
    • d가 두번 반복되는 문자 모두 찾기 
      console.log(
  str.match(/d{2}/g)
)
// (2) ['dd', 'dd']

  • {3,}

    3개(안에 들어있는 숫자) 이상 연속 일치한다.

    • d가 두개 이상 연속된 문자 찾기 
      console.log(
  str.match(/d{2,}/g)
)
// ['dddd']

  • {3,5}

    3개(첫번째 숫자) 이상 5개(두번째 숫자) 이하(3~5개) 연속 일치한다.

    • d가 2개 이상 3개 이하 연속된 문자 찾기 
      console.log(
  str.match(/d{2,3}/g)
)
// ['ddd']

    • 숫자를 포함한 w가 2번이상 3번이하 연속되는 문자 찾기

      \w는 숫자,알파벳(대,소문자) 모두를 포함하는 것을 의미한다. (기호는 미포함)

      console.log(
  str.match(/\w{2,3}/g)
)
// (35) ['010', '123', '567', 'the', 'soh', 'gma', 
// 'il', 'com', 'htt', 'ps', 'soi', 'ha', 'git', 'hub', 
// 'io', 'The', 'qui', 'ck', 'bro', 'wn', 'fox', 'jum', 
// 'ps', 'ove', 'the', 'laz', 'dog', 'abb', 'ccc', 'ddd', 
// 'htt', 'loc', 'alh', 'ost', '123']

    • 숫자를 포함한 영어 알파벳이 2개 이상 3개 이하인 단어 찾기

      처음과 끝에 /b는 경계를 표현한다.
      알파벳과 숫자가 2개 이상 3개 이하인 부분을 찾는데 앞뒤로 알파벳과 숫자가 아닌 것에는 경계를 만든다.

      console.log(
  str.match(/\w{2,3}/g)
)
// (9) ['010', 'com', 'soi', 'ha', 'io', 'The', 'fox', 'the', 'dog']

  • [abc]

    안에 들어있는 글자들이 각각 또는 개념으로 나눠져 있다.
    a 또는 b 또는 c를 찾을 수 있다.

    • 모든 f 또는 o 또는 x 찾기 
      console.log(
  str.match(/[fox]/g)
)
// (12) ['o', 'o', 'o', 'o', 'o', 'f', 'o', 'x', 'o', 'o', 'o', 'o']

  • [a-z]

    a부터 z 사이의 모든 문자 구간에 있는 내용들이 일치한다. (영어 소문자)
    a 또는 b 또는 c 또는 … 또는 z를 찾을 수 있다.

  • [A-Z]

    A부터 Z 사이의 모든 문자 구간에 있는 내용들이 일치한다. (영어 대문자)
    A 또는 b 또는 C 또는 … 또는 Z를 찾을 수 있다.

  • [0-9]

    0부터 9 사이의 모든 문자 구간에 있는 내용이 일치한다. (숫자)
    0 또는 1 또는 2 또는 … 또는 9를 찾을 수 있다.

    • 0 또는 1 또는 … 0 찾기 
      console.log(
  str.match(/[0-9]/g)
)
// (15) ['0', '1', '0', '1', '2', '3', '4', '5', '6', '7', '8', '1', '2', '3', '4']

    • 숫자 하나 이상이면서 0 또는 ~ 9 찾기

      즉, 연속된 숫자 모두 찾기이다.

      console.log(
  str.match(/[0-9]{1,}/g)
)
// (4) ['010', '1234', '5678', '1234']

  • [가-힣]

    가부터 힣 사이의 모든 문자 구간에 있는 내용이 일치한다. (한글)
    가 또는 나 또는 다 또는 … 또는 힣를 찾을 수 있다.

    const str = `
010-1234-5678
thesoha@gmail.com
https://soi-ha.github.io/
The quick brown fox jumps over the lazy dog.
abbcccdddd
동해물과 백두산이 마르고 닳도록
`
    • 가부터 힣까지 하나 이상 연속된 문자 찾기 
      console.log(
  str.match(/[가-힣]{1,}/g)
)
// ) ['동해물과', '백두산이', '마르고', '닳도록']

변수 str

const str = `
010-1234-5678
thesoha@gmail.com
https://soi-ha.github.io/
The quick brown fox jumps over the lazy dog.
abbcccdddd
동해물과_백두산이 마르고 닳도록
`

  • \w

    63개 문자 (Word, 대소영문52개 + 숫자10개 + _)에 일치한다.

    console.log(
  str.match(/\w/g)
)
// (107) ['0', '1', '0', '1', '2', '3', '4', '5', '6', '7', ... ]

  • \b

    63개 문자에 일치하지 않는 문자 경계 (Boundary)를 구분한다.

    문자와 문자 사이의 경계는 구분하지 않고 띄어쓰기를 진행한 경계와 문장(줄)이 처음 시작할때의 앞 경계. 즉, 단어의 앞뒤 경계를 구분한다.

    • \b 만 썼을 때 
      console.log(
  str.match(/\b/g)
)
// (50) ['', '', '', '', '', '', ... ]

    • \b 활용하기

      경계에서 시작해서 f 알파벳으로 시작하고 그외에 63개의 문자가 하나 이상 오며 경계로 끝나는 모든 문자를 찾는다. 즉, f로 시작하는 모든 영단어를 찾는 것이다.

      console.log(
  str.match(/\bf\w{1,}\b/g)
)
// ['fox']

  • \d

    모든 숫자(Digit)에 일치한다.

    • 모든 숫자에 일치시키기

      하나의 숫자만 모두 출력된다.

      console.log(
  str.match(/\d/g)
)
// (15) ['0', '1', '0', '1', '2', '3', '4', '5', '6', '7', '8', '1', '2', '3', '4']

    • 숫자 덩어리 출력하기

      console.log(
  str.match(/\d{1,}/g)
)
// (4) ['010', '1234', '5678', '1234']

  • \s

    공백(Space, Tab 등)문자에 일치한다.

    • 모든 공백 출력하기

      줄바꿈 (\n)과 띄어쓰기를 모두 포함한다.

      console.log(
  str.match(/\s/g)
)
// (18) ['\n', '\n', '\n', '\n', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', '\n', '\n', '\n', ' ', ' ', '\n']

    • 띄어쓰기 없애기

      match 대신에 replace를 사용하고 공백(\s)부분을 ‘’(공백없음)으로 대체하여 출력한다.

      const h = `   the hello  world   !     
`
    
console.log(
  h.replace(/\s/g, '')
)
// thehelloworld!

변수 str

const str = `
010-1234-5678
thesoha@gmail.com
https://soi-ha.github.io/
The quick brown fox jumps over the lazy dog.
abbcccdddd
`

  • (?=)

    앞쪽 일치 (Lookahead)이다.

    • 원하는 문자의 앞쪽의 내용 출력하기

      앞쪽일치 뒤쪽에 찾고자 하는 문자(@)를 입력해준다.
      그리고 앞쪽 일치 앞쪽의 문자들을 연속적으로 일치시켜줘야 하기 때문에 마침표를 추가하고 그 뒤에 한개 이상 연속으로 출력하기 위해 {1,}를 추가해준다.

      console.log(
  str.match(/.{1,}(?=@)/g)
)
// ['thesoha']

  • (?<=)

    뒤쪽 일치 (Lookbehind)이다.

    • 뒤쪽일치가 제대로 되지 않은 예시 
      console.log(
  str.match(/.{1,}(?<=@)/g)
)
// ['thesoha@']

    • 올바르게 출력된 뒤쪽일치

      뒤쪽일치 패턴을 원하는 방식으로 나오게 하려면 뒤쪽에 대한 내용들을 뒤쪽일치 패턴 뒤에 작성해줘야 한다.

      console.log(
  str.match(/(?<=@).{1,}/g)
)
// ['gmail.com']
 TIL  JS

Comments

Related Posts