URL class for parsing in Node.js - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new URL object from a string.

Node.js

const myUrl = new URL([1]);

Drag options to blanks, or click blank then click option'

AURL('https://example.com')

Bnew URL('https://example.com')

Chttps://example.com

D'https://example.com'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the URL string.

Passing the URL constructor itself as an argument.

You need to pass the URL string as a quoted string to the URL constructor.

2fill in blank

medium

Complete the code to get the hostname from a URL object.

Node.js

const hostname = myUrl.[1];

Drag options to blanks, or click blank then click option'

Aorigin

Bhostname

Chref

Dhost

Attempts:

3 left

💡 Hint

Common Mistakes

Using host which includes port number.

Using href which is the full URL string.

The hostname property gives just the domain name without port.

3fill in blank

hard

Fix the error in accessing the pathname of a URL object.

Node.js

const path = myUrl.[1];

Drag options to blanks, or click blank then click option'

Apathname

BgetPathname

Cpath

DgetPath

Attempts:

3 left

💡 Hint

Common Mistakes

Calling pathname as a function with parentheses.

Using non-existent methods like getPath.

The pathname is a property, not a function, so no parentheses are needed.

4fill in blank

hard

Fill both blanks to create a URL object with a base URL.

Node.js

const myUrl = new URL([1], [2]);

Drag options to blanks, or click blank then click option'

A'/page.html'

B'https://example.com'

C'page.html'

D'http://localhost'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a full URL as the first argument and base URL as second.

Omitting the base URL when using a relative path.

The first argument is the relative path, the second is the base URL string.

5fill in blank

hard

Fill all three blanks to extract the protocol, hostname, and port from a URL object.

Node.js

const protocol = myUrl.[1];
const hostname = myUrl.[2];
const port = myUrl.[3];

Drag options to blanks, or click blank then click option'

Aprotocol

Bhostname

Cport

Dhost

Attempts:

3 left

💡 Hint

Common Mistakes

Using host instead of hostname and port separately.

Forgetting the colon ':' in protocol value (it is included automatically).

Use protocol, hostname, and port properties to get these parts.

Practice

1. What does the URL class in Node.js primarily help you do?

easy

A. Break down and work with parts of a web address easily

B. Create new web servers

C. Encrypt data sent over the internet

D. Manage file system paths

Solution

1. Step 1: Understand the purpose of the URL class

   The URL class is designed to parse and handle web addresses, making it easy to access parts like hostname, pathname, and query.

2. Step 2: Compare with other options

   Creating servers, encrypting data, and managing file paths are unrelated to URL parsing.

3. Final Answer:

   Break down and work with parts of a web address easily -> Option A

4. Quick Check:

   URL class = parse web address [OK]

Hint: URL class = split web address parts easily [OK]

Common Mistakes:

• Confusing URL class with server creation
• Thinking URL class encrypts data
• Mixing URL class with file system modules

2. Which of the following is the correct way to create a new URL object for the address https://example.com/path?name=abc in Node.js?

easy

A. const url = url.parse('https://example.com/path?name=abc');

B. const url = URL('https://example.com/path?name=abc');

C. const url = new URL('https://example.com/path?name=abc');

D. const url = new URL.parse('https://example.com/path?name=abc');

Solution

1. Step 1: Recall the correct syntax for creating a URL object

   The URL class requires the new keyword and a string argument: new URL(string).

2. Step 2: Check each option

   const url = new URL('https://example.com/path?name=abc'); uses correct syntax. const url = URL('https://example.com/path?name=abc'); misses new. const url = url.parse('https://example.com/path?name=abc'); uses old url.parse method, not the URL class. const url = new URL.parse('https://example.com/path?name=abc'); incorrectly combines new and URL.parse.

3. Final Answer:

   const url = new URL('https://example.com/path?name=abc'); -> Option C

4. Quick Check:

   Use new URL() to create URL objects [OK]

Hint: Always use 'new URL()' to create URL objects [OK]

Common Mistakes:

• Omitting the 'new' keyword
• Using old url.parse() instead of URL class
• Trying to call URL as a function without 'new'

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

const url = new URL('https://example.com:8080/path/page?query=123#section');
console.log(url.hostname);
console.log(url.port);
console.log(url.pathname);
console.log(url.hash);

medium

A. example.com

/path/page
section

B. https://example.com
8080
path/page
section

C. example.com:8080

/path/page
#section

D. example.com
8080
/path/page
#section

Solution

1. Step 1: Understand URL properties

   hostname gives domain without port, port gives port number, pathname gives path starting with '/', hash includes '#' plus fragment.

2. Step 2: Match values from the URL

   Hostname is 'example.com', port is '8080', pathname is '/path/page', hash is '#section'.

3. Final Answer:

   example.com 8080 /path/page #section -> Option D

4. Quick Check:

   URL parts match output A [OK]

Hint: hostname excludes port; hash includes '#' [OK]

Common Mistakes:

• Including port in hostname
• Missing leading slash in pathname
• Omitting '#' in hash

4. Consider this code snippet:

const url = new URL('https://example.com/path');
url.hostname = 'newsite.com';
url.port = 3000;
url.pathname = 'newpath';
console.log(url.href);

What is the output?

medium

A. https://newsite.com:3000//newpath

B. https://newsite.com:3000/newpath

C. https://newsite.com:3000/path

D. https://newsite.com:3000/newpath/

Solution

1. Step 1: Understand pathname assignment

   Setting url.pathname = 'newpath' normalizes the path by adding a leading slash, resulting in '/newpath'.

2. Step 2: Construct the full URL

   Hostname changes to 'newsite.com', port to '3000', pathname becomes '/newpath'. So full URL is 'https://newsite.com:3000/newpath'.

3. Final Answer:

   https://newsite.com:3000/newpath -> Option B

4. Quick Check:

   Pathname setter normalizes with leading '/' [OK]

Hint: pathname setter adds leading '/' automatically [OK]

Common Mistakes:

• Expecting '//newpath' without leading slash
• Assuming pathname auto-adds slash
• Confusing pathname with href

5. You want to change the query parameter id to 42 in this URL: https://shop.com/products?category=books&id=10. Which code correctly updates the URL using the URL class?

hard

A. const url = new URL('https://shop.com/products?category=books&id=10');
url.searchParams.set('id', '42');
console.log(url.href);

B. const url = new URL('https://shop.com/products?category=books&id=10');
url.query.id = 42;
console.log(url.href);

C. const url = new URL('https://shop.com/products?category=books&id=10');
url.search.id = '42';
console.log(url.href);

D. const url = new URL('https://shop.com/products?category=books&id=10');
url.setQuery('id', '42');
console.log(url.href);

Solution

1. Step 1: Identify how to update query parameters

   The URL class provides searchParams with methods like set() to update query parameters safely.

2. Step 2: Check each option's method

   const url = new URL('https://shop.com/products?category=books&id=10'); url.searchParams.set('id', '42'); console.log(url.href); uses searchParams.set(), which is correct. Options A, C, and D use invalid properties or methods not available on URL objects.

3. Final Answer:

   const url = new URL('https://shop.com/products?category=books&id=10'); url.searchParams.set('id', '42'); console.log(url.href); -> Option A

4. Quick Check:

   Use searchParams.set() to update query [OK]

Hint: Use url.searchParams.set() to change query values [OK]

Common Mistakes:

• Trying to set query directly as object
• Using non-existent methods like setQuery
• Assigning query parameters without searchParams