정규표현식💡

str1.match(/\b\w{1,}\b/g)

진ㅉㅏ 단 한글자도 이해할 수 없었던 정규표현식 ..
패캠에서 제공해 준 한시간의 강의만으로 이제 조금은 이해하고 쓸 수 있게 됐다..!!

• 정규표현식, Regular Expression
• "정규식" 이라고도 함
• 문자열을 다양한 패턴으로 검색 할 수 있는 형식언어(패턴)
• 자바스크립트 뿐만 아니라 다른 프로그로밍 언어 혹은 특정한 환경에서도 사용 가능

---

🧡정규식의 구성

/표현/옵션

/abc/g // "abc"라는 문자열을 찾고자함 g(global)옵션을 설정하여 검색

• 정규식은 "표현(패턴)"과 "옵션(플래그)"를 설정
• 표현(패턴)은 찾고자 하는 문자열을 삽입
• 옵션(플래그)는 표현식에 추가적인 검색 옵션을 부여

---

🧡정규식 생성방식

💛생성자 함수

• new RegExp() 생성자 함수를 사용

  //new RegExp('표현(패턴)', '옵션')
  const regexp = new RegExp('[a-z]','gi')

💛리터럴 방식

• /로 감싸진 패턴을 리터럴로 사용

  // /표현/옵션
  const regexp = /[a-z]/gi

---

🧡정규식을 다루는 메소드

💛test

• 정규식.test(문자열)
• 정규식과 일치하는 문자열의 존재여부(boolean) 반환

  const str = "The quick brown fox jumps over the lazy dog."

  // 전체 문자열 중 "the" 를 탐색
  const regexp = /the/g

  // str변수의 전체 문자열 중 "the"를 탐색 후 일치하는 문자열의 여부를 반환
  console.log(regexp.test(str)) //true

💛match

• 문자열.match(정규식)
• 정규식과 일치하는 문자열을 배열데이터로 반환

  const str = "The quick brown fox jumps over the lazy dog."

  // 전체 문자열 중 대소문자의 구분 없이 "the" 를 탐색
  const regexp = /the/gi

  // str변수의 전체 문자열 중 "the"를 탐색 후 일치하는 문자들을 배열형태로 반환
  console.log(regexp.test(str)) // ['The', 'the']

💛replace

• 문자열.replace(정규식, 대체문자)
• 정규식과 일치하는 문자열을 찾아 대체문자로 대체 된 문자열 반환

  const str = "The quick brown fox jumps over the lazy dog."

  // 전체 문자열 중 대소문자의 구분 없이 "the" 를 탐색
  const regexp = /the/gi

  // str 변수의 전체 문자열 중 대소문자의 구분 없이 "the" 를 탐색 하여 "TTHHEE"로 재배치(replace)
  console.log(str.replace(regexp1,'TTHHEE')) //"TTHHEE quick brown fox jumps over TTHHEE lazy dog."

---

🧡정규식의 옵션(플래그)

• 표현식으로 검색하려는 문자 패턴에 추가적인 옵션을 넣어 원하는 문자 검색 결과를 반환하도록 할 수 있도록 하는 일종의 단축어
• /표현/옵션 의 정규식 패턴에서 뒤의 옵션자리에 들어가며 여러가지 옵션을 한꺼번에 넣을 수 있음
• 생략 가능

ex)
/표현/ : 아무 옵션(플래그)도 부여하지 않음
/표현/g : g 옵션(플래그)만 부여
/표현/gi : g 옵션(플래그)과 i 옵션 부여
/표현/gim : g 옵션(플래그)과 i 옵션과 m 옵션 부여

💛 g (Global)

• 일치하는 모든 문자열을 탐색
• 해당옵션을 설정하지 않으면 제일 처음으로 일치되는 문자열만 반환

  const str = "the quick brown fox jumps over the lazy dog."


  // "o" 를 탐색 ( 아무 플래그도 부여하지 않음 )
  const regexp = /o/

  // str변수에서 "o"를 탐색 후 일치하는 문자를 반환(match)
  // g 옵션을 부여하지 않아 처음으로 만나는 하나의 'o'만 반환
  console.log(regexp.match(str)) // ['o']


  // 전체 문자열 중 "o" 를 탐색 (g 플래그)
  const globalRegexp = /o/g

  // str변수의 전체 문자열 중 "o"를 탐색 후 일치하는 문자들을 배열형태로 반환(match)
  // g 옵션을 부여하여 해당 문자열의 모든 "o" 반환
  console.log(globalRegexp.match(str)) // ['o','o','o','o']

💛 i (Ignore case)

• 영어의 대소문자를 구분하지 않도록 함

const str = "The quick brown fox jumps over the lazy dog."


// 전체 문자열 중(g) "the" 를 탐색 
const regexp = /the/g
console.log(regexp.match(str)) // ['the']


