function testPropagation(e) { e.preventDefault(); const { target } = e; if (target.localName !== 'a' || target.classList.contains('btn--show-modal')) return; console.log(target); const url = new URL(target.href); console.log('url', url); } //Expanation of new Url() const baseURL = 'https://www.example.com/'; const url = new URL('/path/to/page', baseURL); console.log(url.href); // "https://www.example.com/path/to/page" const url = new URL('https://www.example.com/path/to/page?query=123'); url.protocol = 'http'; url.hostname = 'another-example.com'; url.pathname = '/new/path'; url.searchParams.set('query', '456'); // Update the query parameter url.hash = '#newSection'; console.log(url.href); // "http://another-example.com/new/path?query=456#newSection" const url = new URL('https://www.example.com/path?name=David&age=30'); // Get the value of a query parameter console.log(url.searchParams.get('name')); // "David" // Add a new query parameter url.searchParams.append('city', 'Berlin'); // Update an existing query parameter url.searchParams.set('age', '31'); // Remove a query parameter url.searchParams.delete('name'); console.log(url.href); // "https://www.example.com/path?age=31&city=Berlin"
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter