JavaScript में URL को Decode कैसे करें (संपूर्ण गाइड)

decodeURIComponent() — एक URI कंपोनेंट को Decode करें

decodeURIComponent() JavaScript में URL-encoded स्ट्रिंग्स को decode करने का प्राथमिक फंक्शन है। यह सभी percent-encoded अनुक्रमों को decode करता है और उन्हें उनके मूल characters में वापस बदल देता है। इस फंक्शन का उपयोग query parameter की वैल्यूज़, path segments, या किसी URI के किसी एक कंपोनेंट को decode करते समय करें।

// बुनियादी decoding
console.log(decodeURIComponent('hello%20world'));
// "hello world"

console.log(decodeURIComponent('price%3D10%26qty%3D2'));
// "price=10&qty=2"

// Unicode characters को decode करना
console.log(decodeURIComponent('caf%C3%A9'));
// "cafe" (उच्चारण चिह्न के साथ)

console.log(decodeURIComponent('%E4%B8%AD%E6%96%87'));
// चीनी characters

// किसी URL से query parameter की वैल्यू को decode करना
const url = 'https://example.com/search?q=C%2B%2B%20%26%20Java';
const params = url.split('?')[1];
const value = params.split('=')[1];
console.log(decodeURIComponent(value));
// "C++ & Java"

decodeURIComponent() सभी percent-encoded अनुक्रमों को decode करता है, जिसमें %2F (/) और %3F (?) जैसे reserved characters वाले अनुक्रम भी शामिल हैं। अलग-अलग URI कंपोनेंट्स के साथ काम करते समय यह सही व्यवहार है, लेकिन पूरे URL पर लागू करने से समस्याएँ पैदा हो सकती हैं।

decodeURI() — एक संपूर्ण URI को Decode करें