// 전체 문자열 중(g) 대소문자를 구분하지 않고(i) "the" 를 탐색 
const ignoreRegexp = /the/gi
console.log(ignoreRegexp.match(str)) // ['The','the']

💛 m (Multi line)

• 하나의 문자열에서 줄바꿈이 일어나는 경우 줄단위로 문자열을 나누어 인식

const str = `The quick brown fox jumps over the lazy dog
  My faxed joke won a pager in the cable TV quiz show
  Sphinx of black quartz, judge my vow`

// 전체 문자열 중 "w"로 끝나는 문자열의 "w"를 반환
// m플래그를 부여하지 않으면 전체 문자열을 하나의 문자열로 인식하여 'w'로 끝나는 문자열이 하나라고 판단
console.log(str.match(/w$/g)) //['w']

// 전체 문자열 중 "w"로 끝나는 문자열의 "w"를 반환
// m플래그를 부여하여 줄단위로 문자열을 나누어 인식. 'w'로 끝나는 문자열을 모두 찾음
console.log(str.match(/w$/gm)) //['w', 'w']

---

🧡정규식의 표현(패턴)

다양한 특수기호와 패턴을 통해 문자열을 검색하는 방식 (일치패턴)을 지정 할 수 있다

💛 ^ab

• 줄(Line) 시작에 있는 'ab'와 일치

const str = `The quick brown fox jumps over the lazy dog
  My faxed joke won a pager in the cable TV quiz show
  Sphinx of black quartz, judge my vow`

// 'the'로 시작하는 문자열 탐색
console.log(str.match(/^the/gim)) // ['The']

// ^표현식 없이 검색 시 모든 'the' 탐색
console.log(str.match(/the/gim)) // ['The','the','the']

💛 ab$

• 줄(Line) 끝에 있는 'ab'와 일치

const str = `The quick brown fox jumps over the lazy dog
  My faxed joke won a pager in the cable TV quiz show
  Sphinx of black quartz, judge my vow`

// 'the'로 시작하는 문자열 탐색
console.log(str.match(/^the/gim)) // ["The"]

💛 a|b

• 'a' 또는 'b'

const str = "The quick brown fox jumps over the lazy dog."

// 'fox'또는 'dog' 모두 탐색
console.log(str.match(/fox|dog/g)) //['fox', 'dog']

💛 ab?

• 'b'가 없거나 'b'와 일치

const str = `
https://fastcampus.app/
http://localhost:1234/
`

// 's'뒤에 ?표현식을 붙여 's'가 있거나 없는 'http'를 탐색
console.log(str.match(/https?/g)) //['https', 'http']

💛 .

• 모든 문자 일치
• 임의의 한 문자와 일치

const str = "The quick brown fox"

// . : 띄어쓰기를 포함 한 모든 문자열 탐색
console.log(str.match(/./g)) 
// ['T', 'h', 'e', ' ', 'q', 'u', 'i', 'c', 'k', ' ', 'b', 'r', 'o', 'w', 'n', ' ', 'f', 'o', 'x']

//아래와 같이 중간문자를 정확히 알 수 없을 때 사용 할 수 있음
console.log(str.match(/b...n/g)) //['brown']
console.log(str.match(/f../g)) //['fox']
console.log(str.match(/.he/g)) //['The']

💛 +

• 1개 이상 연속 일치

const str = "abc1212@naver.com"

// \w+ : 63개 문자와 일치하는 임의의 문자가 1개이상 연속됨.
console.log(str.match(/\w+/g)) //[abc1212, naver, com]

💛 {2}

• 2개 연속 일치

const str = 'xxxx'

// 'x'가 2번 연속으로 일치하는 문자 탐색
console.log(str.match(/x{2}/g)) //['xx', 'xx']

💛 {2,}

• 2개 이상 연속 일치
• 두번째 요소 (최댓값)을 비워둠으로써 최댓값을 제한하지 않음

const str = 'xxxx'

// 'x'가 2번 이상 연속으로 일치하는 문자 탐색
console.log(str.match(/x{2,}/g)) //['xxxx']

💛 {2,3}

• 2개 이상 3개 이하 연속 일치

const str = 'xxxx'

// 'x'가 2번이상 3번 이하 연속으로 일치하는 문자 탐색
console.log(str.match(/x{2,3}/g)) //['xxx']

💛 +

• 가능한 많은 횟수 연속 일치

const str = 'abc1212@naver.com'

// 이메일 탐색 정규식
// .+ : 길이,문자 상관없이 모든 문자 일치 (아이디)
// @
// .+ : 길이,문자 상관없이 모든 문자 일치 (이메일주소값)
// \. : .
// .{2,} : 2자리 이상 연속되는 임의의 문자 (com, net 등)

console.log(str.match(/.+@.+\..{2,}/gm)) //abc1212@naver.com

💛 [abc]

• a 또는 b 또는 c

