URLSearchParams की मदद से यूआरएल में आसानी से बदलाव करना

Eric Bidelman

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

ध्यान दें: अगर किसी पैरामीटर के लिए कई वैल्यू मौजूद हैं, तो get पहली वैल्यू दिखाता है. पैरामीटर को दोहराएं:

for (let p of params) {
    console.log(p);
}

पैरामीटर वैल्यू सेट करना:

params.set('version', 2);

ध्यान दें: अगर कई वैल्यू हैं, तो set एक ही नाम वाले अन्य सभी पैरामीटर हटा देता है.

किसी मौजूदा पैरामीटर के लिए, कोई दूसरी वैल्यू जोड़ना:

params.append('person', 'Tim');
params.getAll('person') === ['Eric', 'Tim']

मिटाएं:

params.delete('person');

ध्यान दें: इस उदाहरण में, यूआरएल से सभी 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 मल्टीपार्ट के बजाय यूआरएल कोड वाला होता है.

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 का मटीरियल डिज़ाइन आइकॉनसेट जनरेटर देखें. मैंने इसका इस्तेमाल, डीप लिंक से ऐप्लिकेशन की शुरुआती स्थिति सेट अप करने के लिए किया. यह काफ़ी आसान है :)