URL Encoding पूर्ण गाइड

"मैंने API को हिंदी पैरामीटर भेजे और वे टूटकर वापस आए।"

भेजा: ?name=राहुल शर्मा
प्राप्त: ?name=%E0%A4%B0%E0%A4%BE%E0%A4%B9%E0%A5%81%E0%A4%B2

इस समस्या का कारण URL encoding है। इसे सही ढंग से समझने के बाद, आप फिर कभी टूटे हुए कैरेक्टर्स से परेशान नहीं होंगे।

---

एन्कोडिंग क्यों जरूरी है

URLs 1990 के दशक में बनाए गए थे और केवल ASCII कैरेक्टर्स की अनुमति देते हैं।

URLs में सुरक्षित कैरेक्टर्स

A-Z  a-z  0-9  - _ . ~

बस इतना ही।

URLs में समस्याग्रस्त कैरेक्टर्स

एन्कोडिंग क्या करता है

समस्याग्रस्त कैरेक्टर्स को %XX फॉर्मेट (हेक्साडेसिमल) में बदलता है।

स्पेस  -> %20
&      -> %26
र      -> %E0%A4%B0 (UTF-8 में)

---

JavaScript एन्कोडिंग फंक्शन्स

मुख्य अंतर

const text = "hello world&name=राहुल";

encodeURI(text);
// "hello%20world&name=%E0%A4%B0%E0%A4%BE%E0%A4%B9%E0%A5%81%E0%A4%B2"
// & और = वैसे ही रहते हैं (URL स्ट्रक्चर बनाए रखता है)

encodeURIComponent(text);
// "hello%20world%26name%3D%E0%A4%B0%E0%A4%BE%E0%A4%B9%E0%A5%81%E0%A4%B2"
// & -> %26, = -> %3D (सब कुछ एन्कोड करता है)

कब क्या उपयोग करें

आम गलतियाँ

// गलत: पूरे URL पर encodeURIComponent
const url = "https://api.com/search?q=टेस्ट";
encodeURIComponent(url);
// "https%3A%2F%2Fapi.com%2Fsearch%3Fq%3D%E0%A4%9F%E0%A5%87%E0%A4%B8%E0%A5%8D%E0%A4%9F"
// URL के रूप में उपयोग नहीं हो सकता!

// सही: केवल वैल्यू एन्कोड करें
const query = "टेस्ट";
const url = `https://api.com/search?q=${encodeURIComponent(query)}`;
// "https://api.com/search?q=%E0%A4%9F%E0%A5%87%E0%A4%B8%E0%A5%8D%E0%A4%9F"

---

URLSearchParams - आधुनिक तरीका

मैनुअल एन्कोडिंग के बजाय URLSearchParams का उपयोग करें।

बेसिक उपयोग

const params = new URLSearchParams({
  name: "राहुल शर्मा",
  city: "नई दिल्ली",
  tags: "डेवलपर,फ्रंटएंड"
});

params.toString();
// "name=%E0%A4%B0%E0%A4%BE%E0%A4%B9%E0%A5%81%E0%A4%B2+%E0%A4%B6%E0%A4%B0%E0%A5%8D%E0%A4%AE%E0%A4%BE&city=%E0%A4%A8%E0%A4%88+%E0%A4%A6%E0%A4%BF%E0%A4%B2%E0%A5%8D%E0%A4%B2%E0%A5%80&tags=%E0%A4%A1%E0%A5%87%E0%A4%B5%E0%A4%B2%E0%A4%AA%E0%A4%B0%2C%E0%A4%AB%E0%A5%8D%E0%A4%B0%E0%A4%82%E0%A4%9F%E0%A4%8F%E0%A4%82%E0%A4%A1"

एन्कोडिंग अपने आप होता है। गलती की गुंजाइश नहीं।

URL ऑब्जेक्ट के साथ

const url = new URL("https://api.com/search");
url.searchParams.set("q", "राहुल शर्मा");
url.searchParams.set("page", 1);

url.toString();
// "https://api.com/search?q=%E0%A4%B0%E0%A4%BE%E0%A4%B9%E0%A5%81%E0%A4%B2+%E0%A4%B6%E0%A4%B0%E0%A5%8D%E0%A4%AE%E0%A4%BE&page=1"

पार्सिंग (डिकोडिंग)

const url = new URL("https://api.com/search?name=%E0%A4%B0%E0%A4%BE%E0%A4%B9%E0%A5%81%E0%A4%B2");

url.searchParams.get("name");  // "राहुल" <- ऑटो-डिकोडेड!

