[🌳javascript]정규표현식

정규식

용도

문자열에서 특정 내용을 찾거나, 대체, 추출하는 용도로 사용하는 패턴.
대표적으로 사용자가 입력한 이메일, 휴대폰 번호 등이 올바른지 검증하고 싶을 때 사용한다.

문자열에서 특정 내용을 찾기 위해선 .includes()을 사용할 수도 있는데

'abc'.includes('a') //true
'가나다'.includes('라') //false

그러나 includes()만으로는 문자 내에 '한글이라는 형식이 포함되어 있어?','숫자'가 있어? a로 시작하는 문자가 있어? 같은 건 검사할 수 없다.

정규식 생성

• 생성자
  new RegExp('표현', '옵션')
new RegExp('[a-z]', 'gi')
• 리터럴
  /표현/옵션
/[a-z]/gi
  

메소드

• test : 일치여부(true/false) 반환
  정규식.test(문자열)
• match : 일치하는 문자의 배열 반환
  문자열.match(정규식)
• replace: 일치하는 문자를 대체
  문자열.replace(정규식, 대체문자)

const str='우리 스터디7조 짱이다'
const regexp=/짱이다/
console.log(regexp.test(str)) // true
console.log(str.match(regexp)) //['짱이다']
console.log(str.replace(regexp,멋지다)) //우리 스터디7조 멋지다

플래그

g: 전역 검색(g플래그 없으면 일치하는 첫 번째 문자만 반환)
i: 영어 대소문자 구분 않고 일치
m: 여러 줄 일치(^는 전체 문자열이 아닌 각 줄별로 대응되게 만들었기 때문에 여러줄을 검색해야 한다면 m플래그를 사용해야 한다)

패턴

^ab: 줄 시작에 있는 ab와 일치
ab$: 줄 끝에 있는 ab와 일치

const park = '희수님은 강아지를 좋아합니다'
//줄 시작에 '희'가 있는지 확인하고 싶을때
const regexp=/^희/
console.log(regexp.test(park)) // true

const park2=`강아지를 좋아하는\n
희수님`
const regexp=/^희/
console.log(regexp.test(park2)); //false

const park2=`강아지를 좋아하는
희수님`
const regexp2=/^희/m
console.log(regexp2.test(park2)) // true

const park3=`희수님은 좋아합니다\n
강아지`
console.log(/^강/m.test(park3))  👍 // true? false?

true

.: 임의의 한 문자와 일치
a|b: a 또는 b와 일치
ab?: b가 없거나 b와 일치

const pyo = '승연님은 롤리팝을 먹고 롤린노래를 들으며 롤게임을 했습니다.'

const regexp=/롤|게임/
const regexp2=/롤./
const regexp3=/롤../

console.log(regexp.test(pyo)) // true
console.log(pyo.match(regexp2)) // ['롤리', '롤린', '롤게']
console.log(pyo.match(regexp3)) // 👍

`['롤리팝', '롤린노', '롤게임']`

[a-z]: a-z 사이의 아무 문자 하나와 일치(영어 소문자)
[A-Z]: A-Z 사이의 아무 문자 하나와 일치(영어 대문자)
[0-9]: 0-9 사이의 문자 구간에 일치(숫자)
[가-힣]: 가부터 힣 사이의 문자 구간에 일치(한글)

const lee = '승용nim...다음 발표 화이팅입니Da'
console.log(lee.match(/[A-Z]/i)) //['n', 'i', 'm', 'D', 'a']
console.log(lee.match(/[A-Z]/)) //👍

[D]

{3}: 3개 연속 일치
{3,}: 3개 이상 연속 일치
{3,5}: 3개 이상 5개 이하 연속 일치
\w: 63개 문자에 일치(대소영문 52개, 숫자10개,_)
\b: 63개 문자에 일치하지 않는 문자 경계
\d: 숫자에 일치

console.log("the fox is brown".match(/\b/g));//['', '', '', '', '', '', '', '']
console.log("한글은 안됩니다".match(/\b/g)); <//null
console.log("한글은 진짜 안됩니다".match(/\w/g)); //null
            

const lim = '062-944-1439 광주맛집 송정떡갈비 전화번호입니다.성열님 여기 유명한가요?'
console.log(lim.match(/\d{2,3}/g)) //['062', '944', '143']
console.log(lim.match(/\d{3,}/g)) // 👍

['062', '944', '1439']

이메일 형식인지 검사해봅시다

+ : 1회 이상 연속 일치
*: 0회 이상 연속 일치

aaaAA11@naver.com

const email = document.querySelector('input.email').value
if (/[a-zA-Z0-9]+@[a-z]{2,}\.[a-z]{2,3}/.test(email)) {
    alert("환영해요!");
  } else {
    alert("이메일 형식이 아닙니다");
  }
});