웹 개발 공부 (onKeyup, JS URLSearchParams)

1.

HTML 파일 상에서 Input tag 등을 사용하여 입력값을 받을 때, tag 내에 onkeyup을 사용할 일이 있었다. (Input tag 안에 숫자값만 받고자 하였다.) Tag 내에 넣어줄 수 있는 유사한 것들로 onKeyUp, onKeydown, onKeyPress 가 있는데 기능은 아래와 같다.

 

 

onKeyup: 사용자가 키보드의 키를 눌렀다가 땔 때 작동할 것 지정

onKeydown: 사용자가 키보드의 키를 눌렀을 때 작동할 것 지정

onKeyPress: 사용자가 키보드의 키를 눌렀을 때 작동할 것을 지정(onKeydown과 다른 점은 이는 ASCII 값으로 사용된다는 점)

 

 

 

아무튼 나는 Input tag 내에서 숫자만 입력받고 싶었기에 (input type="text"로 지정해야 할 이유가 따로 있었다.) onKeyup을 사용하고자 하였다. 아래와 같이 작성해줄 수 있었다.

 

 

 

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"

 

 

 

replace 함수 안에 사용된 JS 정규표현식을 조금 해석해보자. 찾고자 하는 단어가 a일 때, 이 a 값을 두 개의 / 안에 넣어주기만 하면  (e.g., / a / ) a 와 일치하는 값을 하나 찾는 것이지만, 위와 같이 두 번째 / 뒤에 g를 붙여주게 되면 일치하는 값을 모두 찾는다. (해본 적은 없긴 한데 g를 사용하는 대신 replaceAll을 사용해도 작동은 할 것 같긴하다.)

 

 

대괄호 안에 값을 여러개 넣어줄 수 있는데, 이 때 대괄호는 or의 기능을 한다. (e.g., [ab] 라고 작성하면 a or b 가 되는 것) 

 

 

또, 위에서 사용된 [0-9]는 숫자 0~9를 뜻하는 것이고 ^는 부정의 기능을 갖는다. 그래서 위의 정규표현식을 해석해보자면 숫자 0~9가 아닌 모든 값을 찾는 것이다. (그리고 그 값을 '' 로 replace 해주는 것) 

 

 

 

위와 다르게 예를 들어 -를 사용하여 음수도 입력받거나, 소숫점의 숫자도 입력받고 싶다면 아래와 같이 바꿔줄 수 있을 것이다.

 

 

 

onkeyup="this.value=this.value.replace(/[^0-9^-]/g,'');"

onkeyup="this.value=this.value.replace(/[^-\.0-9]/g,'');"

 

 

 

두 번째 onkeyup의 역슬래시는 escape의 역할을 하는데, 이는 원래 '.'이 다른 기능을 갖고있기 때문이다. (원래는 개행문자를 제외한 모든 단일 문자와 대응시키는 기능) 

 

 

 

2.

JS 정규표현식에 대해 알아본 이후, URLSearchParams를 사용할 일이 있었다. URL 뒤에 파라미터를 붙여서 GET 요청을 보낼 때, Script 상에서 이 값을 가져오는 방법이 필요하였다. 

 

 

 

const queryString = window.location.search;
console.log(queryString);

 

 

 

window.location.search를 진행해주면 파라미터 값들이 넘어오게 된다. (e.g., 결과: ?a=1&b=2) 여기서 URLSearchParam을 사용할 수 있다.

 

 

 

const urlParams = new URLSearchParams(queryString);
const a = urlParams.get('a')
console.log(a);

 

 

 

위에서 얻은 queryString 값을 URLSearchParams 안에 넣어주면 get 함수를 사용할 수 있다. get 함수 내에 key 값을 넣어주면 그 결과를 얻을 수 있을 것이다. 위 코드의 Console 창에는 a의 value인 1이 뜨게 될 것이다. 이 외에도 queryString 값이 특정 파라미터를 포함하고 있는지 확인할 수도 있다.

 

 

 

console.log(urlParams.has('a'));

 

 

 

위 has 함수는 true, false boolean 형태의 결과를 반환한다.

 

 

 

 

출처:

https://curryyou.tistory.com/234

https://ggonmerlimd.tistory.com/70

https://www.sitepoint.com/get-url-parameters-with-javascript/