जावास्क्रिप्ट के माध्यम से वर्तमान URL कैसे प्राप्त करें: हुड के नीचे का विश्लेषण

जावास्क्रिप्ट के माध्यम से वर्तमान URL कैसे प्राप्त करें: हुड के नीचे क्या छिपा है, इसे समझना

कल्पना करें: आप कंप्यूटर पर बैठे हैं, ब्राउज़र खोला है, एड्रेस बार में एक लंबा लिंक दिख रहा है। आप चाहते हैं कि आपकी जावास्क्रिप्ट स्क्रिप्ट इस लिंक को "पढ़े", इसे भागों में तोड़े और उनके साथ कुछ उपयोगी करे। परिचित स्थिति? बिल्कुल! यह Stack Overflow पर सबसे लोकप्रिय प्रश्नों में से एक है — "Get the current URL with JavaScript?" ने सैकड़ों हज़ारों बार देखा गया है। क्यों? क्योंकि इस कार्य के बिना कोई भी गंभीर प्रोजेक्ट पूरा नहीं होता: डायनामिक नेविगेशन, एनालिटिक्स, फॉर्म, AJAX अनुरोध — हर जगह यह जानना ज़रूरी है कि हम कहाँ हैं।

इस लेख में, मैं आपको केवल जादुई पंक्ति window.location.href नहीं दिखाऊंगा, बल्कि ब्राउज़र के हुड के नीचे झाँकूंगा। आप जानेंगे कि location ऑब्जेक्ट कैसे काम करता है, यह कौन से गुण संग्रहीत करता है, URL को सुरक्षित रूप से कैसे पार्स करें और कौन से नुकसान आपका इंतजार कर रहे हैं। चलिए शुरू करते हैं!

परिचय: window.location ऑब्जेक्ट

जब भी आप कोई वेब पेज खोलते हैं, ब्राउज़र एक विशेष ऑब्जेक्ट बनाता है — window.location। यह ग्लोबल नेमस्पेस में रहता है और वर्तमान URL के बारे में सारी जानकारी रखता है। बस कंसोल में लिखें:

console.log(window.location);

आपको कई गुणों वाला एक ऑब्जेक्ट दिखाई देगा। उनमें से सबसे लोकप्रिय:

\n
• href — पूर्ण URL स्ट्रिंग (उदाहरण: https://pythonlib.ru/blog?page=2#comments)।
\n
• protocol — प्रोटोकॉल (https: या http:)।
\n
• hostname — होस्ट का नाम (pythonlib.ru)।
\n
• port — पोर्ट (यदि निर्दिष्ट नहीं है, तो खाली स्ट्रिंग)।
\n
• pathname — फ़ाइल या पेज का पथ (/blog)।
\n
• search — क्वेरी स्ट्रिंग (? के बाद सब कुछ, उदाहरण: ?page=2)।
\n
• hash — लिंक का टुकड़ा (# के बाद सब कुछ, उदाहरण: #comments)।
\n

लिंक पर क्लिक करने या एड्रेस बार बदलने पर ब्राउज़र स्वचालित रूप से इन गुणों को अपडेट करता है। आप इन्हें आसानी से ओवरराइट नहीं कर सकते (लगभग — इसके बारे में बाद में), लेकिन जितना चाहें पढ़ सकते हैं।

पूर्ण URL कैसे प्राप्त करें: सबसे आसान तरीका

यदि आपको पूरी स्ट्रिंग चाहिए, तो href गुण का उपयोग करें:

const currentUrl = window.location.href;\nconsole.log(currentUrl);\n// आउटपुट: "https://pythonlib.ru/blog?page=2#comments"

यह "गोल्ड स्टैंडर्ड" है। यह सभी ब्राउज़रों में काम करता है, जिसमें Internet Explorer भी शामिल है (हाँ, यह अभी भी कुछ कॉर्पोरेट नेटवर्क में जीवित है)। इसे "जावास्क्रिप्ट में वर्तमान URL कैसे प्राप्त करें" प्रश्न के सार्वभौमिक उत्तर के रूप में याद रखें।

URL को भागों में तोड़ना: इसकी आवश्यकता क्यों है?

मान लीजिए, आप एक ऑनलाइन स्टोर बना रहे हैं। आपको यह समझने की ज़रूरत है कि क्वेरी स्ट्रिंग में कौन से पैरामीटर दिए गए हैं: ?category=books&sort=price। या आप पेज को एंकर #reviews वाले तत्व पर स्मूथली स्क्रॉल करना चाहते हैं। केवल href लेना पर्याप्त नहीं है। इसे घटकों में तोड़ना होगा।

आधुनिक जावास्क्रिप्ट में सबसे विश्वसनीय तरीका URL कंस्ट्रक्टर का उपयोग करना है:

const url = new URL(window.location.href);\nconsole.log(url.searchParams.get('category')); // "books"\nconsole.log(url.hash); // "#reviews"

URL ऑब्जेक्ट सुविधाजनक searchParams विधि तक पहुँच प्रदान करता है — यह क्वेरी स्ट्रिंग का एक वास्तविक पार्सर है। आप मैन्युअल रूप से स्ट्रिंग को तोड़े बिना पैरामीटर प्राप्त, जोड़ और हटा सकते हैं। हुड के नीचे, यह window.location के समान गुणों का उपयोग करता है, लेकिन एक स्वच्छ API प्रदान करता है।

हुड के नीचे: ब्राउज़र URL को कैसे प्रोसेस करता है

जब आप ब्राउज़र के एड्रेस बार में एक पता टाइप करते हैं, तो घटनाओं की एक पूरी श्रृंखला होती है। ब्राउज़र WHATWG URL Standard विनिर्देश में वर्णित एल्गोरिदम का उपयोग करके स्ट्रिंग को घटकों में तोड़ता है। यह कुछ इस तरह दिखता है