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.