Javascript에서 URL 매개변수 얻기

Javascript로 프로그래밍할 때 URL을 통해 전달된 매개변수가 있는지 알고 싶을 때가 있습니다. URL 매개 변수에 익숙하지 않은 경우 기본 URL과 '?' 뒤에 설정되는 인수입니다. 예를 들어 아래 예를 살펴보겠습니다.

www.josephamaurer.com/RecentDevPosts.html?PerPage=100

'?PerPage=100'은 이 URL과 함께 전달되는 첫 번째 매개변수입니다. 이 매개변수의 값을 파악하고 적절하게 사용하는 것은 자바스크립트 논리에 달려 있습니다. 여러 매개변수가 있을 수 있습니까? 당신은 내기! 추가 매개변수는 다음 구문으로 추가됩니다.

www.josephamaurer.com/RecentDevPosts.html?PerPage=100&Page=2

'&Page=2'는 이 URL과 함께 있는 두 번째 매개변수입니다. 이 시점에서 이와 같은 인수 전달의 한계가 무엇인지 궁금할 것입니다. 분명한 것은 공백을 가질 수 없다는 것입니다. 다른 하나는 '#' 문자가 문서의 섹션으로 건너뛰기 위해 예약되어 있다는 것입니다. 일반적으로 URL Encoding은 이 문제를 처리하고 텍스트를 URL에 안전하게 전달하는 데 사용됩니다. Internet Explorer(RIP)의 최대 길이는 2,083 characters 입니다. RFC 2616 사양에 따르면 서버는 문자 수에 관계없이 처리할 수 있어야 하지만 요청이 너무 길면 웹 서버가 응답하지 못할 위험이 있습니다. 프로덕션 프로젝트에서 이 작업을 수행할 계획이라면 Google Chrome guidelines을 살펴보는 것이 좋습니다.

웹 양식

URL 내에서 이러한 쿼리 문자열의 가장 일반적인 용도는 웹 양식입니다. 사용자가 양식에서 제출을 누르면 응답이 백엔드에서 처리할 수 있도록 URL에 게시됩니다. 이 자습서에서는 처리를 위해 해당 URL에서 값을 가져오는 데 중점을 두지만 백엔드에서 이를 사용하는 예가 많이 있습니다.

URL 검색 매개변수

javascript를 사용하여 URL을 구문 분석할 때 문자열을 직접 구문 분석하는 대신 사용하는 것이 가장 쉽습니다URLSearchParams. 정규식을 사용하여 이를 시도할 수 있지만 이것은 끔찍한 생각입니다. 그럼 아래 예제를 보고 이것이 어떻게 작동하는지 봅시다.



보시다시피 매개변수를 가져오는 것은 실제로 매우 간단한 프로세스입니다. 매우 쉽게 쿼리하여 어떤 개체가 있는지 확인하고 사용하기 전에 먼저 null인지 실제 값인지 확인할 수 있습니다. 이 글을 쓰는 시점에서 browser support은 매우 훌륭하고 거의 모든 곳에서 사용할 수 있습니다.

라이브 예

내 마지막 비디오 게시물을 기반으로 이제 예제 페이지에 매개변수를 전달하여 반환되는 게시물 수를 가지고 놀 수 있습니다.
Live Example

이 방법을 사용하고 행복한 코딩을 하게 되면 알려주세요 😊