JavaScript에서 쿼리 문자열 값 가져오기

타임 스탬프 : 21 년 2022 월 12 일 오전 22:XNUMX

URL에서 쿼리 문자열 값은 검색 매개변수나 사용 중인 개체의 ID와 같은 요청에 대한 정보를 제공하는 경우가 많습니다. 비즈니스 또는 요청 논리가 프런트엔드에서 처리되는 경우 URL에서 쿼리 문자열 값을 검색하는 방법을 아는 것이 중요합니다. 이를 달성하는 방법에는 여러 가지가 있으며 그 중 몇 가지를 여기에서 살펴보겠습니다.

URL검색 매개변수

XNUMXD덴탈의 URLSearchParams 인터페이스는 IE 11을 제외한 모든 주요 브라우저 버전에서 지원됩니다. URL의 쿼리 문자열을 구문 분석하고 값에 액세스하는 방법을 제공하여 작동합니다. 예를 들어:

let params = new URLSearchParams('q=node&page=2');
params.get('q'); 
params.get('page');

이 인터페이스의 단점 중 하나는 URL의 쿼리 문자열만 전달해야 한다는 것입니다. 현재 브라우저 URL로 작업하는 경우 window.location.search. 다른 URL로 작업하는 경우 쿼리 문자열을 별도로 구문 분석하고 전달해야 합니다.

쿼리 매개변수를 객체로 구문 분석하려면 다음을 사용하십시오. URL.searchParams'에스 .entries() 반환하는 메서드 Iterator 키/값 쌍의 Object.fromEntries 객체로 변환합니다.

let params = new URLSearchParams('q=node&page=2');
let entries = params.entries();
Object.fromEntries(entries);

URL 개체

XNUMXD덴탈의 URL API는 IE 11을 제외한 모든 주요 브라우저 버전에서도 지원됩니다. URL을 구문 분석하는 보다 유연한 방법을 제공하고 쿼리 문자열 값에 액세스하는 방법도 제공합니다. 예를 들어:

const url = new URL('https://stackabuse.com/search?q=node&page=2');
const searchParams = url.searchParams;

searchParams.get('q'); 
searchParams.get('page');

url.searchParams 에 의해 반환된 동일한 유형의 인스턴스 객체입니다. URLSearchParams.

XNUMXD덴탈의 url 위의 개체에는 URL의 모든 부분이 부분으로 나누어져 있습니다. 예를 들어:

url.href; 
url.origin; 
url.protocol; 
url.host; 
url.hostname; 
url.port; 
url.pathname; 
url.search; 
url.hash;

순수 자바 스크립트

어떤 이유로든 위의 API에 액세스할 수 없거나 구문 분석을 더 많이 제어하려면 다음 코드를 사용하여 쿼리 문자열을 개체로 구문 분석할 수 있습니다.

function getQueryParams(url) {
    const paramArr = url.slice(url.indexOf('?') + 1).split('&');
    const params = {};
    paramArr.map(param => {
        const [key, val] = param.split('=');
        params[key] = decodeURIComponent(val);
    })
    return params;
}

주의 사항: 일반 JS에서 쿼리 매개변수를 구문 분석하는 방법에는 여러 가지가 있으며, 일부는 다른 것보다 더 복잡하고 강력합니다. 이것은 한 가지 방법일 뿐이며, 이 요점.

그런 다음 이 일반 JS 함수를 사용하여 단일 쿼리 매개변수를 문자열로 구문 분석할 수 있습니다.

getQueryParams('https://stackabuse.com/search?q=node&page=2')

타임 스탬프 :

더보기 스택카부스