decodeURI() किसी संपूर्ण URI को उसकी संरचना बनाए रखते हुए decode करता है। decodeURIComponent() के विपरीत, यह उन अनुक्रमों को decode नहीं करता जो %2F (/), %3F (?), %23 (#), और %26 (&) जैसे reserved URI characters को दर्शाते हैं।

// decodeURI, URI की संरचना को बनाए रखता है
console.log(decodeURI('https://example.com/my%20page?q=hello%20world'));
// "https://example.com/my page?q=hello world"
// स्पेस decode हो जाते हैं, लेकिन /, ?, और = बरकरार रहते हैं

// पूरे URL पर decodeURIComponent के साथ तुलना करें
console.log(decodeURIComponent('https%3A%2F%2Fexample.com%2Fpath'));
// "https://example.com/path" - अगर पूरा URL encode किया गया हो तो सही decode होता है

// decodeURI, reserved character अनुक्रमों को decode नहीं करेगा
console.log(decodeURI('path%2Fto%2Ffile'));
// "path%2Fto%2Ffile" - %2F decode नहीं होता क्योंकि / reserved है
console.log(decodeURIComponent('path%2Fto%2Ffile'));
// "path/to/file" - %2F decode होता है

decodeURI() का उपयोग तब करें जब आप किसी URL को उसकी संरचना बदले बिना अधिक पठनीय बनाना चाहते हों (उदाहरण के लिए, प्रदर्शन के उद्देश्यों के लिए)। अधिकांश प्रोग्रामेटिक उपयोग के मामलों में, आपको अलग-अलग कंपोनेंट्स पर लागू किया गया decodeURIComponent() चाहिए होगा।

खराब URI को संभालना

decodeURI() और decodeURIComponent() दोनों, अमान्य percent-encoded अनुक्रमों का सामना करने पर एक URIError throw करते हैं। ऐसा अकेले percent चिह्नों, अधूरे अनुक्रमों, या अमान्य UTF-8 byte अनुक्रमों के साथ होता है। उपयोगकर्ता द्वारा दिए गए या बाहरी URL के साथ काम करते समय हमेशा decoding ऑपरेशन्स को try-catch ब्लॉक में रखें।

// ये URIError: URI malformed throw करते हैं
try {
  decodeURIComponent('%');         // अकेला percent
} catch (e) {
  console.error(e.message);       // "URI malformed"
}

try {
  decodeURIComponent('%2');        // अधूरा अनुक्रम
} catch (e) {
  console.error(e.message);       // "URI malformed"
}

// सुरक्षित decoding फंक्शन
function safeDecode(str) {
  try {
    return decodeURIComponent(str);
  } catch (e) {
    console.warn('Failed to decode:', str);
    return str; // विफल होने पर मूल स्ट्रिंग लौटाएँ
  }
}

// decode करने से पहले खराब percent अनुक्रमों को ठीक करें
function fixAndDecode(str) {
  // अकेले % को %25 (encoded percent चिह्न) से बदलें
  const fixed = str.replace(/%(?![0-9A-Fa-f]{2})/g, '%25');
  return decodeURIComponent(fixed);
}

console.log(fixAndDecode('100% complete'));
// "100% complete"

URL API का उपयोग करना (अनुशंसित)

आधुनिक URL और URLSearchParams API, URL को पार्स और decode करने का एक अधिक सुरक्षित और संरचित तरीका प्रदान करते हैं। ये encoding और decoding को स्वचालित रूप से संभालते हैं, जिससे त्रुटियों का जोखिम कम हो जाता है।

// किसी URL को पार्स करें और उसके कंपोनेंट्स तक पहुँचें (स्वचालित रूप से decode)
const url = new URL('https://example.com/path%20here?q=hello%20world&lang=en');

console.log(url.pathname);  // "/path here" (decoded)
console.log(url.search);    // "?q=hello%20world&lang=en" (raw)

// URLSearchParams parameter की वैल्यूज़ को स्वचालित रूप से decode करता है
console.log(url.searchParams.get('q'));     // "hello world"
console.log(url.searchParams.get('lang')); // "en"

// सभी parameters पर iterate करें
for (const [key, value] of url.searchParams) {
  console.log(key, '=', value);
}
// q = hello world
// lang = en

// URLSearchParams + को स्पेस के रूप में संभालता है (form encoding)
const formParams = new URLSearchParams('q=hello+world&lang=en');
console.log(formParams.get('q'));  // "hello world"

// स्वचालित encoding के साथ URL बनाना
const newUrl = new URL('https://example.com/search');
newUrl.searchParams.set('q', 'C++ & Java');
newUrl.searchParams.set('page', '1');
console.log(newUrl.toString());
// "https://example.com/search?q=C%2B%2B+%26+Java&page=1"

आम Decoding गलतियाँ

गलती 1: decodeURIComponent() से पूरे URL को decode करना। अगर URL में encoded reserved characters हों तो यह URL की संरचना को तोड़ सकता है। किसी query वैल्यू में मौजूद %2F एक / बन जाएगा, जिससे संभावित रूप से URL का अर्थ बदल सकता है।

गलती 2: दोहरा decoding। अगर किसी स्ट्रिंग को एक बार decode किया जा चुका है, तो उसे दोबारा decode करने से अप्रत्याशित परिणाम या त्रुटियाँ हो सकती हैं। उदाहरण के लिए, स्ट्रिंग %2520 पहले %20 में decode होती है, फिर एक स्पेस में। अगर आप केवल एक स्तर की encoding की अपेक्षा करते हैं, तो दोहरा decoding डेटा को दूषित कर देता है।

// दोहरा decoding की समस्या
const encoded = '%2520'; // यह एक encoded %20 है
console.log(decodeURIComponent(encoded));  // "%20" (सही - एक स्तर)
console.log(decodeURIComponent(decodeURIComponent(encoded)));  // " " (दोहरा decoded!)

// किसी स्ट्रिंग को decode करने से पहले जाँचें कि उसे decoding की ज़रूरत है या नहीं
function needsDecoding(str) {
  return str !== decodeURIComponent(str);
}

गलती 3: + चिह्न को न संभालना। decodeURIComponent(), + को स्पेस में परिवर्तित नहीं करता। अगर आप form-urlencoded डेटा को decode कर रहे हैं, तो आपको पहले + को स्पेस से बदलना होगा, या URLSearchParams का उपयोग करना होगा जो इसे स्वचालित रूप से संभालता है।

// decodeURIComponent, + को स्पेस के रूप में decode नहीं करता
console.log(decodeURIComponent('hello+world'));
// "hello+world" ("hello world" नहीं!)

// समाधान: decode करने से पहले + को बदलें
function decodeFormValue(str) {
  return decodeURIComponent(str.replace(/\+/g, ' '));
}
console.log(decodeFormValue('hello+world'));
// "hello world"

// या URLSearchParams का उपयोग करें (+ को स्वचालित रूप से संभालता है)
const params = new URLSearchParams('q=hello+world');
console.log(params.get('q'));
// "hello world"