Encoding and decoding URLs in Node.js - Mini Project: Build & Apply

Encoding and decoding URLs

📖 Scenario: You are building a simple Node.js app that handles web addresses. Sometimes URLs have special characters that need to be changed into a safe format to send over the internet. This process is called encoding. Later, you might want to change them back to normal, which is decoding.

🎯 Goal: Learn how to encode a URL string to a safe format and decode it back to the original string using Node.js built-in functions.

📋 What You'll Learn

Create a variable with a URL string containing special characters

Create a variable to hold the encoded URL

Encode the URL string using the correct Node.js function

Decode the encoded URL back to the original string

💡 Why This Matters

🌍 Real World

Web applications often need to send URLs with special characters safely over the internet. Encoding ensures URLs are valid and understood by browsers and servers.

💼 Career

Understanding URL encoding and decoding is essential for backend and frontend developers working with web APIs, routing, and data transmission.

1

Create the URL string

Create a variable called url and set it to the string "https://example.com/search?query=Node.js & encoding".

Node.js

// Create a variable called url with the exact string
// Your code here

Hint

Use const to declare the variable and assign the exact string including spaces and special characters.

2

Create a variable for the encoded URL

Create a variable called encodedUrl to hold the encoded version of url.

Node.js

const url = "https://example.com/search?query=Node.js & encoding";
// Create a variable called encodedUrl
// Your code here

Hint

Just create the variable first. You will assign the encoded value in the next step.

3

Encode the URL string

Assign to encodedUrl the encoded version of url using the Node.js global function encodeURIComponent.

Node.js

const url = "https://example.com/search?query=Node.js & encoding";
const encodedUrl = "";
// Encode url using encodeURIComponent and assign to encodedUrl
// Your code here

Hint

Use encodeURIComponent(url) to convert the URL string into a safe encoded format.

4

Decode the encoded URL

Create a variable called decodedUrl and assign it the decoded version of encodedUrl using the Node.js global function decodeURIComponent.

Node.js

const url = "https://example.com/search?query=Node.js & encoding";
const encodedUrl = encodeURIComponent(url);
// Create decodedUrl by decoding encodedUrl using decodeURIComponent
// Your code here

Hint

Use decodeURIComponent(encodedUrl) to get back the original URL string.

Practice

1. What does the encodeURIComponent function do in Node.js?

easy

A. It decodes an encoded URL string back to normal text.

B. It parses a URL into its components.

C. It sends an HTTP request to a URL.

D. It converts special characters in a string into a format safe for URLs.

Solution

1. Step 1: Understand the purpose of encoding URLs

   Encoding converts special characters like spaces or symbols into a safe format for URLs.

2. Step 2: Identify the role of encodeURIComponent

   This function specifically encodes parts of a URL so they can be safely transmitted.

3. Final Answer:

   It converts special characters in a string into a format safe for URLs. -> Option D

4. Quick Check:

   Encoding = safe URL string [OK]

Hint: Encoding makes URL parts safe by replacing special characters [OK]

Common Mistakes:

• Confusing encoding with decoding
• Thinking it sends HTTP requests
• Assuming it parses URLs

2. Which of the following is the correct syntax to decode a URL-encoded string in Node.js?

easy

A. decodeURIComponent('https%3A%2F%2Fexample.com')

B. decodeURI('https://example.com')

C. encodeURIComponent('https://example.com')

D. encodeURI('https%3A%2F%2Fexample.com')

Solution

1. Step 1: Identify the function to decode URL components

   decodeURIComponent is used to decode encoded parts of a URL.

2. Step 2: Check the syntax correctness

   The syntax decodeURIComponent('https%3A%2F%2Fexample.com') correctly decodes the encoded string.

3. Final Answer:

   decodeURIComponent('https%3A%2F%2Fexample.com') -> Option A

4. Quick Check:

   Decoding syntax = decodeURIComponent() [OK]

Hint: Use decodeURIComponent() to decode encoded URL parts [OK]

Common Mistakes:

• Using encode functions to decode
• Using decodeURI which decodes less strictly
• Mixing encodeURI and decodeURIComponent

3. What will be the output of the following Node.js code?

const encoded = encodeURIComponent('Hello World!');
console.log(encoded);

medium

A. Hello%World%!

B. Hello+World!

C. Hello%20World%21

D. Hello World!

Solution

1. Step 1: Understand what encodeURIComponent does to spaces and special characters

   Spaces become %20 and exclamation marks become %21 in encoding.

2. Step 2: Apply encoding to 'Hello World!'

   The space is replaced by %20 and '!' by %21, resulting in 'Hello%20World%21'.

3. Final Answer:

   Hello%20World%21 -> Option C

4. Quick Check:

   Space = %20, ! = %21 [OK]

Hint: Spaces become %20, special chars like ! become %21 [OK]

Common Mistakes:

• Expecting spaces to become '+'
• Confusing encodeURI with encodeURIComponent
• Not encoding special characters

4. Identify the error in this Node.js code snippet:

const url = 'https://example.com/search?query=Node.js';
const encodedUrl = encodeURIComponent(url);
console.log(encodedUrl);

medium

A. No error; code works correctly.

B. Should use encodeURI instead of encodeURIComponent for full URLs.

C. Missing decodeURIComponent call after encoding.

D. encodeURIComponent cannot encode dots ('.').

Solution

1. Step 1: Understand difference between encodeURI and encodeURIComponent

   encodeURIComponent encodes all special characters, including ':' and '/', which breaks full URLs.

2. Step 2: Identify correct function for full URLs

   encodeURI is designed to encode full URLs without breaking their structure.

3. Final Answer:

   Should use encodeURI instead of encodeURIComponent for full URLs. -> Option B

4. Quick Check:

   Full URL encoding = encodeURI() [OK]

Hint: Use encodeURI for full URLs, encodeURIComponent for parts [OK]

Common Mistakes:

• Using encodeURIComponent on full URLs
• Expecting decode after encoding always
• Thinking dots cannot be encoded

5. You want to safely encode a URL query parameter that contains an email address like [e-mail]. Which code snippet correctly encodes this parameter for use in a URL?

hard

A. const param = encodeURIComponent('[e-mail]');

B. const param = encodeURI('[e-mail]').replace(/@/g, '+');

C. const param = encodeURIComponent('[e-mail]').replace(/%40/g, '@');

D. const param = encodeURI('[e-mail]');

Solution

1. Step 1: Determine correct encoding for query parameters

   Query parameters should be encoded with encodeURIComponent to encode special characters like '@'.

2. Step 2: Check each option's correctness

   const param = encodeURI('[e-mail]'); uses encodeURI which does not encode '@'. const param = encodeURI('[e-mail]').replace(/@/g, '+'); uses encodeURI and replaces '@' with '+', but '+' is interpreted as space in query strings. const param = encodeURIComponent('[e-mail]').replace(/%40/g, '@'); uses encodeURIComponent but then decodes '%40' back to '@'. const param = encodeURIComponent('[e-mail]');: const param = encodeURIComponent('[e-mail]'); correctly encodes '@' as '%40'.

3. Final Answer:

   const param = encodeURIComponent('[e-mail]'); -> Option A

4. Quick Check:

   Query param encoding = encodeURIComponent() [OK]

Hint: Use encodeURIComponent for query parameters including emails [OK]

Common Mistakes:

• Using encodeURI for query parameters
• Manually replacing encoded characters incorrectly
• Not encoding '@' in emails