JavaScript : parseURL, Labeled Loops, and IntersectionObserver

1. parseURL

This is the recommended approach for modern browsers. It creates a URL object from a string, providing properties to access different parts of the URL:

const urlString = 'https://www.example.com/path/to/file?param1=value1&param2=value2#fragment';
const url = new URL(urlString);
console.log(url.protocol);  // Output: https:
console.log(url.hostname); // Output: www.example.com
console.log(url.pathname); // Output: /path/to/file
console.log(url.search);    // Output: ?param1=value1&param2=value2
console.log(url.hash);     // Output: #fragment

- Regular Expressions (For Compatibility):

Get Louis Trinh’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

For older browsers or more control, you can use regular expressions to parse URLs. However, this approach can be more complex and error-prone. Here’s a basic example:

function parseUrlRegex(urlString) {
    const regex = /^(?:([a-z]+):\/\/)?(?:([^:@]+)(?::([^:@]+))?@)?([^\/?]+)(?:\:([0-9]+))?(\/[^#\?]*)(?:\?[^#]*)?(?:#.*)$/i;
    const match = regex.exec(urlString);
    if (!match) return null;
    return {
        protocol: match[1],
        username: match[2],
        password: match[3],
        host: match[4],
        port: match[5],
        pathname: match[6],
        search: match[7],
        hash: match[8]
    };
}
const url = parseUrlRegex('https://user:pass@www.example.com:8080/path/to/file?param1=value1&param2=value2#fragment');
console.log(url); // Output: { protocol: 'https', username: 'user', password: 'pass', ... }

2. Labeled Loops

Labeled loops, also known as named loops, allow you to associate a label with a loop using the labelName: syntax before the loop statement. You can then use a break labelName; statement to exit the specific labeled loop from within nested loops:

outerLoop: for (let i = 0; i < 3; i++) {
    console.log('Outer loop, iteration:', i);
    innerLoop: for (let j = 0; j < 5; j++) {
        console.log('  Inner loop, iteration:', j);
        if (j === 2) {
            break outerLoop; // Exit both loops
        }
    }
}

3. IntersectionObserver

The IntersectionObserver API allows you to monitor when elements become visible or hidden within the viewport (the visible area of the browser window). This is useful for lazy loading images, infinite scrolling, or triggering animations when elements come into view.

Here’s an example:

const images = document.querySelectorAll('img');
const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // Intersection detected, load/show the image
            if (!entry.target.src) {
                entry.target.src = entry.target.dataset.src; // Assuming you have a data-src attribute for lazy loading
            }
            entry.target.classList.add('visible');
        } else {
            // Intersection not detected, hide/unload the image (optional)
            entry.target.classList.remove('visible');
            // entry.target.src = ''; // Unload the image (optional)
        }
    });
}, {
    // Configuration options:
    root: null, // Observe within the entire viewport
    threshold: 0.5 // Observe when 50% or more of the element is visible
});
images.forEach(image => observer.observe(image));