Encoding and decoding URLs in Node.js - Step-by-Step Execution

Concept Flow - Encoding and decoding URLs

Start with raw URL string

↓

Encode URL using encodeURIComponent

↓

Get encoded URL string

↓

Decode URL using decodeURIComponent

↓

Get original URL string back

↓

End

This flow shows how a raw URL string is first encoded to safely transmit special characters, then decoded back to its original form.

Execution Sample

Node.js

const rawUrl = 'https://example.com/search?query=hello world&lang=en';
const encodedUrl = encodeURIComponent(rawUrl);
const decodedUrl = decodeURIComponent(encodedUrl);
console.log(encodedUrl);
console.log(decodedUrl);

This code encodes a URL string to escape special characters, then decodes it back to the original string.

Execution Table

Step	Action	Input	Output	Explanation
1	Define rawUrl	'https://example.com/search?query=hello world&lang=en'	'https://example.com/search?query=hello world&lang=en'	Raw URL string with spaces and special characters
2	Encode rawUrl	'https://example.com/search?query=hello world&lang=en'	'https%3A%2F%2Fexample.com%2Fsearch%3Fquery%3Dhello%20world%26lang%3Den'	Spaces and special chars replaced with % codes
3	Decode encodedUrl	'https%3A%2F%2Fexample.com%2Fsearch%3Fquery%3Dhello%20world%26lang%3Den'	'https://example.com/search?query=hello world&lang=en'	Encoded string converted back to original URL
4	Print encodedUrl	'https%3A%2F%2Fexample.com%2Fsearch%3Fquery%3Dhello%20world%26lang%3Den'	https%3A%2F%2Fexample.com%2Fsearch%3Fquery%3Dhello%20world%26lang%3Den	Shows encoded URL string
5	Print decodedUrl	'https://example.com/search?query=hello world&lang=en'	https://example.com/search?query=hello world&lang=en	Shows original URL string restored
6	End	-	-	Encoding and decoding complete

💡 Finished encoding and decoding URL strings successfully

Variable Tracker

Variable	Start	After Encoding	After Decoding	Final
rawUrl	'https://example.com/search?query=hello world&lang=en'	'https://example.com/search?query=hello world&lang=en'	'https://example.com/search?query=hello world&lang=en'	'https://example.com/search?query=hello world&lang=en'
encodedUrl	undefined	'https%3A%2F%2Fexample.com%2Fsearch%3Fquery%3Dhello%20world%26lang%3Den'	'https%3A%2F%2Fexample.com%2Fsearch%3Fquery%3Dhello%20world%26lang%3Den'	'https%3A%2F%2Fexample.com%2Fsearch%3Fquery%3Dhello%20world%26lang%3Den'
decodedUrl	undefined	undefined	'https://example.com/search?query=hello world&lang=en'	'https://example.com/search?query=hello world&lang=en'

Key Moments - 3 Insights

Why do spaces in the URL become '%20' after encoding?

Spaces are not allowed in URLs, so encodeURIComponent replaces them with '%20' to make the URL safe to use. See step 2 in execution_table where spaces become '%20'.

What happens if we decode a string that was not encoded?

Decoding a normal URL string without encoded parts returns the same string unchanged. The decodeURIComponent function only changes encoded sequences like '%20'.

Why do we need to encode URLs before sending them over the internet?

URLs can contain special characters that might break communication or be misinterpreted. Encoding converts these characters into safe codes, ensuring the URL transmits correctly.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of encodedUrl at step 2?

A 'https://example.com/search?query=hello world&lang=en'

B 'https%3A%2F%2Fexample.com%2Fsearch%3Fquery%3Dhello%20world%26lang%3Den'

C 'hello world'

D 'https%3A%2F%2Fexample.com%2Fsearch%3Fquery%3Dhello+world%26lang%3Den'

💡 Hint

Check the 'Output' column at step 2 in the execution_table.

At which step does the decodedUrl get its final original value?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the 'decodedUrl' variable changes in variable_tracker and execution_table step 3.

If the rawUrl had no special characters, how would the encodedUrl change at step 2?

A It would have '%20' replacing spaces

B It would be empty

C It would be identical to rawUrl

D It would be double encoded

💡 Hint

Refer to how encodeURIComponent only changes special characters like spaces in execution_table step 2.

Concept Snapshot

Encoding and decoding URLs in Node.js:
- Use encodeURIComponent(string) to convert special characters to safe codes.
- Use decodeURIComponent(string) to revert encoded strings back.
- Encoding replaces spaces with '%20' and other special chars.
- Decoding restores the original URL string.
- Always encode URLs before sending over the internet to avoid errors.

Full Transcript

This lesson shows how to encode and decode URLs in Node.js using encodeURIComponent and decodeURIComponent functions. We start with a raw URL string that contains spaces and special characters. Encoding converts these characters into percent-encoded sequences like '%20' for spaces, making the URL safe to use in web requests. Decoding reverses this process, restoring the original URL string. The execution table traces each step: defining the raw URL, encoding it, decoding it, and printing both encoded and decoded results. The variable tracker shows how rawUrl stays the same, encodedUrl changes after encoding, and decodedUrl gets the original value after decoding. Key moments clarify why encoding is needed, what happens if decoding is done on normal strings, and why spaces become '%20'. The visual quiz tests understanding of encoded values, decoding steps, and effects of no spaces in the URL. This helps beginners see exactly how URL encoding and decoding work in practice.

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