Question

How to decode URL-encoded and URL query strings in JavaScript

Answer 1

/**
 * Decodes a URL-encoded string or query component.
 * Replaces '+' with spaces and decodes percent-encoded characters (%xx).
 * 
 * @param {string} encodedStr - The URL-encoded string.
 * @returns {string} The fully decoded string.
 */
function decodeUrlString(encodedStr) {
    try {
        // Replace '+' with spaces first, as decodeURIComponent treats '+' literally
        const normalizedStr = encodedStr.replace(/\+/g, ' ');
        return decodeURIComponent(normalizedStr);
    } catch (error) {
        console.error("Decoding error:", error.message);
        return encodedStr;
    }
}

// --- Program Execution ---
if (typeof module !== 'undefined' && require.main === module) {
    // Example 1: Standard URL encoding with special characters
    const sample1 = "Hello%20World%21%20JavaScript%20%26%20Web";
    console.log("--- Example 1: Standard URL Encoding ---");
    console.log("Encoded:", sample1);
    console.log("Decoded:", decodeUrlString(sample1));

    // Example 2: Form query string fragment encoding (spaces as '+')
    const sample2 = "Jane+Doe+from+New+York";
    console.log("\n--- Example 2: Form Fragment Encoding ---");
    console.log("Encoded:", sample2);
    console.log("Decoded:", decodeUrlString(sample2));
}


/*
run:

--- Example 1: Standard URL Encoding ---
Encoded: Hello%20World%21%20JavaScript%20%26%20Web
Decoded: Hello World! JavaScript & Web

--- Example 2: Form Fragment Encoding ---
Encoded: Jane+Doe+from+New+York
Decoded: Jane Doe from New York

*/

 

70+ SQL courses for beginners and professionals

Answer 2

/**
 * Parses and decodes a complete URL query string into a JavaScript Object.
 * 
 * @param {string} queryString - The URL query string (with or without leading '?').
 * @returns {Object} An object mapping keys to their decoded values (or arrays for duplicates).
 */
function parseAndDecodeQuery(queryString) {
    // Remove leading '?' if present
    const cleanQuery = queryString.startsWith('?') ? queryString.slice(1) : queryString;
    
    // URLSearchParams automatically handles decoding and '+' to space conversion
    const params = new URLSearchParams(cleanQuery);
    const result = {};

    for (const [key, value] of params.entries()) {
        // If a key appears multiple times (e.g., multiple 'tag' parameters), 
        // collect them into an array.
        if (result[key]) {
            if (!Array.isArray(result[key])) {
                result[key] = [result[key]];
            }
            result[key].push(value);
        } else {
            result[key] = value;
        }
    }

    return result;
}

// --- Program Execution ---
if (typeof module !== 'undefined' && require.main === module) {
    const fullQuery = "search=javascript+tutorial&category=programming&tag=beginner&tag=frontend";
    
    console.log("--- Alternative: Full Query String Parsing ---");
    console.log("Original Query:", fullQuery);

    const decodedParams = parseAndDecodeQuery(fullQuery);
    
    console.log("Decoded Object Result:");
    for (const [key, value] of Object.entries(decodedParams)) {
        console.log(`  ${key} ->`, value);
    }
}


/*
run:

--- Alternative: Full Query String Parsing ---
Original Query: search=javascript+tutorial&category=programming&tag=beginner&tag=frontend
Decoded Object Result:
  search -> javascript tutorial
  category -> programming
  tag -> [ 'beginner', 'frontend' ]

*/

 

70+ SQL courses for beginners and professionals