JavaScript encodeURI, decodeURI और कंपोनेंट फंक्शंस

URI एन्कोडिंग वेब डेवलपमेंट में महत्वपूर्ण है ताकि विशेष वर्ण URL में सुरक्षित रूप से प्रसारित हो सकें। JavaScript चार मुख्य फंक्शन प्रदान करता है:

उदाहरण

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } 
    .encode, .decode { font-size: 18px; font-weight: 500; margin: 10px 0; } 
    button { margin: 5px; padding: 8px 12px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; } 
</style> </head> <body> 
<h1>URI एन्कोडिंग/डिकोडिंग फंक्शंस</h1> 
<button class="encodeUri">एन्कोड URI</button> 
<button class="decodeUri">डिकोड URI</button> 
<button class="encodeUriComponent">एन्कोड URI कंपोनेंट</button> 
<button class="decodeUriComponent">डिकोड URI कंपोनेंट</button> 
<div class="encode"></div> 
<div class="decode"></div> 
<h3>ऊपर दिए गए बटनों पर क्लिक करके URI एन्कोड/डिकोड करें</h3> 
<script> 
    const encodeEle = document.querySelector(".encode"); 
    const decodeEle = document.querySelector(".decode"); 
    const url = "https://www.example.com/search?q=hello world&category=tech"; 
    let encodedUrl, encodedComponent; 
    
    document.querySelector(".encodeUri").addEventListener("click", () => { 
        encodedUrl = encodeURI(url); 
        encodeEle.innerHTML = "एन्कोडेड URL = " + encodedUrl; 
    }); 
    
    document.querySelector(".decodeUri").addEventListener("click", () => { 
        decodeEle.innerHTML = "डिकोडेड URL = " + decodeURI(encodedUrl); 
    }); 
    
    document.querySelector(".encodeUriComponent").addEventListener("click", () => { 
        encodedComponent = encodeURIComponent(url); 
        encodeEle.innerHTML = "एन्कोडेड कंपोनेंट = " + encodedComponent; 
    }); 
    
    document.querySelector(".decodeUriComponent").addEventListener("click", () => { 
        decodeEle.innerHTML = "डिकोडेड कंपोनेंट = " + decodeURIComponent(encodedComponent); 
    }); 
</script> </body> </html>

आउटपुट

encodeURI परिणाम: https://www.example.com/search?q=hello%20world&category=tech (स्पेस → %20, लेकिन & और = अपरिवर्तित)

encodeURIComponent परिणाम: https%3A%2F%2Fwww.example.com%2Fsearch%3Fq%3Dhello%20world%26category%3Dtech (सभी विशेष वर्ण एन्कोडेड)

व्यावहारिक सलाह:

• पूरे URL के लिए encodeURI उपयोग करें
• क्वेरी पैरामीटर मानों के लिए encodeURIComponent उपयोग करें
• फॉर्म डेटा सबमिट करते समय हमेशा एन्कोड करें