[1130] javascript 정규표현식

input 에 받는 값을 필터링 하기 위해 정규표현식을 사용했다!
nft 상품의 가격과 수량을 입력 받아야 하는데 , 무조건 숫자로만 받아야 하고 소수점이 맨 앞에 나와있으면 안됨.
예를 들어 "가격 : 0.3" 은 가능하기만 "가격 : .0.3"을 넣으면 안되기 때문에


https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions

정규 표현식 - JavaScript | MDN

정규 표현식

정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규 표현식 또한 객체입니다. 이 패턴들은 RegExp의 exec 메소드와 test 메소드 ,String의 match메소드 , replace메소드 , search메소드 , split 메소드와 함께 쓰입니다 .

✔ 정규표현식 사용

정규식을 만드는 방법에는 두 가지가 있습니다. 정규식 리터럴(슬래쉬"/"로 감싸는 패턴)을 사용하는 방법은 다음과 같습니다.

var re = /ab+c/; Copy to Clipboard

정규식 리터럴은 스크립트가 불러와질 때 컴파일됩니다. 만약 정규식이 상수라면, 이렇게 사용하는 것이 성능을 향상시킬 수 있습니다. 다른 방법으로는, RegExp 객체의 생성자 함수를 호출하는 방법도 있습니다:

var re = new RegExp("ab+c"); 생성자 함수를 사용하면 정규식이 실행 시점에 컴파일됩니다. 정규식의 패턴이 변경될 수 있는 경우, 혹은 사용자 입력과 같이 다른 출처로부터 패턴을 가져와야 하는 경우에는 생성자 함수를 사용하세요.

우리 프로젝트에서 적용

 const handleQtyCheck = (e,x)=>{ const s = e.target.value; const pattern = /^[0-9]+$/ if(s=='')return; if(!pattern.test(s)){ alert('숫자만 입력해 주세요.') } } const handlePriceCheck = (e,x)=>{ const s = e.target.value; const pattern = /^[0-9]+(.[0-9]+)?$/; if(s=='')return; if(!pattern.test(s)){ alert('정수 또는 실수 형태로 입력해 주세요.') } }

how?

$	입력의 끝 부분과 대응됩니다. 만약 다중행 플래그가 참으로 설정되어 있다면, 줄 바꿈 문자의 바로 앞 부분과도 대응됩니다. 예를 들어, /t$/ 는 "eater" 의 't'에는 대응되지 않습니다, 그러나 "eat" 과는 대응됩니다.

-> /어쩌구$/ 이렇게 되어있으면 입력값의 맨 끝부분에 "어쩌구"가 들어가 있는 경우만 대응됨

+	앞의 표현식이 1회 이상 연속으로 반복되는 부분과 대응됩니다. {1,} 와 같은 의미입니다. 예를 들어, /a+/ 는 "candy"의 'a'에 대응되고 "caaaaaaandy" 의 모든 'a'들에 대응되지만, "cndy" 내의 어느 부분과도 대응되지 않습니다.

-> /어쩌구+/ 이건 입력값중에 "어쩌구"가 들어가 있어야 하고 여러번 들어가면 그 모든거에 다 대응됨.

?

앞의 표현식이 0 또는 1회 등장하는 부분과 대응됩니다. {0,1} 와 같은 의미입니다. 예를 들어, /e?le?/ 는 "angel"의 'el' 에 대응되고, "angle"의 'le' 에 대응되고 또한 "oslo" 의 'l'에도 대응됩니다. 만약 수량자 *, +, ?, {} 바로 뒤에 사용하면, 기본적으로 탐욕스럽던(가능한 한 많이 대응시킴) 수량자를 탐욕스럽지 않게(가능한 가장 적은 문자들에 대응시킴) 만듭니다. 예를 들어, /\d+/를 "123abc"에 적용시키면 "123"과 대응됩니다. 그러나 /\d+?/를 같은 문자열에 적용시키면 오직 "1"과만 대응됩니다. 또한 이 문자는 x(?=y) 와 x(?!y) 항목에서 설명하는 바와 같이 사전 검증(lookahead assertion)을 위해서도 쓰입니다.

.test()

test	대응되는 문자열이 있는지 검사하는 RegExp 메소드 입니다. true 나 false를 반환합니다.