How to create and manipulate an URL in Javascript? (Browser URL Object)

URL object

You can manipulate an URL with the URL web API object ¹⁾

• Build an URL object

const url = new URL(window.parent.location.href); // parent because this code runs in a iframe (if not delete it)

• Print a URL properties (…host, hostname,…)

console.log("Hostname: "+url.hostname); //
console.log("Path: "+url.pathname); //

• Manipulate the query string with https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
• Get a query parameter

console.log("Id Parameters: "+url.searchParams.get("id")); // none but it should work

• Set a query parameter

url.searchParams.set("id","#123"); 
console.log("Id Parameters After Setting: "+url.searchParams.get("id")); 

• Print

console.log("New URL: "+url.toString());

Query Parameters

You can also manipulate only the URL Query Parameters.

Note that url.searchParams is available in a URL at url.searchParams.

const url = new URL("https://example.com/path?key1=value1&key2=value2");
const queryParams = new URLSearchParams(url.search);
console.log(`Size?: ${queryParams.size}`); 
console.log(`Key1?: ${queryParams.has("key1")}`); 
console.log(`GetKey1: ${queryParams.get("key1")}`); 
console.log(`Set`); 
queryParams.set("key3","value3");
console.log(`Delete`); 
queryParams.delete("key1");
console.log(`toString: ${queryParams.toString()}`); 

Ps: Note that searchParams is a iterator

How to get the url of the actual HTML page (with Javascript)

The value is stored in the href property

• We used window.parent because the code is run in a iframe but in a normal page, you would just use window.

console.log("URL: "+window.parent.location.href); // url
// value is `about:srcdoc` because we are in a iframe
console.log("URL in iframe: "+window.location.href);

• Path

console.log("Path: "+window.parent.location.pathname);

• host is the endpoint ie hostname and port (if not the default HTTP port)

console.log("Host: "+window.parent.location.host); 

• hostname - only the name of the host (ie without the port)

console.log("Hostname: "+window.parent.location.hostname); 

• fragment

console.log("Anchor: "+window.parent.location.hash);  

• port (empty string if none)

console.log("Port: "+window.parent.location.port);  

• protocol

console.log("Protocol: "+window.parent.location.protocol); 

• query string ?key=value

console.log("Query String: "+window.parent.location.search);

URL tied to a memory resource such as a file

The DOM URL.createObjectURL() and URL.revokeObjectURL() methods let you create data URL strings.

More Browser / Javascript - Object URL (createObjectURL / revokeObjectURL)