जावास्क्रिप्ट में URL एनकोड करें: 3 तरीके जो आपकी साइट को बचाएंगे

शुरुआती लोगों के लिए ऑनलाइन Python प्रशिक्षक

Python आसानी से सीखें बिना सिद्धांत के बोझ के। स्वचालित जांच के साथ व्यावहारिक कार्य हल करें और ब्राउज़र में सीधे कोड लिखें।

पाठ्यक्रम शुरू करें

परिचय: URL-एन्कोडिंग उबाऊ सिद्धांत नहीं है, बल्कि आपके एप्लिकेशन का उद्धार है

\n\n

एक स्थिति की कल्पना करें: आप JavaScript में एक वेब एप्लिकेशन लिख रहे हैं, उपयोगकर्ता एक खोज क्वेरी दर्ज करता है «JavaScript & Node.js: सर्वोत्तम अभ्यास». आप इस टेक्स्ट को GET अनुरोध के पैरामीटर के रूप में URL में पास करते हैं। ब्राउज़र कंसोल खोलें — और वहाँ एक त्रुटि है। या, इससे भी बदतर, — अनुरोध चला जाता है, लेकिन सर्वर इसे समझ नहीं पाता, और खोज परिणामों के बजाय उपयोगकर्ता को एक खाली पेज दिखाई देता है।

\n\n

परिचित लगता है? यदि हाँ — यह लेख आपके लिए है। यदि नहीं — यह अभी भी आपके लिए है, क्योंकि देर-सबेर आप इसका सामना करेंगे। JavaScript में URL एन्कोडिंग का विषय Stack Overflow पर सबसे लोकप्रिय प्रश्नों में से एक है (दसियों हज़ार व्यूज़), और यह कोई संयोग नहीं है। यह वह छोटी सी बात है जो एक पेशेवर डेवलपर को एक नौसिखिए से अलग करती है।

\n\n

आज हम JavaScript में URL एन्कोड करने के तीन तरीकों पर चर्चा करेंगे, प्रत्येक कार्य के लिए सही उपकरण चुनना सीखेंगे और वेब डेवलपर के जीवन के वास्तविक उदाहरणों पर विचार करेंगे। चलिए शुरू करते हैं!

\n\n

URL-एन्कोडिंग क्या है और इसकी आवश्यकता क्यों है

\n\n

कोड लिखने से पहले, आइए सिद्धांत को समझते हैं। URL (Uniform Resource Locator) की एक सख्त संरचना होती है। इसमें केवल कुछ निश्चित वर्णों की अनुमति है: लैटिन अक्षर, अंक और कुछ विशेष वर्ण (-, _, ., ~). लेकिन रिक्त स्थान, सिरिलिक, &, ?, # और अन्य वर्ण निषिद्ध हैं।

\n\n

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

\n\n

समाधान — URL-एन्कोडिंग (प्रतिशत एन्कोडिंग)। निषिद्ध वर्णों को %XX प्रारूप के अनुक्रम से बदल दिया जाता है, जहाँ XX UTF-8 एन्कोडिंग में वर्ण का हेक्साडेसिमल कोड है। उदाहरण के लिए, रिक्त स्थान %20 बन जाता है, और सिरिलिक «а» — %D0%B0.

\n\n

JavaScript में इसके लिए तीन अंतर्निहित तंत्र हैं। आइए प्रत्येक पर चर्चा करें।

\n\n

तरीका 1: `encodeURI()` — पूरे URL के लिए

\n\n

फ़ंक्शन encodeURI() पूर्ण URL को एन्कोड करने के लिए डिज़ाइन किया गया है। यह URI सिंटैक्स का हिस्सा होने वाले वर्णों को छोड़कर सभी वर्णों को बदल देता है: :, /, ?, #, &, = और अन्य।

\n\n

सिंटैक्स

encodeURI(uri)

\n\n

उदाहरण

const url = "https://pythonlib.ru/search?q=JavaScript & Node.js";\nconst encoded = encodeURI(url);\nconsole.log(encoded);\n// परिणाम: "https://pythonlib.ru/search?q=JavaScript%20&%20Node.js"\n

\n\n

ध्यान दें: encodeURI() ने रिक्त स्थानों को एन्कोड किया, लेकिन छुआ नहीं &, ? और = वर्णों को। यह पूरे URL के लिए सही है, लेकिन पैरामीटर के लिए खतरनाक है। यदि हमारी क्वेरी में पैरामीटर मान के अंदर & वर्ण होता, तो यह ज्यों का त्यों रहता और क्वेरी स्ट्रिंग को तोड़ देता।

\n\n

कब उपयोग करें

जब पूरे URL को एक साथ एन्कोड करने की आवश्यकता हो (उदाहरण के लिए, window.location में पास करने के लिए)
जब URL में संभावित खतरनाक वर्णों वाला उपयोगकर्ता डेटा न हो

\n\n

कब उपयोग न करें

अलग-अलग क्वेरी पैरामीटर को एन्कोड करने के लिए
यदि URL में उपयोगकर्ता इनपुट (फ़ॉर्म, खोज, टिप्पणियाँ) है

\n\n

तरीका 2: `encodeURIComponent()` — पैरामीटर और मानों के लिए

\n\n

यह आपका रोज़मर्रा का मुख्य उपकरण है। encodeURIComponent() अक्षरों, अंकों और -, _, ., ~ को छोड़कर सभी वर्णों को एन्कोड करता है। यह URI सिंटैक्स का हिस्सा होने वाले वर्णों — &, ?, =, # इत्यादि को भी एन्कोड करेगा।