जावास्क्रिप्ट में क्वेरी स्ट्रिंग मान प्राप्त करें

समय टिकट: 21 जुलाई, 2022 सुबह 12:22 बजे

URL में, क्वेरी स्ट्रिंग मान अक्सर अनुरोध के बारे में जानकारी प्रदान करते हैं, जैसे किसी खोज के लिए पैरामीटर या आपके द्वारा उपयोग की जा रही किसी ऑब्जेक्ट की आईडी। यदि किसी व्यवसाय या अनुरोध तर्क को फ़्रंटएंड में नियंत्रित किया जाता है, तो यह जानना महत्वपूर्ण है कि URL से क्वेरी स्ट्रिंग मान कैसे प्राप्त करें। इसे हासिल करने के कई तरीके हैं, जिनमें से कुछ हम यहां देखेंगे।

URLखोजपरम

RSI 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);

यूआरएल वस्तु

RSI URL आईई 11 को छोड़कर सभी प्रमुख ब्राउज़र संस्करणों द्वारा एपीआई का भी समर्थन किया जाता है। यह यूआरएल को पार्स करने का एक अधिक लचीला तरीका प्रदान करता है, और यह क्वेरी स्ट्रिंग मानों तक पहुंचने का एक तरीका भी प्रदान करता है। उदाहरण के लिए:

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.

RSI url ऊपर दिए गए ऑब्जेक्ट में URL के सभी भाग उसके भागों में विभाजित हैं। उदाहरण के लिए:

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

शुद्ध जावास्क्रिप्ट

यदि किसी कारण से आप उपरोक्त एपीआई तक नहीं पहुंच पा रहे हैं या पार्सिंग पर अधिक नियंत्रण रखना चाहते हैं, तो आप किसी ऑब्जेक्ट में क्वेरी स्ट्रिंग को पार्स करने के लिए निम्न कोड का उपयोग कर सकते हैं।

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 फ़ंक्शन का उपयोग एकल क्वेरी परम को एक स्ट्रिंग में पार्स करने के लिए कर सकते हैं:

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

समय टिकट:

से अधिक स्टैकब्यूज