---

व्यावहारिक समस्या समाधान

समस्या 1: डबल एन्कोडिंग

// पहले से एन्कोडेड वैल्यू को फिर एन्कोड करना
const encoded = "%20";
encodeURIComponent(encoded);
// "%2520"
// % -> %25 जिससे पूरी तरह खराब हो जाता है

समाधान: एन्कोड करने से पहले जांचें कि पहले से एन्कोडेड है या नहीं

function safeEncode(str) {
  try {
    // अगर पहले से एन्कोडेड है, पहले डिकोड करें फिर री-एन्कोड करें
    return encodeURIComponent(decodeURIComponent(str));
  } catch {
    // डिकोड फेल = अभी तक एन्कोडेड नहीं
    return encodeURIComponent(str);
  }
}

समस्या 2: स्पेस के दो रूप

%20  vs  +

दोनों स्पेस दर्शाते हैं लेकिन अलग-अलग जगहों से आते हैं।

encodeURIComponent("hello world");  // "hello%20world"
new URLSearchParams({q: "hello world"}).toString();  // "q=hello+world"

दोनों सर्वर द्वारा सही ढंग से प्रोसेस होते हैं। लेकिन एकरूपता के लिए एक तरीका चुनें।

समस्या 3: फ्रेमवर्क पहले से एन्कोड करता है

axios, fetch, React Router, आदि ऑटोमैटिक एन्कोड करते हैं।

// axios - ऑटो एन्कोडिंग
axios.get('/search', { params: { name: 'राहुल' } });
// रिक्वेस्ट: /search?name=%E0%A4%B0%E0%A4%BE%E0%A4%B9%E0%A5%81%E0%A4%B2

// गलत: मैनुअल एन्कोडिंग से डबल एन्कोडिंग
axios.get('/search', { params: { name: encodeURIComponent('राहुल') } });
// रिक्वेस्ट: /search?name=%25E0%25A4%25B0... (टूटा हुआ)

नियम: अगर फ्रेमवर्क उपयोग कर रहे हैं, तो मैनुअल एन्कोड न करें।

---

सर्वर-साइड हैंडलिंग

Node.js / Express

// ऑटो-डिकोडेड
app.get('/search', (req, res) => {
  const name = req.query.name;  // "राहुल"
});

// पाथ पैरामीटर्स के लिए भी
app.get('/users/:name', (req, res) => {
  const name = req.params.name;  // "राहुल"
});

Python / Flask

from flask import request

@app.route('/search')
def search():
    name = request.args.get('name')  # "राहुल"

PHP

$name = $_GET['name'];  // "राहुल"
// PHP भी ऑटो-डिकोड करता है

---

विशेष मामले

URL में Base64

स्टैंडर्ड Base64 में +, /, = होते हैं जो URLs में समस्या करते हैं।

// स्टैंडर्ड Base64
btoa("hello");  // "aGVsbG8="

// URL-safe Base64
function base64UrlEncode(str) {
  return btoa(str)
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');  // पैडिंग हटाएं
}

base64UrlEncode("hello");  // "aGVsbG8"

JWT इस फॉर्मेट का उपयोग करता है।

Fragment (#) सावधानी

https://example.com/page?name=राहुल#section
                                    ↑
                          यहाँ से सर्वर को नहीं भेजा जाता

# के बाद सब कुछ (फ्रैगमेंट) केवल ब्राउज़र में प्रोसेस होता है और सर्वर को नहीं भेजा जाता।

---

डिबगिंग टिप्स

ब्राउज़र एड्रेस बार

ब्राउज़र पढ़ने में आसानी के लिए डिकोडेड URLs दिखाते हैं।

दिखाया गया: https://example.com/users/राहुल
असली: https://example.com/users/%E0%A4%B0%E0%A4%BE%E0%A4%B9%E0%A5%81%E0%A4%B2

Developer Tools के Network टैब में असली रिक्वेस्ट URL जांचें।

curl से टेस्टिंग

# सीधे एन्कोडेड URL
curl "https://api.com/search?name=%E0%A4%B0%E0%A4%BE%E0%A4%B9%E0%A5%81%E0%A4%B2"

# curl को एन्कोड करने दें
curl -G "https://api.com/search" --data-urlencode "name=राहुल"

---

सारांश

मुख्य सिद्धांत: जब भी संभव हो, URLSearchParams या अपने फ्रेमवर्क को हैंडल करने दें, और मैनुअल एन्कोडिंग से बचें।

---

संबंधित टूल्स