정규식에 관하여.....

얼마전 새로운 프로젝트를 맡으면서 깊게 파고든 정규식형...

 

처음에는 정규식이형을 잘 알지 못하였는데, 그냥 마냥 아 그런게 있구나 하고 넘기기만 했는데 이번 기회에 

 

깊게 파고 들어 보았다....규식이형 x쉐...

 

맨 처음 규식이형을 접하였을때

 

/[.*+?^${}()|[\]\\]/g, "\\$&"    <---- 띠용스 이게 뭐지 정말 귀여운 이모티콘의 집합소구나!!!!

라고 생각했던 나 자신을 돌아보고싶다. feat.인터스텔라

 

서론이 너무 길었다. 본론으로 바로 들어가보자 

 

정규식이란?

 

mdn형이 말하길.

 

정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 이라고 한다 

 

즉 string 문자열을 가지고 노는 형이라고 봐도 무방하다 이거다.

 

정규식의 표현식은 두가지로 표현이 가능하다 

 

스퉵원 - 정규식 리터럴 

 

이 방법은 정규식 자체를 변수에 담을때 사용하는 방법(스퉵투도 마찬가지다..)

 

const re = /c8/; 

 

이 변수는 무엇을 의미하는거 같나?

 

맞다. 문자열중에 c8을 가지고 있는지 확인하는 것이다 욕은 아니지만 정규식을 하면서 스트레스 받았던

과거를 회상하며 적어 보았다..

이 정규식 리터럴 같은경우 /정규식형/ 으로 시작을 하여야 한다. 

 

스퉵투-RegExp 객체의 생성자 함수 

 

RegExp에 자세한 내용은 다음 기회에 알아보도록 하자. 언제가 될지 모르겠지만

 

처음봤을때 exp? 경험치? 이런 생각 하는 사람들이 몇 있을것이다. 없으면 나만의 착각이고 하하!

 

RegExp를 사용할때 예시를 보면서 설명하겠다!

 

let re = new RegExp("c8");

 

아까랑 똑같은 예제이다.

 

다만 다른점이 눈에 보이는가? 맞다 당신이 느낀게 맞다.

 

어 위에 정규식 리터럴 같은 경우 "/정규식형/ " 이 귀염뽀짝한 이모티콘같은 슬래쉬를 사용하였는데

 

여기선 사용을 안했다는걸..눈치챘을것이다 .

 

RegExp같은 경우 // 가 아닌 "" 으로 묶어준다고 봐도 무방하다. 

 

자 이제 정규식에 대해 설명을 개똥같이해도 찰떡같이 알아들었길 바라며.

 

예제로 넘어가보자.

 

document.querySelector(".phone").value.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');

 

이 예제가 뭔지 한번 혼자 곰곰히 생각하고 커피한잔 마시고 다시 보도록하자 .

 

자..커피를 다 마셨길 바라며 

 

코드 분석을 해보자 

document.querySelector(".phone").value

 

이부분만 봤을때 , 클래스가 phone 인 벨류값을 받아오는 함수가 된다. 

 

물논 앞에

const 이런거라든지 = 
let 요론게 들어가야겠지 = 

 

내가 그걸 생략한 이유는 스크롤이 생기기 때문에 생략하였다.

 

굉장히 overflow:hidden 하고싶은 느낌이다 .

 

쨋든 저 벨류값을 가져와 

replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');

 

replace 시킨다 만일 replace를 모르고 잘 이해를 하지 못하였다면 mdn을 참조해보자 링크남기겠다!!!  요기

 

자 replace 에 대해 이해하고 있으리라 믿고 

 

저 벨류값들을 replace 할것인데 어떤 규칙으로?

 

\d 는 숫자 문자에 대응된다.

 

즉 첫 휴대폰 번호는 3자리 그다음은 4자리 마지막도 4자리다.

 

이 핸드폰 번호 아닌 흐구....없..즤...?

물론 있을수도 있으나 99%가 이 휴대폰 번호이기 때문에 이런식으로 작성 하였다

 

그리고 마지막에 $1-$2-$3 이라고 되어있는데 

 

잘 보면 \앞에 괄호가 열려있는걸 볼수있다 

 

즉 $1 첫번째 괄호 $2 두번째 괄호 세번째는 말 안해도 알것이다.

 

즉 하이푼을 안치고  01012345678 이라고 작성을 해도

 

결과물은 010-1234-5678로 나오는 기적같은 마법 마법같은 기적을 선보인다.

 

물론 처음엔 어렵고 GRal 맞지만 프론트앤드의 길을 들어선순간 규식이형을 무시할수가 없는 입장이 되었다.

 

블로그 주인도 정규식은 godgle에서 찾아보면서 필요할때마다 쓴다 

 

만약 공부를 하고싶고 정규식을 테스트 해보고싶다면 

정규식 테스트 할수 있는 사이트를 첨부하도록 하G!

RegExr: Learn, Build, & Test RegEx

 

이만 난 물러가고 다음엔 더 수준 높은 포스팅을 하도록 노력해보겠다....

감...