URLSearchParams एपीआई, यूआरएल के अलग-अलग हिस्सों के लिए एक जैसा इंटरफ़ेस उपलब्ध कराता है. साथ ही, क्वेरी स्ट्रिंग (? के बाद मौजूद कॉन्टेंट) में आसानी से बदलाव करने की सुविधा देता है.
आम तौर पर, डेवलपर यूआरएल से क्वेरी पैरामीटर निकालने के लिए, रेगुलर एक्सप्रेशन और स्ट्रिंग को अलग करने की सुविधा का इस्तेमाल करते हैं. सच कहें, तो यह कोई मज़ेदार बात नहीं है.
इसे सही तरीके से लागू करना मुश्किल हो सकता है और इसमें गड़बड़ियां हो सकती हैं. मेरा एक राज यह है कि मैंने Google.com के कई बड़े ऐप्लिकेशन में, एक ही get|set|removeURLParameter हेल्पर तरीके का फिर से इस्तेमाल किया है. इनमें Google Santa Tracker और Google I/O 2015 वेब शामिल हैं.
अब समय आ गया है कि हम एक ऐसे एपीआई का इस्तेमाल करें जो हमारे लिए यह काम करे!
URLSearchParams API
Chrome 49, यूआरएल स्पेसिफ़िकेशन से URLSearchParams लागू करता है. यह एक ऐसा एपीआई है जो यूआरएल क्वेरी पैरामीटर के साथ काम करने के लिए मददगार है. मुझे लगता है कि URLSearchParams, यूआरएल के लिए उतनी ही सुविधाजनक है जितनी FormData, फ़ॉर्म के लिए थी.
तो इसका इस्तेमाल कैसे किया जा सकता है? किसी यूआरएल स्ट्रिंग की मदद से, पैरामीटर वैल्यू आसानी से निकाली जा सकती हैं:
// Can also constructor from another URLSearchParams
const params = new URLSearchParams('q=search+string&version=1&person=Eric');
params.get('q') === "search string"
params.get('version') === "1"
Array.from(params).length === 3
for (let p of params) {
console.log(p);
}
पैरामीटर की वैल्यू सेट करने के लिए:
params.set('version', 2);
मौजूदा पैरामीटर के लिए कोई अन्य वैल्यू जोड़ें:
params.append('person', 'Tim');
params.getAll('person') === ['Eric', 'Tim']
कोई पैरामीटर मिटाएं:
params.delete('person');
यूआरएल के साथ काम करना
ज़्यादातर समय, आपको पूरे यूआरएल के साथ काम करना पड़ता है या अपने ऐप्लिकेशन के यूआरएल में बदलाव करना पड़ता है. URL कंस्ट्रक्टर, खास तौर पर इन मामलों में काम आ सकता है:
const url = new URL('https://example.com?foo=1&bar=2');
const params = new URLSearchParams(url.search);
params.set('baz', 3);
params.has('baz') === true
params.toString() === 'foo=1&bar=2&baz=3'
यूआरएल में असल बदलाव करने के लिए, पैरामीटर हासिल किए जा सकते हैं, उनकी वैल्यू अपडेट की जा सकती हैं. इसके बाद, history.replaceState का इस्तेमाल करके यूआरएल को अपडेट किया जा सकता है.
// URL: https://example.com?version=1.0
const params = new URLSearchParams(location.search);
params.set('version', 2.0);
window.history.replaceState({}, '', `${location.pathname}?${params}`);
// URL: https://example.com?version=2.0
यहां मैंने ऐप्लिकेशन के मौजूदा यूआरएल पाथ और बदले गए पैरामीटर से, अपडेट किया गया यूआरएल फिर से बनाने के लिए, ES6 टेंप्लेट स्ट्रिंग का इस्तेमाल किया है.
अन्य जगहों के यूआरएल के साथ इंटिग्रेशन का इस्तेमाल किया जाता है
डिफ़ॉल्ट रूप से, fetch() एपीआई अनुरोध में FormData भेजने से, एक से ज़्यादा हिस्से बन जाते हैं.
अगर ज़रूरत हो, तो URLSearchParams, 'पोस्ट करें' डेटा के लिए एक वैकल्पिक तरीका उपलब्ध कराता है. यह तरीका, mime multipart के बजाय यूआरएल कोड में बदला गया डेटा है.
const params = new URLSearchParams();
params.append('api_key', '1234567890');
fetch('https://example.com/api', {
method: 'POST',
body: params
}).then(...)
फ़िलहाल, इसे Chrome में लागू नहीं किया गया है. हालांकि, URLSearchParams URL कन्स्ट्रक्टर और a टैग के साथ भी काम करता है. दोनों ही रीड-ओनली प्रॉपर्टी देकर हमारे नए दोस्त को
सहायता करते हैं, क्वेरी पैरामीटर ऐक्सेस करने के लिए .searchParams:
const url = new URL(location);
const foo = url.searchParams.get('foo') || 'somedefault';
लिंक को .searchParams प्रॉपर्टी भी मिलती है:
const a = document.createElement('a');
a.href = 'https://example.com?filter=api';
// a.searchParams.get('filter') === 'api';
सुविधा की पहचान और ब्राउज़र के साथ काम करने की सुविधा
फ़िलहाल, Chrome 49, Firefox 44, और Opera 36 पर URLSearchParams काम करता है.
if ('URLSearchParams' in window) {
// Browser supports URLSearchParams
}
हमारा सुझाव है कि पॉलीफ़िल के लिए, github.com/WebReflection/url-search-params पर जाएं.
डेमो
सैंपल आज़माएं!
किसी ऐप्लिकेशन में URLSearchParams देखने के लिए, Polymer के मटीरियल डिज़ाइन आइकॉनसेट जनरेटर देखें. मैंने डीप लिंक से ऐप्लिकेशन की शुरुआती स्थिति को सेटअप करने के लिए इसका इस्तेमाल किया है. काफ़ी काम का है :)