Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The URL API makes it easy to work with URLs - parse them, read parts, modify them, and build new ones. No more messy string splitting! It breaks URLs into clean, easy-to-use pieces.
https://user:pass@example.com:8080/path/page?search=value&sort=asc#sectionprotocolhttps:
usernameuser
passwordpass
hostnameexample.com
port8080
pathname/path/page
search?search=value&sort=asc
hash#section
Try parsing URLs and building search queries!
<div style="max-width: 700px; margin: 0 auto; font-family: sans-serif;">
<h2 style="color: #10b981; margin-bottom: 20px;">🔗 URL API Playground</h2>
<!-- URL Parser Section -->
<div style="background: #f0fdf4; padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 2px solid #86efac;">
<h3 style="color: #15803d; margin-bottom: 15px;">📋 URL Parser</h3>
<input
type="text"
id="urlInput"
value="https://shop.com:8080/products?category=electronics&sort=price#reviews"
style="width: 100%; padding: 12px; border: 2px solid #86efac; border-radius: 6px; font-size: 14px; font-family: monospace; margin-bottom: 15px;"
placeholder="Enter a URL to parse...">
<button id="parseBtn" style="padding: 10px 20px; background: #10b981; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600;">
Parse URL
</button>
<div id="parsedResult" style="margin-top: 15px; background: white; padding: 15px; border-radius: 6px; display: none;">
<h4 style="margin-top: 0; color: #15803d;">URL Parts:</h4>
<div id="urlParts" style="font-family: monospace; font-size: 13px; line-height: 2;"></div>
</div>
</div>
<!-- Query Builder Section -->
<div style="background: #eff6ff; padding: 20px; border-radius: 8px; border: 2px solid #93c5fd;">
<h3 style="color: #1e40af; margin-bottom: 15px;">🔍 Search Filter Builder</h3>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
<div>
<label style="display: block; margin-bottom: 5px; font-weight: 600; color: #1e40af; font-size: 14px;">Search:</label>
<input type="text" id="searchInput" placeholder="e.g., laptop" style="width: 100%; padding: 8px; border: 2px solid #93c5fd; border-radius: 6px;">
</div>
<div>
<label style="display: block; margin-bottom: 5px; font-weight: 600; color: #1e40af; font-size: 14px;">Category:</label>
<select id="categorySelect" style="width: 100%; padding: 8px; border: 2px solid #93c5fd; border-radius: 6px;">
<option value="">All</option>
<option value="electronics">Electronics</option>
<option value="clothing">Clothing</option>
<option value="books">Books</option>
</select>
</div>
<div>
<label style="display: block; margin-bottom: 5px; font-weight: 600; color: #1e40af; font-size: 14px;">Min Price:</label>
<input type="number" id="minPrice" placeholder="0" style="width: 100%; padding: 8px; border: 2px solid #93c5fd; border-radius: 6px;">
</div>
<div>
<label style="display: block; margin-bottom: 5px; font-weight: 600; color: #1e40af; font-size: 14px;">Max Price:</label>
<input type="number" id="maxPrice" placeholder="1000" style="width: 100%; padding: 8px; border: 2px solid #93c5fd; border-radius: 6px;">
</div>
<div>
<label style="display: block; margin-bottom: 5px; font-weight: 600; color: #1e40af; font-size: 14px;">Sort By:</label>
<select id="sortSelect" style="width: 100%; padding: 8px; border: 2px solid #93c5fd; border-radius: 6px;">
<option value="popularity">Popularity</option>
<option value="price">Price</option>
<option value="rating">Rating</option>
</select>
</div>
<div>
<label style="display: block; margin-bottom: 5px; font-weight: 600; color: #1e40af; font-size: 14px;">Page:</label>
<input type="number" id="pageInput" value="1" min="1" style="width: 100%; padding: 8px; border: 2px solid #93c5fd; border-radius: 6px;">
</div>
</div>
<button id="buildBtn" style="padding: 10px 20px; background: #2563eb; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; margin-right: 10px;">
🔨 Build URL
</button>
<button id="clearBtn" style="padding: 10px 20px; background: #64748b; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600;">
Clear
</button>
<div id="builtUrl" style="margin-top: 15px; padding: 12px; background: white; border-radius: 6px; font-family: monospace; font-size: 13px; color: #1e40af; word-break: break-all; display: none;"></div>
</div>
<!-- Results Display -->
<div id="results" style="margin-top: 20px; padding: 15px; background: #fefce8; border-radius: 8px; border: 2px solid #fde047; display: none;">
<h4 style="margin-top: 0; color: #854d0e;">✨ Active Filters:</h4>
<div id="activeFilters" style="font-size: 14px; color: #713f12;"></div>
</div>
</div>Loading preview...
// Create URL object from string
const url = new URL('https://example.com:8080/products?category=books&sort=price#reviews');
// Read all the parts easily!
console.log(url.protocol); // "https:"
console.log(url.hostname); // "example.com"
console.log(url.port); // "8080"
console.log(url.pathname); // "/products"
console.log(url.search); // "?category=books&sort=price"
console.log(url.hash); // "#reviews"
// Get full URL back
console.log(url.href); // Full URL string
// Get host (hostname + port)
console.log(url.host); // "example.com:8080"
// Get origin (protocol + hostname + port)
console.log(url.origin); // "https://example.com:8080"
// 🎯 No more messy string parsing!// URL with query parameters
const url = new URL('https://shop.com/products?category=shoes&color=red&size=10');
// Get URLSearchParams object
const params = url.searchParams;
// Read parameters
console.log(params.get('category')); // "shoes"
console.log(params.get('color')); // "red"
console.log(params.has('size')); // true
// Add/change parameters
params.set('brand', 'nike'); // Add new parameter
params.set('color', 'blue'); // Change existing parameter
params.delete('size'); // Remove parameter
console.log(url.href);
// "https://shop.com/products?category=shoes&color=blue&brand=nike"
// Loop through all parameters
for (const [key, value] of params) {
console.log(`${key}: ${value}`);
}
// 🎯 Clean API - no messy string manipulation!Scroll up to the interactive demo to try parsing URLs and building search queries with filters. See how URLSearchParams works in real-time!
Read and modify search parameters
Build API URLs with parameters
Handle page numbers in URL
Parse and validate user-submitted URLs
Extract path and query info for routing
Track URL parameters for analytics
Don't manually build URLs with string concatenation - use URL API
Use searchParams to read and modify query parameters easily
URL API automatically handles special characters and encoding
Use try/catch when creating URL objects from user input
try { const url = new URL(userInput); } catch { /* invalid */ }Relative URLs need a base URL as second parameter
const url = new URL('https://example.com/path?key=value#hash');
console.log(url.hostname); // "example.com"
console.log(url.pathname); // "/path"
console.log(url.search); // "?key=value"const params = url.searchParams;
params.get('key'); // Get value
params.set('key', 'new'); // Set value
params.delete('key'); // Remove parameter✨ Auto Encoding: Handles special characters automatically
new URL() breaks URLs
Into easy-to-use parts
Easy query parameter
Read, add, modify, delete
Construct API URLs
Clean and readable
Handles special chars
No manual encoding