const str = "The quick brown fox jumps over the lazy dog."

// [fox] : 'f' 또는 'o' 또는 'x' 모두 탐색
console.log(str.match(/[fox]/g)) //['o', 'f', 'o', 'x', 'o', 'o']

💛 [a-z]

• a부터 z 사이의 문자구간에 일치(소문자)

const str = 'http://localhost:1234/'

// a-z 사이의 모든 알파벳 탐색 (소문자)
console.log(str.match(/[a-z]/g)) // ['h', 't', 't', 'p', 'l', 'o', 'c', 'a', 'l', 'h', 'o', 's', 't']

💛 [A-Z]

• A부터 Z 사이의 문자구간에 일치(대문자)

const str = 'Hello World!'

// A-Z 사이의 모든 알파벳 탐색 (대문자)
console.log(str.match(/[A-Z]/g)) // ['H', 'W']

💛 [0-9] , \d

(\ : 백슬래시 기호입니다)

• [0-9] : 0부터 9 사이의 숫자구간에 일치(숫자)
• \d : 숫자에 일치(Digit)

const str = '010-1234-5678'

//1글자 이상 연속되는({1, }) 0-9사이의 숫자
console.log(str.match(/[0-9]{1,}/g)) //['010', '1234', '5678']
console.log(str.match(/\d{1,}/g)) //['010', '1234', '5678']

💛 [가-힣]

• 가 부터 힣 사이의 문자구간에 일치(한글)

const str = '동해물과 백두산이 마르고 닳도록'

//1글자 이상 연속되는({1, }) [가-힣]사이의 문자(한글)
console.log(str.match(/[가-힣]{1,}/g)) // ['동해물과', '백두산이', '마르고', '닳도록']

💛 \w , \b

(\ : 백슬래시 기호입니다)

• \w : 63개 문자(대소영문52개, 숫자10개, _(underbar))에 일치 (Word)
• \b : 63개 문자에 일치하지 않는 문자경계 (Boundary)

/*
\b 로 63개 문자에 해당하지 않는 문자 (띄어쓰기, 특수문자 등) 를 앞 뒤로 덧대고,
\w{1,} 로 1글자 이상 연속되는 모든 문자열을 탐색하면 아래와 같이
단어 단위, 혹은 묶음단위(?)의 문자 추출 가능
*/

const phone = '010-1234-5678'
const mail = 'www.google.com'
const str = 'The quick brown fox jumps over the lazy dog'

//연속되는 문자
console.log(phone.match(/\b\w{1,}\b/g)) //['010', '1234', '5678']
console.log(mail.match(/\b\w{1,}\b/g)) //['www', 'google', 'com']
console.log(str.match(/\b\w{1,}\b/g)) //['The', 'quick', 'brown', 'fox', 'jumps', 'over', 'the', 'lazy', 'dog']

//t로 시작하는 연속되는 문자
console.log(str.match(/\bt\w{1,}\b/gi)) //['The', 'the']

💛 \s

(\ : 백슬래시 기호입니다)

• 공백에 일치 (Space, tap등)

const str = `   hello    
  world   !     `;

//replace() 를 활용하여 모든 공백을 "" (빈문자열) 로 재배치
console.log(str.replace(/\s/g,"")) //'helloworld!'

💛 문자(?=a)

• a 의 앞쪽에 위치하는 문자열 탐색

const mail = 'abc123@gmail.com'

// @ 앞에오는 1글자이상의 모든 문자 (이메일에서 아이디 추출)
console.log(mail.match(/.{1,}(?=@)/g)) //['abc123']

💛 (?<=a)문자

• a 뒤쪽에 위치하는 문자열 탐색

const mail = 'abc123@gmail.com'

// @ 뒤에오는 1글자이상의 모든 문자
console.log(mail.match(/(?<=@).{1,}/g)) //['gmail.com']

---

마치며🙌

항상 어디선가 정규식 표현이 보이면 머리붙잡고 으아.. 하며 피하기 바빴는데 또 이렇게 차근차근 파헤쳐보니 눈에 익기만 하면 생각보다 어렵지 않을 것 같고 또 나름 편하고 유용하게 사용할 수 있겠구나 싶었다

꼭 한번쯤 공부를 해야겠다 생각은 하고 있었지만 너무 어려워보여서 엄두도 못내고 있었는데 패캠에서 눈앞에 이렇게 떡하니 강의를 가져다 놓아 준 덕분에 이렇게 또 공부가 되었다!!
어려워 보인다고 겁만내면 정말 되는게 없으며,, 막상 부딪히면 별 거 아닌것들이 대부분인것을 또한번 느낀다!! 내가 이렇게 컴퓨터앞에서 개발공부를 하고있을거라곤 일년전만 해도 꿈도 못꾸던 일인데 어떻게든 부딪혀보니 지금 이렇게 어떻게든 하고있는것 처럼!!